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

import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
import type { CrudRecord } from '~/lib/admin/types';

const API = '/api/gateway';

type CandidateRecord = CrudRecord & {
  email: string;
  phone?: string;
  location?: string;
  experience?: string;
  skills?: string[];
  status: 'ACTIVE' | 'INACTIVE' | 'PENDING';
  registeredDate?: string;
};

function StatusBadge(props: { status: string }) {
  const active = () => props.status === 'ACTIVE';
  const pending = () => props.status === 'PENDING';
  return (
    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : pending() ? '#F6D78F' : '#D1D5DB'};background:${active() ? '#FFF1EB' : pending() ? '#FFF3D6' : '#F3F4F6'};color:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#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' : pending() ? '#B7791F' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
      {props.status.charAt(0) + props.status.slice(1).toLowerCase()}
    </span>
  );
}

export default function CandidateManagementPage() {
  const [view, setView] = createSignal<'list' | 'detail'>('list');
  const [listTab, setListTab] = createSignal<'all' | 'active' | 'pending' | 'view'>('all');
  const [detailTab, setDetailTab] = createSignal<'overview' | 'experience' | 'skills'>('overview');
  
  const [search, setSearch] = createSignal('');
  const [statusFilter, setStatusFilter] = createSignal('all');
  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'registered_desc' | 'registered_asc'>('name_asc');
  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
  const [rows, setRows] = createSignal<CandidateRecord[]>([]);
  const [selectedCandidate, setSelectedCandidate] = createSignal<CandidateRecord | null>(null);
  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);

  const load = async () => {
    try {
      const res = await fetch(`${API}/api/admin/users?role=JOB_SEEKER`);
      if (!res.ok) throw new Error('Fetch failed');
      const data = await res.json();
      const list = (Array.isArray(data) ? data : []).map((u: any) => ({
        id: u.id,
        name: u.full_name || u.email.split('@')[0],
        email: u.email,
        status: (u.status || 'ACTIVE').toUpperCase(),
        registeredDate: u.created_at ? new Date(u.created_at).toLocaleDateString() : '—',
        updatedAt: u.updated_at || u.created_at || '—',
        location: 'Not Specified',
        experience: 'Not Specified'
      } as CandidateRecord));
      setRows(list);
    } catch (e) {
      console.error('Candidate load error:', e);
      setRows([]);
    }
  };

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

  const filteredRows = createMemo(() => {
    let r = rows();
    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
    const q = search().toLowerCase();
    if (q) {
      r = r.filter(it => it.name.toLowerCase().includes(q) || it.email.toLowerCase().includes(q));
    }
    const sorted = [...r];
    const mode = sortBy();
    sorted.sort((a, b) => {
      if (mode === 'name_desc') return b.name.localeCompare(a.name);
      if (mode === 'registered_desc') return (b.registeredDate || '').localeCompare(a.registeredDate || '');
      if (mode === 'registered_asc') return (a.registeredDate || '').localeCompare(b.registeredDate || '');
      return a.name.localeCompare(b.name);
    });
    return sorted;
  });

  const exportCsv = () => {
    const headers = ['Candidate Name', 'Email', 'Location', 'Registered', 'Status'];
    const body = filteredRows().map((row) => [
      row.name || '',
      row.email || '',
      row.location || '',
      row.registeredDate || '',
      row.status || '',
    ]);
    const csv = [headers, ...body]
      .map((line) => line.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
      .join('\n');

    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'candidates.csv';
    link.click();
    URL.revokeObjectURL(url);
  };

  const openDetail = (row: CandidateRecord) => { setSelectedCandidate(row); setListTab('view'); setOpenMenuId(null); };

  return (
      <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]">Candidate Management</h1>
          <p class="mt-1 text-[14px] text-[#6B7280]">Manage and monitor all job seeker accounts on the platform</p>
        </div>

        {/* ── LIST VIEW ── */}
        <div>
          {/* Tabs */}
          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
            {([
              { key: 'all', label: 'All Candidates', action: () => { setListTab('all'); setStatusFilter('all'); } },
              { key: 'active', label: 'Active', action: () => { setListTab('active'); setStatusFilter('active'); } },
              { key: 'pending', label: 'Pending', action: () => { setListTab('pending'); setStatusFilter('pending'); } },
              { key: 'view', label: 'View Profile', 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>

          {/* View Profile panel */}
          <Show when={listTab() === 'view'}>
            <Show
              when={!selectedCandidate()}
            >
              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
                <p style="font-size:15px;font-weight:600;color:#111827">No candidate selected</p>
                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any candidate row and choose <strong>View Profile</strong>.</p>
              </div>
            </Show>
            <Show when={selectedCandidate()}>
              <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:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
                  <div>
                    <h2 style="font-size:18px;font-weight:700;color:#111827">{selectedCandidate()!.name}</h2>
                    <p style="margin-top:2px;font-size:13px;color:#6B7280">{selectedCandidate()!.email} • Joined {selectedCandidate()!.registeredDate}</p>
                  </div>
                  <StatusBadge status={selectedCandidate()!.status} />
                </div>
                
                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
                  {(['overview', 'experience', 'skills'] as const).map((tab, i) => {
                    const labels = ['Overview', 'Work Experience', 'Skills & Education'];
                    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() === 'overview'}>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
                      <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Candidate Info</h3>
                        <div style="display:flex;flex-direction:column;gap:12px">
                          {[
                            { l: 'Location', v: selectedCandidate()!.location || '—' },
                            { l: 'Experience', v: selectedCandidate()!.experience || '—' },
                            { l: 'Phone', v: selectedCandidate()!.phone || '—' },
                            { l: 'Last Active', v: selectedCandidate()!.updatedAt || '—' },
                          ].map(item => (
                            <div style="display:flex;justify-content:space-between">
                              <span style="font-size:13px;color:#6B7280">{item.l}</span>
                              <span style="font-size:13px;font-weight:600;color:#111827">{item.v}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </Show>
                </div>

                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
                  <button type="button" style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Profile</button>
                  <button type="button" onClick={() => { setSelectedCandidate(null); 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>
          </Show>

          <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
            <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 candidates..."
                  style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
                />
                <div style="position:relative">
                  <button
                    type="button"
                    onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
                    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"
                  >
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
                    Sort
                  </button>
                  <Show when={sortMenuOpen()}>
                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
                      {(['name_asc', 'name_desc', 'registered_desc', 'registered_asc'] as const).map((s, i) => (
                        <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
                          {['Name (A-Z)', 'Name (Z-A)', 'Joined (Newest)', 'Joined (Oldest)'][i]}
                        </button>
                      ))}
                    </div>
                  </Show>
                </div>
                <div style="position:relative">
                  <button
                    type="button"
                    onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
                    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"
                  >
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
                    Filters
                  </button>
                  <Show when={filterMenuOpen()}>
                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
                      {(['all', 'active', 'pending', 'inactive'] as const).map((s) => (
                        <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
                          {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'pending' ? 'Pending' : 'Inactive'}
                        </button>
                      ))}
                    </div>
                  </Show>
                </div>
                <button
                  type="button"
                  onClick={exportCsv}
                  style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #D1D5DB;background:#fff;padding:0 12px;font-size:12px;font-weight:600;color:#0f172a;cursor:pointer"
                >
                  Export
                </button>
              </div>

              <div class="overflow-x-auto">
                <table class="min-w-full">
                  <thead>
                    <tr style="background:#0D0D2A;text-align:left">
                      {['Candidate Name', 'Email', 'Location', 'Registered', '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:13px;color:#6B7280">{row.email}</td>
                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.location || '—'}</td>
                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.registeredDate}</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 Profile</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">Deactivate</button>
                              </div>
                            </Show>
                          </td>
                        </tr>
                      )}
                    </For>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
  );
}