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

const API = '/api/gateway';

type VerificationRecord = CrudRecord & {
  applicantName?: string;
  userType: 'CUSTOMER' | 'PROFESSIONAL' | 'COMPANY' | 'JOBSEEKER';
  verificationType: 'IDENTITY' | 'BUSINESS' | 'PROFILE' | 'DOCUMENT' | 'MIXED';
  submittedDate?: string;
  documentsCount?: number;
  documents?: Array<{
    name: string;
    fileName: string;
    state: 'APPROVED' | 'RECEIVED' | 'MISSING' | 'REQUESTED';
  }>;
  requestedDocuments?: string[];
  roleTags?: string[];
  primaryService?: string;
  area?: string;
  userId?: string;
  roleKey?: string;
  assignedVerifier?: string;
  priority: 'LOW' | 'MEDIUM' | 'HIGH';
  status: 'PENDING' | 'IN_REVIEW' | 'PARTIALLY_VERIFIED' | 'VERIFIED' | 'FLAGGED' | 'RE_UPLOAD_REQUESTED' | 'REJECTED';
};

function StatusBadge(props: { status: string }) {
  const getColors = () => {
    switch (props.status) {
      case 'VERIFIED': return { border: '#B7E4C7', bg: '#DEF7E8', text: '#0B8A4A', dot: '#0B8A4A' };
      case 'IN_REVIEW': return { border: '#F6D78F', bg: '#FFF3D6', text: '#B7791F', dot: '#B7791F' };
      case 'PENDING': return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
      case 'RE_UPLOAD_REQUESTED': return { border: '#FDE68A', bg: '#FEF3C7', text: '#D97706', dot: '#D97706' };
      case 'FLAGGED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
      case 'REJECTED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
      default: return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
    }
  };
  const colors = getColors();
  const label = props.status.split('_').map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(' ');

  return (
    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${colors.border};background:${colors.bg};color:${colors.text};padding:2px 10px;font-size:12px;font-weight:500`}>
      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${colors.dot};margin-right:5px;flex-shrink:0`} />
      {label}
    </span>
  );
}

function PriorityBadge(props: { priority: string }) {
  const color = props.priority === 'HIGH' ? '#DC2626' : props.priority === 'MEDIUM' ? '#F59E0B' : '#16A34A';
  return (
    <span style={`display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:${color}`}>
      <span style={`width:6px;height:6px;border-radius:50%;background:${color}`} />
      {props.priority}
    </span>
  );
}

const DEFAULT_DOCS_BY_USER_TYPE: Record<VerificationRecord['userType'], string[]> = {
  COMPANY: ['GST Certificate', 'PAN Card', 'Incorporation Certificate'],
  CUSTOMER: ['Identity Proof', 'Address Proof'],
  PROFESSIONAL: ['Identity Proof', 'Address Proof', 'Portfolio Ownership'],
  JOBSEEKER: ['Identity Proof', 'Address Proof', 'Resume'],
};

const toTitle = (value: string) => String(value || '')
  .replace(/_/g, ' ')
  .replace(/\b\w/g, (c) => c.toUpperCase());

type SubmissionData = {
  role_key?: string;
  onboarding?: {
    status?: string;
    progress_json?: Record<string, unknown>;
  } | null;
};

function extractRoleTags(source: any): string[] {
  const values: string[] = [];
  const pushValue = (value: unknown) => {
    if (!value) return;
    if (Array.isArray(value)) {
      value.forEach((v) => pushValue(v));
      return;
    }
    const text = String(value || '').trim();
    if (!text) return;
    values.push(text);
  };

  pushValue(source?.role_key);
  pushValue(source?.roleKey);
  pushValue(source?.role_keys);
  pushValue(source?.roleKeys);
  pushValue(source?.roles);
  pushValue(source?.categories);
  pushValue(source?.category);
  pushValue(source?.service_category);
  pushValue(source?.serviceCategory);
  pushValue(source?.profession);
  pushValue(source?.service_type);

  const unique = Array.from(new Set(values.map((v) => toTitle(v))));
  return unique.slice(0, 4);
}

function flattenFields(obj: Record<string, unknown>, prefix = ''): Array<{ key: string; value: string }> {
  const result: Array<{ key: string; value: string }> = [];
  for (const [k, v] of Object.entries(obj || {})) {
    const label = prefix ? `${prefix}.${k}` : k;
    if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
      result.push(...flattenFields(v as Record<string, unknown>, label));
    } else if (Array.isArray(v)) {
      result.push({ key: label, value: v.map((item) => String(item ?? '')).join(', ') });
    } else {
      result.push({ key: label, value: String(v ?? '') });
    }
  }
  return result;
}

