nxtgauge-admin-solid/src/routes/admin/designation.tsx

import { A } from '@solidjs/router';
import { createResource, createSignal, createMemo, Show, For } from 'solid-js';
import AdminShell from '~/components/AdminShell';

const API = '/api/gateway';

type Department = {
  id: string;
  name?: string;
  departmentName?: string;
};

type Designation = {
  id: string;
  name: string;
  departmentId?: string;
  departmentName?: string;
  department?: string;
  description?: string;
  is_archived?: boolean;
  status?: string;
};

async function loadDesignations(): Promise<Designation[]> {
  try {
    const res = await fetch(`${API}/api/admin/designations`);
    if (!res.ok) throw new Error('Failed to load');
    const data = await res.json();
    return Array.isArray(data) ? data : (data.designations ?? []);
  } catch {
    return [];
  }
}

async function loadDepartments(): Promise<Department[]> {
  try {
    const res = await fetch(`${API}/api/admin/departments`);
    if (!res.ok) throw new Error('Failed to load');
    const data = await res.json();
    return Array.isArray(data) ? data : (data.departments ?? []);
  } catch {
    return [];
  }
}

function deptDisplay(item: Designation): string {
  return item.departmentName || item.department || '—';
}

function deptName(d: Department): string {
  return d.departmentName || d.name || d.id;
}

function isArchived(item: Designation): boolean {
  if (item.is_archived !== undefined) return item.is_archived;
  if (item.status !== undefined) {
    const s = String(item.status).toUpperCase();
    return s === 'ARCHIVED' || s === '2';
  }
  return false;
}

