import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
import AdminShell from '~/components/AdminShell';
import { ChevronDown, SlidersHorizontal, Download, MoreVertical } from 'lucide-solid';

type DesignationRecord = {
  id: string;
  name: string;
  code: string;
  department: string;
  level: string;
  description?: string;
  totalEmployees: number;
  status: 'ACTIVE' | 'INACTIVE';
  createdDate: string;
  canManageTeam?: boolean;
  canApprove?: boolean;
};

const FALLBACK_DESIGNATIONS: DesignationRecord[] = [
  { id: 'z1', name: 'Senior Software Engineer', code: 'SSE-001', department: 'Engineering', level: 'Senior', totalEmployees: 12, status: 'ACTIVE', createdDate: '2024-01-15' },
  { id: 'z2', name: 'Marketing Manager', code: 'MM-002', department: 'Marketing', level: 'Manager', totalEmployees: 8, status: 'ACTIVE', createdDate: '2024-01-20' },
  { id: 'z3', name: 'Sales Executive', code: 'SE-003', department: 'Sales', level: 'Executive', totalEmployees: 15, status: 'ACTIVE', createdDate: '2024-02-01' },
  { id: 'z4', name: 'HR Specialist', code: 'HRS-004', department: 'Human Resources', level: 'Specialist', totalEmployees: 5, status: 'ACTIVE', createdDate: '2024-02-10' },
  { id: 'z5', name: 'Financial Analyst', code: 'FA-005', department: 'Finance', level: 'Analyst', totalEmployees: 6, status: 'ACTIVE', createdDate: '2024-02-15' },
  { id: 'z6', name: 'Operations Manager', code: 'OM-006', department: 'Operations', level: 'Manager', totalEmployees: 4, status: 'INACTIVE', createdDate: '2024-03-01' },
  { id: 'z7', name: 'Customer Support Lead', code: 'CSL-007', department: 'Customer Support', level: 'Lead', totalEmployees: 9, status: 'ACTIVE', createdDate: '2024-03-05' },
  { id: 'z8', name: 'Product Designer', code: 'PD-008', department: 'Product', level: 'Designer', totalEmployees: 7, status: 'ACTIVE', createdDate: '2024-03-10' },
];

const LEVELS = ['Intern', 'Junior', 'Mid-Level', 'Senior', 'Lead', 'Manager', 'Director', 'VP', 'C-Level', 'Executive', 'Specialist', 'Analyst', 'Designer'];
const DEPARTMENTS = ['Engineering', 'Marketing', 'Sales', 'Human Resources', 'Finance', 'Operations', 'Product', 'Customer Support'];