async function loadSubmissionDetails(userId: string, roleKey: string): Promise<SubmissionData | null> {
  if (!userId) return null;
  const qs = roleKey ? `?roleKey=${encodeURIComponent(roleKey)}` : '';
  try {
    const res = await fetch(`${API}/api/admin/approvals/submission/${userId}${qs}`);
    if (!res.ok) return null;
    return res.json();
  } catch {
    return null;
  }
}

export default function VerificationManagementPage() {
  const [listTab, setListTab] = createSignal<'all' | 'view' | 'flagged'>('all');
  const [detailTab, setDetailTab] = createSignal<'overview' | 'documents' | 'checklist' | 'logs'>('overview');

  const [search, setSearch] = createSignal('');
  const [rows, setRows] = createSignal<VerificationRecord[]>([]);
  const [viewingCase, setViewingCase] = createSignal<VerificationRecord | null>(null);
  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);

  const [statusFilter, setStatusFilter] = createSignal<'all' | 'pending' | 'flagged'>('all');
  const [sortBy, setSortBy] = createSignal<'submitted_desc' | 'submitted_asc' | 'priority_desc' | 'priority_asc'>('submitted_desc');
  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
  const [requestNote, setRequestNote] = createSignal('');
  const [requestingDocs, setRequestingDocs] = createSignal<string[]>([]);
  const [error, setError] = createSignal('');
  const [loadingLinkedDetails, setLoadingLinkedDetails] = createSignal(false);
  const [actionNote, setActionNote] = createSignal('');

  const load = async () => {
    setError('');
    try {
      const accessToken = typeof sessionStorage !== 'undefined'
        ? sessionStorage.getItem('nxtgauge_admin_access_token') || ''
        : '';
      const res = await fetch(`${API}/api/admin/approvals?page=1&limit=100`, {
        headers: {
          Accept: 'application/json',
          ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
        },
        credentials: 'include',
      });
      if (!res.ok) throw new Error(`Request failed (${res.status})`);
      const payload = await res.json().catch(() => ({} as any));
      const jobs = Array.isArray(payload?.jobs) ? payload.jobs : [];
      const requirements = Array.isArray(payload?.requirements) ? payload.requirements : [];

      const buildDocuments = (userType: VerificationRecord['userType'], source: any) => {
        const names = DEFAULT_DOCS_BY_USER_TYPE[userType];
        const provided = Array.isArray(source?.documents) ? source.documents : [];
        const mapped = names.map((name, index) => {
          const fromPayload = provided[index];
          const fileName = String(
            fromPayload?.file_name
              || fromPayload?.fileName
              || fromPayload?.name
              || `${name.toLowerCase().replace(/\s+/g, '_')}.pdf`,
          );
          const stateRaw = String(fromPayload?.state || fromPayload?.status || '').toUpperCase();
          const state: 'APPROVED' | 'RECEIVED' | 'MISSING' | 'REQUESTED' =
            stateRaw === 'APPROVED' || stateRaw === 'VERIFIED'
              ? 'APPROVED'
              : stateRaw === 'REQUESTED' || stateRaw === 'RE_UPLOAD_REQUESTED'
                ? 'REQUESTED'
                : stateRaw === 'RECEIVED'
                  ? 'RECEIVED'
                  : index === names.length - 1
                    ? 'MISSING'
                    : 'APPROVED';
          return { name, fileName, state };
        });
        const requested = mapped.filter((d) => d.state === 'REQUESTED' || d.state === 'MISSING').map((d) => d.name);
        return { mapped, requested };
      };

      const jobCases: VerificationRecord[] = jobs.map((job: any) => {
        const docs = buildDocuments('COMPANY', job);
        return {
          id: `job-${String(job.id)}`,
          name: `Job Verification - ${String(job.title || 'Untitled Job')}`,
          applicantName: String(job.title || 'Untitled Job'),
          userType: 'COMPANY',
          verificationType: 'BUSINESS',
          submittedDate: String(job.created_at || ''),
          documentsCount: docs.mapped.length,
          documents: docs.mapped,
          requestedDocuments: docs.requested,
          roleTags: extractRoleTags(job),
          primaryService: String(job.category || job.department || job.role || 'Job Posting'),
          area: String(job.location || job.city || job.work_mode || '—'),
          userId: String(job.user_id || job.created_by || ''),
          roleKey: String(job.role_key || job.roleKey || ''),
          assignedVerifier: 'Unassigned',
          priority: 'HIGH',
          status: docs.requested.length ? 'RE_UPLOAD_REQUESTED' : 'IN_REVIEW',
          updatedAt: String(job.updated_at || job.created_at || ''),
        };
      });

      const requirementCases: VerificationRecord[] = requirements.map((req: any) => {
        const docs = buildDocuments('CUSTOMER', req);
        return {
          id: `requirement-${String(req.id)}`,
          name: `Requirement Verification - ${String(req.title || 'Untitled Requirement')}`,
          applicantName: String(req.title || 'Untitled Requirement'),
          userType: 'CUSTOMER',
          verificationType: 'PROFILE',
          submittedDate: String(req.created_at || ''),
          documentsCount: docs.mapped.length,
          documents: docs.mapped,
          requestedDocuments: docs.requested,
          roleTags: extractRoleTags(req),
          primaryService: String(req.category || req.profession || req.service_type || 'Requirement'),
          area: String(req.location || req.city || req.area || '—'),
          userId: String(req.user_id || req.created_by || ''),
          roleKey: String(req.role_key || req.roleKey || ''),
          assignedVerifier: 'Unassigned',
          priority: 'MEDIUM',
          status: docs.requested.length ? 'RE_UPLOAD_REQUESTED' : 'PENDING',
          updatedAt: String(req.updated_at || req.created_at || ''),
        };
      });

      setRows([...jobCases, ...requirementCases]);
    } catch (e: any) {
      setRows([]);
      setError(e?.message || 'Could not reach verification API.');
    }
  };

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

  const formatDate = (v?: string) => {
    const s = v || '';
    if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
    return s.slice(0, 10) || '—';
  };

  const filteredRows = createMemo(() => {
    let list = rows();
    const f = statusFilter();
    if (f === 'pending') list = list.filter((r) => r.status === 'PENDING' || r.status === 'IN_REVIEW');
    if (f === 'flagged') list = list.filter((r) => r.status === 'FLAGGED');

    const q = search().trim().toLowerCase();
    if (q) {
      list = list.filter((r) =>
        String(r.applicantName || '').toLowerCase().includes(q)
        || String(r.id || '').toLowerCase().includes(q)
        || String(r.verificationType || '').toLowerCase().includes(q)
      );
    }

    const sorted = [...list];
    const mode = sortBy();
    const priorityRank = (p: VerificationRecord['priority']) => (p === 'HIGH' ? 3 : p === 'MEDIUM' ? 2 : 1);
    sorted.sort((a, b) => {
      const ad = Date.parse(String(a.submittedDate || a.updatedAt || '')) || 0;
      const bd = Date.parse(String(b.submittedDate || b.updatedAt || '')) || 0;
      if (mode === 'submitted_asc') return ad - bd;
      if (mode === 'priority_desc') return priorityRank(b.priority) - priorityRank(a.priority);
      if (mode === 'priority_asc') return priorityRank(a.priority) - priorityRank(b.priority);
      return bd - ad;
    });

    return sorted;
  });

  const flaggedCount = createMemo(() => rows().filter((r) => r.status === 'FLAGGED').length);
  const reviewCount = createMemo(() => rows().filter((r) => r.status === 'PENDING' || r.status === 'IN_REVIEW').length);

  const setCaseStatus = (id: string, status: VerificationRecord['status']) => {
    const now = new Date().toISOString();
    setRows((prev) => prev.map((r) => (r.id === id ? { ...r, status, updatedAt: now } : r)));
    setViewingCase((prev) => (prev && prev.id === id ? { ...prev, status, updatedAt: now } : prev));
  };

  const markVerifiedCase = (row: VerificationRecord) => {
    const now = new Date().toISOString();
    setRows((prev) => prev.map((r) => {
      if (r.id !== row.id) return r;
      return {
        ...r,
        status: 'VERIFIED',
        requestedDocuments: [],
        documents: (r.documents || []).map((d) => (d.state === 'MISSING' || d.state === 'REQUESTED' ? { ...d, state: 'RECEIVED' } : d)),
        updatedAt: now,
      };
    }));
    setViewingCase((prev) => {
      if (!prev || prev.id !== row.id) return prev;
      return {
        ...prev,
        status: 'VERIFIED',
        requestedDocuments: [],
        documents: (prev.documents || []).map((d) => (d.state === 'MISSING' || d.state === 'REQUESTED' ? { ...d, state: 'RECEIVED' } : d)),
        updatedAt: now,
      };
    });
    setOpenMenuId(null);
  };

  const requestReuploadCase = (row: VerificationRecord, requested: string[]) => {
    const fallback = (row.documents || []).filter((d) => d.state === 'MISSING' || d.state === 'REQUESTED').map((d) => d.name);
    const nextRequested = requested.length ? requested : fallback;
    if (!nextRequested.length) return;
    const now = new Date().toISOString();
    const requestedSet = new Set(nextRequested);
    setRows((prev) => prev.map((r) => {
      if (r.id !== row.id) return r;
      return {
        ...r,
        status: 'RE_UPLOAD_REQUESTED',
        requestedDocuments: nextRequested,
        documents: (r.documents || []).map((d) => (requestedSet.has(d.name) ? { ...d, state: 'REQUESTED' } : d)),
        updatedAt: now,
      };
    }));
    setViewingCase((prev) => {
      if (!prev || prev.id !== row.id) return prev;
      return {
        ...prev,
        status: 'RE_UPLOAD_REQUESTED',
        requestedDocuments: nextRequested,
        documents: (prev.documents || []).map((d) => (requestedSet.has(d.name) ? { ...d, state: 'REQUESTED' } : d)),
        updatedAt: now,
      };
    });
    setOpenMenuId(null);
  };

  const enrichCaseFromSubmission = async (row: VerificationRecord) => {
    if (!row.userId) return;
    setLoadingLinkedDetails(true);
    try {
      const submission = await loadSubmissionDetails(row.userId || '', row.roleKey || '');
      const progress = (submission?.onboarding?.progress_json && typeof submission.onboarding.progress_json === 'object')
        ? submission.onboarding.progress_json
        : {};
      const flattened = flattenFields(progress as Record<string, unknown>);
      const getField = (...hints: string[]) => {
        const hit = flattened.find((field) => hints.some((hint) => field.key.toLowerCase().includes(hint)));
        return String(hit?.value || '').trim();
      };

      const linkedDocs = flattened
        .filter((field) => {
          const key = field.key.toLowerCase();
          const value = String(field.value || '').toLowerCase();
          const isDocLike = /(document|doc|file|upload|resume|cv|certificate|license|id|proof|portfolio)/.test(key);
          const hasPath = value.startsWith('http') || value.startsWith('/');
          return isDocLike && (hasPath || value.endsWith('.pdf') || value.endsWith('.jpg') || value.endsWith('.jpeg') || value.endsWith('.png'));
        })
        .slice(0, 8)
        .map((field) => {
          const nameParts = field.key.split('.');
          const baseName = nameParts[nameParts.length - 1] || field.key;
          const humanName = toTitle(baseName.replace(/_/g, ' ').replace(/file|upload|url/gi, '').trim() || baseName);
          const fileName = String(field.value || '').split('/').pop() || `${humanName.toLowerCase().replace(/\s+/g, '_')}.pdf`;
          const requestedSet = new Set(row.requestedDocuments || []);
          return {
            name: humanName,
            fileName,
            state: (requestedSet.has(humanName) ? 'REQUESTED' : 'RECEIVED') as 'REQUESTED' | 'RECEIVED',
          };
        });

      const nextRoleTags = Array.from(new Set([
        ...extractRoleTags(progress),
        ...extractRoleTags({ role_key: submission?.role_key }),
        ...(row.roleTags || []),
      ])).slice(0, 5);
      const nextPrimary = getField('category', 'profession', 'service', 'role', 'job_title') || row.primaryService || '—';
      const nextArea = getField('location', 'city', 'area', 'place', 'venue') || row.area || '—';
      const nextDocs = linkedDocs.length ? linkedDocs : (row.documents || []);

      setRows((prev) => prev.map((item) => {
        if (item.id !== row.id) return item;
        return {
          ...item,
          roleTags: nextRoleTags.length ? nextRoleTags : item.roleTags,
          primaryService: nextPrimary,
          area: nextArea,
          documents: nextDocs,
          documentsCount: nextDocs.length || item.documentsCount,
          roleKey: item.roleKey || String(submission?.role_key || ''),
        };
      }));
      setViewingCase((prev) => {
        if (!prev || prev.id !== row.id) return prev;
        return {
          ...prev,
          roleTags: nextRoleTags.length ? nextRoleTags : prev.roleTags,
          primaryService: nextPrimary,
          area: nextArea,
          documents: nextDocs,
          documentsCount: nextDocs.length || prev.documentsCount,
          roleKey: prev.roleKey || String(submission?.role_key || ''),
        };
      });
    } finally {
      setLoadingLinkedDetails(false);
    }
  };

  const requestDocumentsPersist = async (row: VerificationRecord, requested: string[], note: string) => {
    if (!row.userId) return false;
    const roleKey = String(row.roleKey || '').toUpperCase();
    const payload = { documents: requested, note: note || 'Please upload the missing documents.' };
    const endpoints: string[] = [];
    if (roleKey && roleKey !== 'COMPANY' && roleKey !== 'CUSTOMER') {
      endpoints.push(`${API}/api/admin/approvals/profiles/professional/${roleKey}/${row.userId}/request-documents`);
    }
    if (roleKey === 'COMPANY') endpoints.push(`${API}/api/admin/approvals/profiles/company/${row.userId}/request-documents`);
    if (roleKey === 'CUSTOMER') endpoints.push(`${API}/api/admin/approvals/profiles/customer/${row.userId}/request-documents`);
    endpoints.push(`${API}/api/admin/approvals/submission/${row.userId}/request-documents`);
    for (const endpoint of endpoints) {
      try {
        const res = await fetch(endpoint, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
          body: JSON.stringify(payload),
        });
        if (res.ok) return true;
      } catch {
        // Try the next known endpoint shape.
      }
    }
    return false;
  };

  const flagCase = (row: VerificationRecord) => {
    setCaseStatus(row.id, 'FLAGGED');
    setOpenMenuId(null);
  };

  const toggleRequestedDocument = (name: string) => {
    setRequestingDocs((prev) => (
      prev.includes(name) ? prev.filter((v) => v !== name) : [...prev, name]
    ));
  };

  const requestMissingDocuments = async (row: VerificationRecord) => {
    const selected = requestingDocs();
    if (!selected.length) return;
    const persisted = await requestDocumentsPersist(row, selected, requestNote().trim());
    requestReuploadCase(row, selected);
    setActionNote(
      persisted
        ? 'Document request sent successfully.'
        : 'Document request updated in dashboard state. API endpoint for persistence was not available.',
    );
    setRequestNote('');
  };

  const quickRequestDocuments = async (row: VerificationRecord, selected: string[]) => {
    if (!selected.length) return;
    const persisted = await requestDocumentsPersist(row, selected, '');
    requestReuploadCase(row, selected);
    setActionNote(
      persisted
        ? 'Document request sent successfully.'
        : 'Document request updated in dashboard state. API endpoint for persistence was not available.',
    );
  };

  const exportRows = () => {
    const data = filteredRows();
    const headers = ['Verification ID', 'Applicant', 'User Type', 'Verification Type', 'Documents', 'Priority', 'Status', 'Submitted Date'];
    const lines = data.map((row) => [
      row.id,
      row.applicantName || '',
      row.userType,
      row.verificationType,
      String(row.documentsCount || 0),
      row.priority,
      row.status,
      formatDate(row.submittedDate || row.updatedAt),
    ]);
    const csv = [headers, ...lines]
      .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 a = document.createElement('a');
    a.href = url;
    a.download = `verification-cases-${new Date().toISOString().slice(0, 10)}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const openView = (row: VerificationRecord) => {
    setActionNote('');
    setViewingCase(row);
    setDetailTab('overview');
    setListTab('view');
    setOpenMenuId(null);
    setRequestNote('');
    setRequestingDocs(row.requestedDocuments?.length ? row.requestedDocuments : (row.documents || []).filter((d) => d.state === 'MISSING').map((d) => d.name));
    void enrichCaseFromSubmission(row);
  };

  return (
    <AdminShell>
      <div class="w-full space-y-6 pb-8">
        
        {/* Page header */}
        <div style="margin-bottom: 1.5rem">
          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Verification Management</h1>
          <p class="mt-1 text-[14px] text-[#6B7280]">Manage user identity and business verification workflows</p>
        </div>
        <Show when={error()}>
          <div style="margin-bottom:10px;border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">
            {error()}
          </div>
        </Show>
        <Show when={actionNote()}>
          <div style="margin-bottom:10px;border-radius:10px;border:1px solid #E5E7EB;background:#F9FAFB;padding:12px 16px;font-size:13px;color:#374151">
            {actionNote()}
          </div>
        </Show>

        {/* ── LIST VIEW ── */}
        <Show when={true}>
          <div style="display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start">
            <div style="position:sticky;top:12px;border:1px solid #E5E7EB;border-radius:12px;background:white;padding:8px;display:flex;flex-direction:column;gap:6px">
              <button
                type="button"
                onClick={() => { setListTab('all'); setStatusFilter('all'); setViewingCase(null); }}
                style={`display:flex;align-items:center;justify-content:space-between;height:38px;border-radius:8px;padding:0 12px;font-size:12.5px;font-weight:500;border:none;cursor:pointer;${listTab() === 'all' ? 'background:#FFF3EE;color:#FF5E13' : 'background:white;color:#6B7280'}`}
              >
                <span>Verification Queue</span>
                <span style={`font-size:11px;font-weight:700;${listTab() === 'all' ? 'color:#FF5E13' : 'color:#9CA3AF'}`}>{rows().length}</span>
              </button>
              <button
                type="button"
                onClick={() => { setListTab('view'); }}
                style={`display:flex;align-items:center;justify-content:space-between;height:38px;border-radius:8px;padding:0 12px;font-size:12.5px;font-weight:500;border:none;cursor:pointer;${listTab() === 'view' ? 'background:#FFF3EE;color:#FF5E13' : 'background:white;color:#6B7280'}`}
              >
                <span>View Verification</span>
              </button>
              <button
                type="button"
                onClick={() => { setListTab('flagged'); setStatusFilter('flagged'); setViewingCase(null); }}
                style={`display:flex;align-items:center;justify-content:space-between;height:38px;border-radius:8px;padding:0 12px;font-size:12.5px;font-weight:500;border:none;cursor:pointer;${listTab() === 'flagged' ? 'background:#FFF3EE;color:#FF5E13' : 'background:white;color:#6B7280'}`}
              >
                <span>Flagged Cases</span>
                <span style={`font-size:11px;font-weight:700;${listTab() === 'flagged' ? 'color:#FF5E13' : 'color:#9CA3AF'}`}>{flaggedCount()}</span>
              </button>
              <div style="margin-top:4px;border-top:1px solid #F3F4F6;padding:8px 6px 2px 6px;font-size:11px;color:#9CA3AF">
                Pending Review: <span style="font-weight:700;color:#6B7280">{reviewCount()}</span>
              </div>
            </div>

            <div>

          <Show when={listTab() === 'view'}>
            <Show when={!viewingCase()}>
              <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 verification selected</p>
                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any row and choose <strong>View Verification</strong>.</p>
              </div>
            </Show>
            <Show when={viewingCase()}>
              <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>
                    <div style="display:flex;align-items:center;gap:12px">
                      <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingCase()!.applicantName}</h2>
                      <StatusBadge status={viewingCase()!.status} />
                      <PriorityBadge priority={viewingCase()!.priority} />
                    </div>
                    <p style="margin-top:2px;font-size:13px;color:#6B7280">ID: {viewingCase()!.id} • {viewingCase()!.verificationType} • Submitted: {formatDate(viewingCase()!.submittedDate)}</p>
                  </div>
                  <div style="display:flex;gap:10px">
                    <button type="button" onClick={() => markVerifiedCase(viewingCase()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Mark Verified</button>
                    <button
                      type="button"
                      disabled={!requestingDocs().length}
                      onClick={() => requestMissingDocuments(viewingCase()!)}
                      style={`height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:${requestingDocs().length ? 'pointer' : 'not-allowed'};opacity:${requestingDocs().length ? 1 : 0.55}`}
                    >
                      Request Documents
                    </button>
                  </div>
                </div>

                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
                  {(['overview', 'documents', 'checklist', 'logs'] as const).map((tab, i) => {
                    const labels = ['Overview', 'Documents', 'Checklist', '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() === 'overview'}>
                    <div style="display:grid;grid-template-columns:2fr 1fr;gap:24px">
                      <div style="display:flex;flex-direction:column;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">Case Summary</h3>
                          <Show when={loadingLinkedDetails()}>
                            <p style="margin:0 0 12px;font-size:12px;color:#6B7280">Syncing linked submission details...</p>
                          </Show>
                          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
                            <div><p style="font-size:11px;color:#9CA3AF">Applicant Name</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.applicantName}</p></div>
                            <div><p style="font-size:11px;color:#9CA3AF">User Type</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.userType}</p></div>
                            <div><p style="font-size:11px;color:#9CA3AF">Primary Service</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.primaryService || '—'}</p></div>
                            <div><p style="font-size:11px;color:#9CA3AF">Area / Place</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.area || '—'}</p></div>
                            <div><p style="font-size:11px;color:#9CA3AF">Assigned Verifier</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.assignedVerifier}</p></div>
                            <div><p style="font-size:11px;color:#9CA3AF">Documents</p><p style="font-size:14px;font-weight:600;color:#111827">{Number(viewingCase()!.documentsCount || 0)}</p></div>
                          </div>
                          <Show when={viewingCase()!.roleTags?.length}>
                            <div style="margin-top:12px">
                              <p style="margin:0 0 8px;font-size:11px;color:#9CA3AF">Registered Roles / Services</p>
                              <div style="display:flex;flex-wrap:wrap;gap:6px">
                                <For each={viewingCase()!.roleTags || []}>
                                  {(tag) => (
                                    <span style="height:24px;padding:0 10px;border-radius:999px;border:1px solid #E5E7EB;background:#F9FAFB;display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#374151">{tag}</span>
                                  )}
                                </For>
                              </div>
                            </div>
                          </Show>
                        </div>
                        <div style="border:1px solid #FFE2D3;border-radius:12px;padding:20px;background:#FFF8F4">
                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:12px">Request Missing Documents</h3>
                          <p style="margin:0 0 10px;font-size:12px;color:#6B7280">Select missing documents and send one clear request to the user.</p>
                          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
                            <For each={viewingCase()!.documents || []}>
                              {(doc) => (
                                <label style="display:flex;align-items:center;gap:8px;border:1px solid #E5E7EB;background:white;border-radius:10px;padding:8px 10px;cursor:pointer">
                                  <input type="checkbox" checked={requestingDocs().includes(doc.name)} onChange={() => toggleRequestedDocument(doc.name)} style="width:14px;height:14px;accent-color:#FF5E13" />
                                  <span style="font-size:12px;color:#111827;font-weight:600">{doc.name}</span>
                                </label>
                              )}
                            </For>
                          </div>
                          <textarea
                            value={requestNote()}
                            onInput={(e) => setRequestNote(e.currentTarget.value)}
                            placeholder="Optional note for user (e.g. upload clear PDF/JPG, full document visible)..."
                            style="margin-top:10px;width:100%;height:72px;border-radius:8px;border:1px solid #E5E7EB;padding:10px;font-size:12px;resize:none"
                          />
                          <div style="margin-top:10px;display:flex;justify-content:flex-end">
                            <button
                              type="button"
                              onClick={() => requestMissingDocuments(viewingCase()!)}
                              disabled={!requestingDocs().length}
                              style={`height:34px;border-radius:8px;border:none;background:#0D0D2A;color:white;padding:0 14px;font-size:12px;font-weight:700;cursor:${requestingDocs().length ? 'pointer' : 'not-allowed'};opacity:${requestingDocs().length ? 1 : 0.55}`}
                            >
                              Send Document Request
                            </button>
                          </div>
                        </div>
                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Verification Tracker</h3>
                          <div style="display:flex;justify-content:space-between;align-items:center;position:relative">
                            <div style="position:absolute;top:10px;left:0;right:0;height:2px;background:#E5E7EB;z-index:1" />
                            <div style="position:absolute;top:10px;left:0;width:50%;height:2px;background:#FF5E13;z-index:2" />
                            {[
                              { l: 'Submitted', active: true },
                              { l: 'In Review', active: true },
                              { l: 'Verified', active: false },
                            ].map((step) => (
                              <div style="position:relative;z-index:3;text-align:center">
                                <div style={`width:20px;height:20px;border-radius:50%;background:${step.active ? '#FF5E13' : 'white'};border:2px solid ${step.active ? '#FF5E13' : '#E5E7EB'};margin:0 auto`} />
                                <p style="font-size:11px;margin-top:4px;color:#111827;font-weight:600">{step.l}</p>
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                      <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px;background:#F9FAFB">
                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Notes</h3>
                        <textarea placeholder="Add internal note..." style="width:100%;height:100px;border-radius:8px;border:1px solid #E5E7EB;padding:10px;font-size:13px;resize:none;margin-bottom:12px" />
                        <button type="button" style="width:100%;height:34px;background:#0D0D2A;color:white;border-radius:8px;font-size:12px;font-weight:600;border:none">Add Note</button>
                      </div>
                    </div>
                  </Show>

                  <Show when={detailTab() === 'documents'}>
                    <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">Document Name</th>
                            <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Status</th>
                            <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          <For each={viewingCase()!.documents || []}>
                            {(doc) => (
                              <tr style="border-top:1px solid #E5E7EB">
                                <td style="padding:12px 16px">
                                  <p style="margin:0;font-size:13px;font-weight:600;color:#111827">{doc.name}</p>
                                  <p style="margin:2px 0 0;font-size:11px;color:#6B7280">{doc.fileName}</p>
                                </td>
                                <td style="padding:12px 16px"><StatusBadge status={doc.state === 'APPROVED' ? 'VERIFIED' : doc.state === 'REQUESTED' ? 'RE_UPLOAD_REQUESTED' : doc.state === 'MISSING' ? 'PENDING' : 'IN_REVIEW'} /></td>
                                <td style="padding:12px 16px;display:flex;gap:8px">
                                  <button type="button" style="font-size:12px;color:#FF5E13;background:none;border:none;cursor:pointer;font-weight:600">Preview</button>
                                  <Show when={doc.state === 'MISSING' || doc.state === 'REQUESTED'}>
                                    <button type="button" onClick={() => toggleRequestedDocument(doc.name)} style="font-size:12px;color:#0D0D2A;background:none;border:none;cursor:pointer;font-weight:600">
                                      {requestingDocs().includes(doc.name) ? 'Unselect' : 'Request'}
                                    </button>
                                  </Show>
                                </td>
                              </tr>
                            )}
                          </For>
                        </tbody>
                      </table>
                    </div>
                  </Show>

                  <Show when={detailTab() === 'checklist'}>
                    <div style="display:flex;flex-direction:column;gap:12px">
                      {[
                        'Identity matches provided documents',
                        'Address proof is valid and recent',
                        'Business registration is authentic',
                        'Contact information is verified',
                      ].map((item) => (
                        <label style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #E5E7EB;border-radius:10px;cursor:pointer">
                          <input type="checkbox" style="width:16px;height:16px;accent-color:#FF5E13" />
                          <span style="font-size:13px;color:#111827;font-weight:500">{item}</span>
                        </label>
                      ))}
                    </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">Case Review Started</p>
                          <p style="font-size:12px;color:#6B7280">Verifier started reviewing documents • 2 hours ago</p>
                        </div>
                      </div>
                      <div style="display:flex;gap:12px">
                        <div style="width:8px;height:8px;border-radius:50%;background:#E5E7EB;margin-top:4px" />
                        <div>
                          <p style="font-size:13px;font-weight:600;color:#111827">Verification Request Submitted</p>
                          <p style="font-size:12px;color:#6B7280">System received applicant data • 1 day ago</p>
                        </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" onClick={() => { setViewingCase(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 verifications..."
                  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:220px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
                      {(['submitted_desc', 'submitted_asc', 'priority_desc', 'priority_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'}`}>
                          {['Submitted (Newest)', 'Submitted (Oldest)', 'Priority (High-Low)', 'Priority (Low-High)'][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:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
                      {(['all', 'pending', 'flagged'] 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 Cases' : s === 'pending' ? 'Pending Review' : 'Flagged'}
                        </button>
                      ))}
                    </div>
                  </Show>
                </div>
                <button type="button" onClick={exportRows} 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">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                  Export
                </button>
              </div>

              <div class="overflow-x-auto">
                <table class="min-w-full">
                  <thead>
                    <tr style="background:#0D0D2A;text-align:left">
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Verification ID</th>
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Applicant</th>
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Type</th>
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Docs</th>
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Priority</th>
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">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">Submitted</th>
                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Actions</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:12px;font-family:monospace;color:#6B7280">{row.id}</td>
                          <td style="padding:12px 20px">
                            <p style="font-size:14px;font-weight:600;color:#111827">{row.applicantName}</p>
                            <p style="font-size:11px;color:#6B7280">{row.userType}{row.area ? ` • ${row.area}` : ''}</p>
                            <Show when={row.roleTags?.length}>
                              <p style="margin-top:2px;font-size:11px;color:#9CA3AF">{(row.roleTags || []).join(', ')}</p>
                            </Show>
                          </td>
                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.verificationType}</td>
                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{Number(row.documentsCount || 0)} docs</td>
                          <td style="padding:12px 20px"><PriorityBadge priority={row.priority} /></td>
                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{formatDate(row.submittedDate || row.updatedAt)}</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:190px;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={() => openView(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 Verification</button>
                                <button type="button" onClick={() => void quickRequestDocuments(row, (row.documents || []).filter((d) => d.state === 'MISSING' || d.state === 'REQUESTED').map((d) => d.name))} 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">Request Documents</button>
                                <button type="button" onClick={() => markVerifiedCase(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">Mark Verified</button>
                                <button type="button" onClick={() => flagCase(row)} 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">Flag Case</button>
                              </div>
                            </Show>
                          </td>
                        </tr>
                      )}
                    </For>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          </div>
          </div>
        </Show>

      </div>
    </AdminShell>
  );
}