export default function DesignationPage() {
  const [designations, { refetch }] = createResource(loadDesignations);
  const [departments] = createResource(loadDepartments);

  // tabs
  const [tab, setTab] = createSignal<'active' | 'archived'>('active');

  // create form
  const [showCreate, setShowCreate] = createSignal(false);
  const [createName, setCreateName] = createSignal('');
  const [createDeptId, setCreateDeptId] = createSignal('');
  const [createDesc, setCreateDesc] = createSignal('');
  const [creating, setCreating] = createSignal(false);
  const [createError, setCreateError] = createSignal('');

  // inline edit
  const [editingId, setEditingId] = createSignal('');
  const [editName, setEditName] = createSignal('');
  const [editDeptId, setEditDeptId] = createSignal('');
  const [editDesc, setEditDesc] = createSignal('');
  const [saving, setSaving] = createSignal(false);
  const [editError, setEditError] = createSignal('');

  // row busy / errors
  const [deleting, setDeleting] = createSignal('');
  const [actionError, setActionError] = createSignal('');

  const filtered = createMemo(() => {
    const all = designations() ?? [];
    return tab() === 'archived'
      ? all.filter((d) => isArchived(d))
      : all.filter((d) => !isArchived(d));
  });

  // ---------- CREATE ----------
  const handleCreate = async (e: Event) => {
    e.preventDefault();
    if (!createName().trim() || !createDeptId()) return;
    setCreating(true);
    setCreateError('');
    try {
      const res = await fetch(`${API}/api/admin/designations`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: createName().trim(),
          department_id: createDeptId(),
          description: createDesc().trim(),
        }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error((err as any).message || 'Failed to create');
      }
      setCreateName('');
      setCreateDeptId('');
      setCreateDesc('');
      setShowCreate(false);
      setTab('active');
      refetch();
    } catch (err: any) {
      setCreateError(err.message || 'Failed to create designation');
    } finally {
      setCreating(false);
    }
  };

  // ---------- INLINE EDIT ----------
  const startEdit = (item: Designation) => {
    setEditingId(item.id);
    setEditName(item.name);
    setEditDeptId(item.departmentId ?? '');
    setEditDesc(item.description ?? '');
    setEditError('');
  };

  const cancelEdit = () => {
    setEditingId('');
    setEditError('');
  };

  const handleUpdate = async (id: string) => {
    if (!editName().trim()) return;
    setSaving(true);
    setEditError('');
    try {
      const res = await fetch(`${API}/api/admin/designations/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: editName().trim(),
          department_id: editDeptId(),
          description: editDesc().trim(),
        }),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        throw new Error((err as any).message || 'Failed to update');
      }
      setEditingId('');
      refetch();
    } catch (err: any) {
      setEditError(err.message || 'Failed to update designation');
    } finally {
      setSaving(false);
    }
  };

  // ---------- DELETE ----------
  const handleDelete = async (id: string, name: string) => {
    if (!confirm(`Delete designation "${name}"?`)) return;
    setDeleting(id);
    setActionError('');
    try {
      const res = await fetch(`${API}/api/admin/designations/${id}`, {
        method: 'DELETE',
      });
      if (!res.ok) throw new Error('Failed to delete');
      refetch();
    } catch (err: any) {
      setActionError(err.message || 'Failed to delete designation');
    } finally {
      setDeleting('');
    }
  };

  return (
    <AdminShell>
      {/* Header */}
      <div class="mb-6 flex items-start justify-between gap-4">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">Designations</h1>
          <p class="mt-1 text-sm text-gray-500">Manage job designations</p>
        </div>
        <button
          class="inline-flex items-center rounded-lg bg-[#fd6216] px-4 py-2 text-sm font-semibold text-white hover:bg-orange-600 transition-colors"
          onClick={() => {
            setShowCreate((v) => !v);
            setCreateError('');
            // Pre-select first department when opening
            const depts = departments() ?? [];
            if (!createDeptId() && depts.length > 0) setCreateDeptId(depts[0].id);
          }}
        >
          {showCreate() ? 'Cancel' : 'Add Designation'}
        </button>
      </div>

      {/* Create form */}
      <Show when={showCreate()}>
        <section class="rounded-xl border border-gray-200 bg-white shadow-sm mb-6 rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
          <form onSubmit={handleCreate}>
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div class="field">
                <label>Name *</label>
                <input
                  type="text"
                  required
                  placeholder="e.g. Senior Engineer"
                  value={createName()}
                  onInput={(e) => setCreateName(e.currentTarget.value)}
                />
              </div>
              <div class="field">
                <label>Department *</label>
                <select
                  required
                  value={createDeptId()}
                  onChange={(e) => setCreateDeptId(e.currentTarget.value)}
                >
                  <option value="">Select a department...</option>
                  <Show when={departments.loading}>
                    <option disabled>Loading departments...</option>
                  </Show>
                  <For each={departments() ?? []}>
                    {(d) => <option value={d.id}>{deptName(d)}</option>}
                  </For>
                </select>
              </div>
              <div class="field" style="grid-column:1/-1">
                <label>Description</label>
                <textarea
                  placeholder="Optional description"
                  rows="3"
                  value={createDesc()}
                  onInput={(e) => setCreateDesc(e.currentTarget.value)}
                />
              </div>
            </div>
            <Show when={createError()}>
              <p class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-top:10px">{createError()}</p>
            </Show>
            <div class="actions" style="margin-top:16px">
              <button
                type="button"
                class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
                onClick={() => {
                  setShowCreate(false);
                  setCreateError('');
                }}
              >
                Cancel
              </button>
              <button
                type="submit"
                class="inline-flex items-center rounded-lg bg-[#fd6216] px-4 py-2 text-sm font-semibold text-white hover:bg-orange-600 transition-colors"
                disabled={creating() || (departments() ?? []).length === 0}
              >
                {creating() ? 'Saving...' : 'Save'}
              </button>
            </div>
          </form>
        </section>
      </Show>

      {/* Tabs */}
      <div style="display:flex;gap:24px;border-bottom:1px solid #e2e8f0;margin-bottom:16px">
        <button
          class={`admin-tab${tab() === 'active' ? ' active' : ''}`}
          onClick={() => setTab('active')}
        >
          Active
        </button>
        <button
          class={`admin-tab${tab() === 'archived' ? ' active' : ''}`}
          onClick={() => setTab('archived')}
        >
          Archived
        </button>
      </div>

      {/* Action error */}
      <Show when={actionError()}>
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-bottom:12px">{actionError()}</div>
      </Show>

      {/* Table */}
      <section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding:0;overflow:hidden">
        <div class="overflow-x-auto">
          <table class="w-full text-sm">
            <thead>
              <tr>
                <th>Name</th>
                <th>Department</th>
                <th>Description</th>
                <th class="text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              <Show when={designations.loading}>
                <tr>
                  <td colspan="4" style="text-align:center;padding:32px;color:#64748b">
                    Loading...
                  </td>
                </tr>
              </Show>
              <Show when={!designations.loading && designations.error}>
                <tr>
                  <td colspan="4" style="text-align:center;padding:32px;color:#b91c1c">
                    Failed to load. Is the backend running?
                  </td>
                </tr>
              </Show>
              <Show when={!designations.loading && !designations.error && filtered().length === 0}>
                <tr>
                  <td colspan="4" style="text-align:center;padding:32px;color:#94a3b8">
                    No designations found.
                  </td>
                </tr>
              </Show>
              <Show when={!designations.loading && !designations.error && filtered().length > 0}>
                <For each={filtered()}>
                  {(item) => (
                    <>
                      <tr>
                        <td style="font-weight:600;color:#0f172a">{item.name}</td>
                        <td style="color:#475569">{deptDisplay(item)}</td>
                        <td style="color:#475569">{item.description || '—'}</td>
                        <td>
                          <div class="flex items-center justify-end gap-1">
                            <button
                              class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
                              onClick={() => startEdit(item)}
                            >
                              Edit
                            </button>
                            <button
                              class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors"
                              disabled={deleting() === item.id}
                              onClick={() => handleDelete(item.id, item.name)}
                            >
                              {deleting() === item.id ? '...' : 'Delete'}
                            </button>
                          </div>
                        </td>
                      </tr>
                      {/* Inline edit row */}
                      <Show when={editingId() === item.id}>
                        <tr>
                          <td colspan="4" style="background:#f8fafc;padding:16px">
                            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2" style="margin-bottom:10px">
                              <div class="field">
                                <label>Name *</label>
                                <input
                                  type="text"
                                  required
                                  value={editName()}
                                  onInput={(e) => setEditName(e.currentTarget.value)}
                                />
                              </div>
                              <div class="field">
                                <label>Department</label>
                                <select
                                  value={editDeptId()}
                                  onChange={(e) => setEditDeptId(e.currentTarget.value)}
                                >
                                  <option value="">Select a department...</option>
                                  <For each={departments() ?? []}>
                                    {(d) => (
                                      <option value={d.id}>{deptName(d)}</option>
                                    )}
                                  </For>
                                </select>
                              </div>
                              <div class="field" style="grid-column:1/-1">
                                <label>Description</label>
                                <textarea
                                  rows="3"
                                  value={editDesc()}
                                  onInput={(e) => setEditDesc(e.currentTarget.value)}
                                />
                              </div>
                            </div>
                            <Show when={editError()}>
                              <p class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700" style="margin-bottom:8px">{editError()}</p>
                            </Show>
                            <div class="actions">
                              <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" type="button" onClick={cancelEdit}>
                                Cancel
                              </button>
                              <button
                                class="inline-flex items-center rounded-lg bg-[#fd6216] px-4 py-2 text-sm font-semibold text-white hover:bg-orange-600 transition-colors"
                                type="button"
                                disabled={saving()}
                                onClick={() => handleUpdate(item.id)}
                              >
                                {saving() ? 'Saving...' : 'Save'}
                              </button>
                            </div>
                          </td>
                        </tr>
                      </Show>
                    </>
                  )}
                </For>
              </Show>
            </tbody>
          </table>
        </div>
      </section>
    </AdminShell>
  );
}