nxtgauge-admin-solid/src/routes/admin/roles/index.tsx

import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
import { useSearchParams } from '@solidjs/router';
import AdminShell from '~/components/AdminShell';
import type { CrudRecord } from '~/lib/admin/types';

const API = '/api/gateway';

type RoleRecord = CrudRecord & {
  code?: string;
  department?: string;
  usersAssigned?: number;
  permissionsCount?: number;
  status: 'ACTIVE' | 'INACTIVE';
  createdDate?: string;
};

const FALLBACK_ROLES: RoleRecord[] = [
  { id: 'r1', name: 'System Administrator', code: 'ADM-SYS', department: 'IT', usersAssigned: 12, permissionsCount: 150, status: 'ACTIVE', createdDate: '2026-01-12' },
  { id: 'r2', name: 'HR Manager', code: 'HR-MGR', department: 'HR', usersAssigned: 4, permissionsCount: 45, status: 'ACTIVE', createdDate: '2026-02-05' },
  { id: 'r3', name: 'Finance Controller', code: 'FIN-CON', department: 'Finance', usersAssigned: 2, permissionsCount: 60, status: 'INACTIVE', createdDate: '2026-03-18' },
];

const MODULES = [
  'Employee Management', 'Department Management', 'Designation Management', 'Internal Role Management',
  'Verification Management', 'Approval Management', 'Users Management', 'Company Management'
];

function StatusBadge(props: { status: string }) {
  const active = () => props.status === 'ACTIVE';
  return (
    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : '#D1D5DB'};background:${active() ? '#FFF1EB' : '#F3F4F6'};color:${active() ? '#FF5E13' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
      {active() ? 'Active' : 'Inactive'}
    </span>
  );
}