function levelBadge(level: string) {
  const map: Record<string, { bg: string; color: string; border: string }> = {
    Senior: { bg: '#EFF6FF', color: '#1D4ED8', border: '#BFDBFE' },
    Manager: { bg: '#F5F3FF', color: '#7C3AED', border: '#DDD6FE' },
    Executive: { bg: '#ECFDF5', color: '#059669', border: '#A7F3D0' },
    Specialist: { bg: '#F0FDFA', color: '#0D9488', border: '#99F6E4' },
    Analyst: { bg: '#FFF7ED', color: '#EA580C', border: '#FED7AA' },
    Lead: { bg: '#EFF6FF', color: '#2563EB', border: '#BFDBFE' },
    Designer: { bg: '#FDF4FF', color: '#A21CAF', border: '#F0ABFC' },
    Director: { bg: '#FFF1F2', color: '#BE123C', border: '#FECDD3' },
  };
  const s = map[level] ?? { bg: '#F3F4F6', color: '#4B5563', border: '#D1D5DB' };
  return (
    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${s.border};background:${s.bg};color:${s.color};padding:2px 10px;font-size:12px;font-weight:500`}>
      {level}
    </span>
  );
}

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 Toggle(props: { on: boolean; onChange: (v: boolean) => void }) {
  return (
    <button
      type="button"
      onClick={() => props.onChange(!props.on)}
      style={`width:40px;height:22px;border-radius:11px;background:${props.on ? '#FF5E13' : '#E5E7EB'};position:relative;cursor:pointer;border:none;padding:0;flex-shrink:0`}
    >
      <span style={`position:absolute;width:18px;height:18px;border-radius:50%;background:white;top:2px;transition:left 0.2s;left:${props.on ? '20px' : '2px'}`} />
    </button>
  );
}

function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string; type?: 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={props.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>
  );
}

function FormSelect(props: { label: string; required?: boolean; value: string; onChange: (v: string) => void; children: any }) {
  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>
      <select
        value={props.value}
        onChange={(e) => props.onChange(e.currentTarget.value)}
        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;appearance:none"
      >
        {props.children}
      </select>
    </label>
  );
}

export default function DesignationManagementPage() {
  const [mainTab, setMainTab] = createSignal<'all' | 'create'>('all');
  const [formTab, setFormTab] = createSignal<'general' | 'settings' | 'permissions'>('general');
  const [search, setSearch] = createSignal('');
  const [rows, setRows] = createSignal<DesignationRecord[]>([]);
  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);

  // form state
  const [name, setName] = createSignal('');
  const [code, setCode] = createSignal('');
  const [department, setDepartment] = createSignal('');
  const [level, setLevel] = createSignal('');
  const [description, setDescription] = createSignal('');
  const [formStatus, setFormStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE');
  const [canManageTeam, setCanManageTeam] = createSignal(false);
  const [canApprove, setCanApprove] = createSignal(false);

  // permissions toggles
  const [permViewEmp, setPermViewEmp] = createSignal(false);
  const [permCreateEmp, setPermCreateEmp] = createSignal(false);
  const [permEditEmp, setPermEditEmp] = createSignal(false);
  const [permDeleteEmp, setPermDeleteEmp] = createSignal(false);
  const [permAssignRoles, setPermAssignRoles] = createSignal(false);

  const load = async () => {
    try {
      const res = await fetch(`/api/gateway/api/admin/designations?page=1&limit=100`);
      if (res.ok) {
        const payload = await res.json().catch(() => null);
        const list = Array.isArray(payload) ? payload : Array.isArray(payload?.data) ? payload.data : Array.isArray(payload?.items) ? payload.items : [];
        if (list.length > 0) {
          setRows(list.map((item: any, i: number) => ({
            id: String(item.id ?? `des-${i + 1}`),
            name: String(item.name ?? ''),
            code: String(item.code ?? ''),
            department: String(item.department ?? item.department_name ?? ''),
            level: String(item.level ?? ''),
            description: String(item.description ?? ''),
            totalEmployees: Number(item.totalEmployees ?? item.total_employees ?? 0),
            status: String(item.status ?? 'ACTIVE').toUpperCase() === 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
            createdDate: String(item.createdDate ?? item.created_at ?? ''),
          })));
          return;
        }
      }
    } catch {}
    setRows(FALLBACK_DESIGNATIONS);
  };

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

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

  const resetForm = () => {
    setName(''); setCode(''); setDepartment(''); setLevel('');
    setDescription(''); setFormStatus('ACTIVE');
    setCanManageTeam(false); setCanApprove(false);
    setPermViewEmp(false); setPermCreateEmp(false);
    setPermEditEmp(false); setPermDeleteEmp(false);
    setPermAssignRoles(false);
    setFormTab('general');
  };

  const handleTabChange = (tab: 'all' | 'create') => {
    setMainTab(tab);
    if (tab === 'create') resetForm();
    setOpenMenuId(null);
  };

  const formatDate = (d: string) => {
    if (!d) return '—';
    try {
      return new Date(d).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
    } catch { return d; }
  };

  return (
    <AdminShell>
      <div style="padding:24px">
        {/* Page header */}
        <div>
          <h1 style="font-size:24px;font-weight:700;color:#111827;margin:0">Designation Management</h1>
          <p style="font-size:13px;color:#6B7280;margin-top:4px;margin-bottom:0">Manage all designations and job positions</p>
        </div>

        {/* Main tabs */}
        <div style="display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB;margin-top:24px">
          <button
            type="button"
            onClick={() => handleTabChange('all')}
            style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${mainTab() === 'all' ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px'}`}
          >
            All Designations
          </button>
          <button
            type="button"
            onClick={() => handleTabChange('create')}
            style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${mainTab() === 'create' ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px'}`}
          >
            Create Designation
          </button>
        </div>

        {/* All Designations view */}
        <Show when={mainTab() === 'all'}>
          <div style="margin-top:20px;margin-left:-24px;margin-right:-24px;border-radius:0;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white">
            {/* Filter bar */}
            <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
              <input
                type="text"
                placeholder="Search designations..."
                value={search()}
                onInput={(e) => setSearch(e.currentTarget.value)}
                style="height:34px;flex:1;max-width:240px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;outline:none;color:#111827;background:white"
              />
              <button
                type="button"
                style="display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;color:#374151;gap:6px;cursor:pointer"
              >
                <ChevronDown size={14} />
                Sort
              </button>
              <button
                type="button"
                style="display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;color:#374151;gap:6px;cursor:pointer"
              >
                <SlidersHorizontal size={14} />
                Filters
              </button>
              <button
                type="button"
                style="display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;background:#0D0D2A;color:white;font-size:13px;font-weight:500;border:none;cursor:pointer;gap:6px"
              >
                <Download size={14} />
                Export
              </button>
            </div>

            {/* Table */}
            <div style="overflow-x:auto">
              <table style="width:100%;border-collapse:collapse">
                <thead>
                  <tr style="background:#0D0D2A">
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Designation Name</th>
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Designation Code</th>
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Department</th>
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Level</th>
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Total Employees</th>
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Status</th>
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Created Date</th>
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <For each={filteredRows()}>
                    {(row) => (
                      <tr style="border-bottom:1px solid #F3F4F6">
                        <td style="padding:12px 20px;font-size:14px;color:#111827;font-weight:600">{row.name}</td>
                        <td style="padding:12px 20px;font-size:14px;color:#111827">{row.code}</td>
                        <td style="padding:12px 20px;font-size:14px;color:#111827">{row.department}</td>
                        <td style="padding:12px 20px;font-size:14px;color:#111827">{levelBadge(row.level)}</td>
                        <td style="padding:12px 20px;font-size:14px;color:#111827">{row.totalEmployees}</td>
                        <td style="padding:12px 20px;font-size:14px;color:#111827"><StatusBadge status={row.status} /></td>
                        <td style="padding:12px 20px;font-size:14px;color:#111827">{formatDate(row.createdDate)}</td>
                        <td style="padding:12px 20px;font-size:14px;color:#111827;position:relative">
                          <button
                            type="button"
                            onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)}
                            style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid #E5E7EB;background:white;cursor:pointer;color:#374151"
                          >
                            <MoreVertical size={16} />
                          </button>
                          <Show when={openMenuId() === row.id}>
                            <div style="position:absolute;right:20px;top:44px;z-index:50;background:white;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);min-width:140px;overflow:hidden">
                              <button
                                type="button"
                                onClick={() => { setOpenMenuId(null); }}
                                style="display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer"
                                class="hover:bg-[#FAFAFA]"
                              >
                                Edit
                              </button>
                              <button
                                type="button"
                                onClick={() => { setOpenMenuId(null); }}
                                style="display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer"
                                class="hover:bg-[#FFF5F5]"
                              >
                                Delete
                              </button>
                            </div>
                          </Show>
                        </td>
                      </tr>
                    )}
                  </For>
                </tbody>
              </table>
            </div>

            {/* Pagination */}
            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #F3F4F6">
              <span style="font-size:13px;color:#6B7280">
                Showing 1-{filteredRows().length} of {filteredRows().length} designations
              </span>
              <div style="display:flex;align-items:center;gap:4px">
                <button
                  type="button"
                  style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid #E5E7EB;background:white;color:#374151;cursor:pointer;font-size:13px"
                >
                  ‹
                </button>
                <button
                  type="button"
                  style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:#FF5E13;color:white;border:none;cursor:pointer;font-size:13px;font-weight:500"
                >
                  1
                </button>
                <button
                  type="button"
                  style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid #E5E7EB;background:white;color:#374151;cursor:pointer;font-size:13px"
                >
                  ›
                </button>
              </div>
            </div>
          </div>
        </Show>

        {/* Create Designation view */}
        <Show when={mainTab() === 'create'}>
          <div style="margin-top:20px;border-radius:16px;border:1px solid #E5E7EB;background:white;overflow:hidden">
            {/* Form sub-tabs */}
            <div style="display:flex;align-items:center;gap:0;border-bottom:1px solid #E5E7EB;padding:0 24px">
              <button
                type="button"
                onClick={() => setFormTab('general')}
                style={`padding:14px 0;margin-right:24px;font-size:14px;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${formTab() === 'general' ? 'color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px;font-weight:600' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500'}`}
              >
                General Information
              </button>
              <button
                type="button"
                onClick={() => setFormTab('settings')}
                style={`padding:14px 0;margin-right:24px;font-size:14px;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${formTab() === 'settings' ? 'color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px;font-weight:600' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500'}`}
              >
                Designation Settings
              </button>
              <button
                type="button"
                onClick={() => setFormTab('permissions')}
                style={`padding:14px 0;margin-right:24px;font-size:14px;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${formTab() === 'permissions' ? 'color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px;font-weight:600' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500'}`}
              >
                Permissions
              </button>
            </div>

            {/* General Information tab */}
            <Show when={formTab() === 'general'}>
              <div style="padding:24px">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
                  <FormInput
                    label="Designation Name"
                    required
                    value={name()}
                    onInput={setName}
                    placeholder="e.g. Senior Software Engineer"
                  />
                  <FormInput
                    label="Designation Code"
                    required
                    value={code()}
                    onInput={setCode}
                    placeholder="e.g. SSE-001"
                  />
                  <FormSelect
                    label="Department"
                    required
                    value={department()}
                    onChange={setDepartment}
                  >
                    <option value="">Select department</option>
                    <For each={DEPARTMENTS}>{(d) => <option value={d}>{d}</option>}</For>
                  </FormSelect>
                  <FormSelect
                    label="Designation Level"
                    required
                    value={level()}
                    onChange={setLevel}
                  >
                    <option value="">Select level</option>
                    <For each={LEVELS}>{(l) => <option value={l}>{l}</option>}</For>
                  </FormSelect>
                  <div style="grid-column:1 / -1">
                    <label style="display:block">
                      <span style="font-size:13px;font-weight:600;color:#374151">Description</span>
                      <textarea
                        value={description()}
                        onInput={(e) => setDescription(e.currentTarget.value)}
                        placeholder="Describe the designation role and responsibilities..."
                        rows={4}
                        style="display:block;margin-top:6px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:10px 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box;resize:vertical;font-family:inherit"
                      />
                    </label>
                  </div>
                </div>
              </div>
            </Show>

            {/* Designation Settings tab */}
            <Show when={formTab() === 'settings'}>
              <div style="padding:24px;display:flex;flex-direction:column;gap:24px">
                {/* Status */}
                <div>
                  <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 10px 0">Designation Status</p>
                  <div style="display:flex;gap:10px">
                    <button
                      type="button"
                      onClick={() => setFormStatus('ACTIVE')}
                      style={`height:36px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;${formStatus() === 'ACTIVE' ? 'border:1px solid #FF5E13;background:#FFF3EE;color:#FF5E13' : 'border:1px solid #E5E7EB;background:white;color:#6B7280'}`}
                    >
                      Active
                    </button>
                    <button
                      type="button"
                      onClick={() => setFormStatus('INACTIVE')}
                      style={`height:36px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;${formStatus() === 'INACTIVE' ? 'border:1px solid #FF5E13;background:#FFF3EE;color:#FF5E13' : 'border:1px solid #E5E7EB;background:white;color:#6B7280'}`}
                    >
                      Inactive
                    </button>
                  </div>
                </div>

                {/* Toggle: Manage Team */}
                <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between">
                  <div>
                    <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Allow Designation to Manage Team Members</p>
                    <p style="font-size:12px;color:#6B7280;margin:0">Enable this to allow team member management capabilities</p>
                  </div>
                  <Toggle on={canManageTeam()} onChange={setCanManageTeam} />
                </div>

                {/* Toggle: Approval Permissions */}
                <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between">
                  <div>
                    <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Allow Approval Permissions</p>
                    <p style="font-size:12px;color:#6B7280;margin:0">Enable this to allow approving requests and actions</p>
                  </div>
                  <Toggle on={canApprove()} onChange={setCanApprove} />
                </div>
              </div>
            </Show>

            {/* Permissions tab */}
            <Show when={formTab() === 'permissions'}>
              <div style="padding:24px">
                {/* Employee Management */}
                <p style="font-size:14px;font-weight:600;color:#111827;margin:0 0 12px 0">Employee Management</p>
                <div style="display:flex;flex-direction:column;gap:0">
                  {[
                    { label: 'View Employees', sig: permViewEmp, set: setPermViewEmp },
                    { label: 'Create Employees', sig: permCreateEmp, set: setPermCreateEmp },
                    { label: 'Edit Employees', sig: permEditEmp, set: setPermEditEmp },
                    { label: 'Delete Employees', sig: permDeleteEmp, set: setPermDeleteEmp },
                  ].map((item) => (
                    <div style="border-radius:8px;border:1px solid #E5E7EB;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between">
                      <span style="font-size:14px;color:#374151">{item.label}</span>
                      <Toggle on={item.sig()} onChange={item.set} />
                    </div>
                  ))}
                </div>

                {/* Additional Permissions */}
                <p style="font-size:14px;font-weight:600;color:#111827;margin:20px 0 12px 0">Additional Permissions</p>
                <div style="border-radius:8px;border:1px solid #E5E7EB;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between">
                  <span style="font-size:14px;color:#374151">Assign Roles</span>
                  <Toggle on={permAssignRoles()} onChange={setPermAssignRoles} />
                </div>
              </div>
            </Show>

            {/* Form footer */}
            <div style="display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #E5E7EB">
              <button
                type="button"
                onClick={() => { resetForm(); setMainTab('all'); }}
                style="height:38px;padding:0 20px;border-radius:8px;border:1px solid #E5E7EB;background:white;color:#374151;font-size:14px;cursor:pointer"
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={() => {
                  if (!name().trim()) { setFormTab('general'); return; }
                  setMainTab('all');
                  resetForm();
                }}
                style="height:38px;padding:0 20px;border-radius:8px;background:#0D0D2A;color:white;font-size:14px;font-weight:500;border:none;cursor:pointer"
              >
                Create Designation
              </button>
            </div>
          </div>
        </Show>
      </div>
    </AdminShell>
  );
}