function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string }) {
  return (
    <label style="display:block">
      <span style="font-size:13px;font-weight:600;color:#374151">
        {props.label}{props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
      </span>
      <input
        type="text"
        value={props.value}
        onInput={(e) => props.onInput(e.currentTarget.value)}
        placeholder={props.placeholder}
        style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
      />
    </label>
  );
}

export default function RoleManagementPage() {
  const [view, setView] = createSignal<'list' | 'form' | 'detail'>('list');
  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
  const [formTab, setFormTab] = createSignal<'general' | 'permissions' | 'settings'>('general');
  const [detailTab, setDetailTab] = createSignal<'permissions' | 'users' | 'logs'>('permissions');
  
  const [search, setSearch] = createSignal('');
  const [rows, setRows] = createSignal<RoleRecord[]>([]);
  const [viewingRole, setViewingRole] = createSignal<RoleRecord | null>(null);
  const [editingId, setEditingId] = createSignal<string | null>(null);
  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);

  const [name, setName] = createSignal('');
  const [code, setCode] = createSignal('');
  const [dept, setDept] = createSignal('');
  const [desc, setDesc] = createSignal('');

  const load = async () => {
    setRows(FALLBACK_ROLES);
  };

  onMount(() => void load());

  const filteredRows = createMemo(() => {
    const q = search().toLowerCase();
    if (!q) return rows();
    return rows().filter(r => r.name.toLowerCase().includes(q) || (r.code || '').toLowerCase().includes(q));
  });

  const resetForm = () => {
    setEditingId(null); setName(''); setCode(''); setDept(''); setDesc(''); setFormTab('general');
  };

  const openCreate = () => { resetForm(); setView('form'); };
  const openEdit = (row: RoleRecord) => {
    setEditingId(row.id); setName(row.name); setCode(row.code || '');
    setDept(row.department || ''); setView('form'); setOpenMenuId(null);
  };
  const openDetail = (row: RoleRecord) => {
    setViewingRole(row); setView('detail'); setListTab('view'); setOpenMenuId(null);
  };

  return (
    <AdminShell>
      <div class="w-full space-y-6 pb-8">
        
        <div style="margin-bottom: 1.5rem">
          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Internal Role Management</h1>
          <p class="mt-1 text-[14px] text-[#6B7280]">Define and manage organizational access levels with granular permission control</p>
        </div>

        {/* ── LIST VIEW ── */}
        <Show when={view() === 'list'}>
          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
            {([
              { key: 'all', label: 'All Roles', action: () => setListTab('all') },
              { key: 'create', label: 'Create Role', action: () => { setListTab('create'); openCreate(); } },
              { key: 'view', label: 'View Role', action: () => setListTab('view') },
            ] as const).map((tab) => (
              <button
                type="button"
                onClick={tab.action}
                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
              >
                {tab.label}
              </button>
            ))}
          </div>

          <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
            <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
              <input
                value={search()}
                onInput={(e) => setSearch(e.currentTarget.value)}
                placeholder="Search roles..."
                style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
              />
              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">Filters</button>
              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">Export</button>
            </div>

            <div class="overflow-x-auto">
              <table class="min-w-full">
                <thead>
                  <tr style="background:#0D0D2A;text-align:left">
                    {['Role Name', 'Role Code', 'Department', 'Users', 'Status', 'Actions'].map(h => (
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  <For each={filteredRows()}>
                    {(row) => (
                      <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
                        <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
                        <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.code || '—'}</td>
                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.department || '—'}</td>
                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.usersAssigned} users</td>
                        <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
                        <td style="padding:12px 20px;position:relative">
                          <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
                          </button>
                          <Show when={openMenuId() === row.id}>
                            <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
                              <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Role</button>
                              <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Role</button>
                              <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Delete Role</button>
                            </div>
                          </Show>
                        </td>
                      </tr>
                    )}
                  </For>
                </tbody>
              </table>
            </div>
          </div>
        </Show>

        {/* ── FORM VIEW ── */}
        <Show when={view() === 'form'}>
          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
            <button type="button" onClick={() => setView('list')} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Roles</button>
            <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit Role' : 'Create Role'}</button>
          </div>

          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
              {(['general', 'permissions', 'settings'] as const).map((tab, i) => {
                const labels = ['General Information', 'Module Access', 'Role Settings'];
                const active = () => formTab() === tab;
                return (
                  <button type="button" onClick={() => setFormTab(tab)} style={`position:relative;padding:14px 8px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
                    {labels[i]}
                    <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
                  </button>
                );
              })}
            </div>

            <div style="padding:24px">
              <Show when={formTab() === 'general'}>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
                  <FormInput label="Role Name" required value={name()} onInput={setName} />
                  <FormInput label="Role Code" required value={code()} onInput={setCode} />
                  <FormInput label="Department" value={dept()} onInput={setDept} />
                </div>
              </Show>

              <Show when={formTab() === 'permissions'}>
                <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
                  <table style="width:100%;border-collapse:collapse">
                    <thead style="background:#F9FAFB">
                      <tr style="text-align:left">
                        <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
                        {['View', 'Create', 'Update', 'Delete'].map(p => (
                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{p}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      <For each={MODULES}>
                        {(mod) => (
                          <tr style="border-top:1px solid #E5E7EB">
                            <td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mod}</td>
                            {[1, 2, 3, 4].map(() => (
                              <td style="padding:12px 16px;text-align:center">
                                <input type="checkbox" style="width:16px;height:16px;accent-color:#FF5E13" />
                              </td>
                            ))}
                          </tr>
                        )}
                      </For>
                    </tbody>
                  </table>
                </div>
              </Show>

              <Show when={formTab() === 'settings'}>
                <div style="display:flex;flex-direction:column;gap:20px">
                  <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;background:#F9FAFB;border:1px solid #E5E7EB">
                    <div>
                      <p style="font-size:13px;font-weight:600;color:#111827">Allow Role to Approve Requests</p>
                      <p style="font-size:12px;color:#6B7280">Users with this role can make final decisions in Approval Management.</p>
                    </div>
                    <div style="width:40px;height:20px;background:#FF5E13;border-radius:10px;position:relative;cursor:pointer"><div style="width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;right:2px" /></div>
                  </div>
                </div>
              </Show>
            </div>

            <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
              <button type="button" onClick={() => setView('list')} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
              <button type="button" style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
                {editingId() ? 'Update Role' : 'Create Role'}
              </button>
            </div>
          </div>
        </Show>

        {/* ── DETAIL VIEW ── */}
        <Show when={view() === 'detail' && viewingRole()}>
          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
            <div style="padding:24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
              <div>
                <div style="display:flex;align-items:center;gap:12px">
                  <h2 style="font-size:20px;font-weight:700;color:#111827">{viewingRole()!.name}</h2>
                  <StatusBadge status={viewingRole()!.status} />
                </div>
                <p style="font-size:14px;color:#6B7280;margin-top:2px">Code: {viewingRole()!.code} • Dept: {viewingRole()!.department} • Assigned: {viewingRole()!.usersAssigned} users</p>
              </div>
              <button type="button" onClick={() => openEdit(viewingRole()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Role</button>
            </div>

            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
              {(['permissions', 'users', 'logs'] as const).map((tab, i) => {
                const labels = ['Permissions', 'Assigned Users', 'Activity Logs'];
                const active = () => detailTab() === tab;
                return (
                  <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
                    {labels[i]}
                    <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
                  </button>
                );
              })}
            </div>

            <div style="padding:24px">
              <Show when={detailTab() === 'permissions'}>
                <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;opacity:0.7">
                  <table style="width:100%;border-collapse:collapse">
                    <thead style="background:#F9FAFB">
                      <tr style="text-align:left">
                        <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
                        {['View', 'Create', 'Update', 'Delete'].map(p => (
                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{p}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      <For each={MODULES}>
                        {(mod) => (
                          <tr style="border-top:1px solid #E5E7EB">
                            <td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mod}</td>
                            {[1, 2, 3, 4].map(() => (
                              <td style="padding:12px 16px;text-align:center">
                                <input type="checkbox" checked disabled style="width:16px;height:16px;accent-color:#FF5E13" />
                              </td>
                            ))}
                          </tr>
                        )}
                      </For>
                    </tbody>
                  </table>
                </div>
              </Show>

              <Show when={detailTab() === 'users'}>
                <div style="padding:20px;text-align:center;font-size:14px;color:#6B7280">Users assigned to this role will appear here.</div>
              </Show>

              <Show when={detailTab() === 'logs'}>
                <div style="display:flex;flex-direction:column;gap:16px">
                   <div style="display:flex;gap:12px">
                     <div style="width:8px;height:8px;border-radius:50%;background:#FF5E13;margin-top:4px" />
                     <div>
                       <p style="font-size:13px;font-weight:600;color:#111827">Permissions Updated</p>
                       <p style="font-size:12px;color:#6B7280">Admin modified module access levels • 1 day ago</p>
                     </div>
                   </div>
                </div>
              </Show>
            </div>

            <div style="padding:16px 24px;border-top:1px solid #E5E7EB;display:flex;justify-content:flex-end">
              <button type="button" onClick={() => { setView('list'); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
            </div>
          </div>
        </Show>

      </div>
    </AdminShell>
  );
}