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

type VerificationStatus = 'PENDING' | 'UNDER_REVIEW' | 'DOCUMENTS_REQUESTED' | 'REVISION_REQUESTED' | 'APPROVED' | 'REJECTED';
type VerificationPriority = 'HIGH' | 'MEDIUM' | 'LOW';

type VerificationRow = {
  id: string;
  applicantName: string;
  requestType:
  | 'Profile Approval'
  | 'Portfolio Approval'
  | 'Company Approval'
  | 'Job Seeker Approval'
  | 'Service Seeker Profile Approval'
  | 'Service Seeker Requirement'
  | 'Job Approval';
  roleLabel: string;
  submittedOn: string;
  status: VerificationStatus;
  priority: VerificationPriority;
  userType: 'PROFESSIONAL' | 'COMPANY' | 'JOBSEEKER' | 'CUSTOMER';
  area: string;
  userId: string;
  roleKey: string;
  payload?: any;
};

type SubmittedDocument = {
  id: string;
  title: string;
  type: 'IMAGE' | 'PDF';
  url: string;
  status: 'SUBMITTED' | 'MISSING' | 'INVALID';
};

type PortfolioAsset = {
  id: string;
  title: string;
  url: string;
};

type ApprovalQueueItem = {
  id: string;
  requestType: VerificationRow['requestType'];
  applicantName: string;
  roleLabel: string;
  userType: VerificationRow['userType'];
  roleKey: string;
  area: string;
  submittedOn: string;
  documents: SubmittedDocument[];
  submittedFields: Array<{ label: string; value: string }>;
};

const ROLE_PROFILE_FIELDS: Record<string, string[]> = {
  CUSTOMER: ['First Name', 'Last Name', 'Email Address', 'Mobile Number', 'Area', 'Place', 'PIN Code', 'Service Category'],
  COMPANY: ['Company Name', 'Company Email', 'Company Phone', 'City', 'Area', 'Place', 'PIN Code', 'Website URL'],
  JOB_SEEKER: ['First Name', 'Last Name', 'Email Address', 'Mobile Number', 'Current Role', 'Total Experience', 'City', 'Area', 'Place'],
  PROFESSIONAL: ['First Name', 'Last Name', 'Email Address', 'Mobile Number', 'Gender', 'Address Line 1', 'Address Line 2 (Optional)', 'City', 'Area', 'State', 'PIN Code'],
};

const ROLE_DOCUMENTS: Record<string, string[]> = {
  CUSTOMER: ['Identity Proof', 'Address Proof'],
  COMPANY: ['GST Certificate', 'PAN Card', 'Incorporation Certificate'],
  JOB_SEEKER: ['Identity Proof', 'Address Proof', 'Education Proof'],
  PHOTOGRAPHER: ['Identity Proof', 'Address Proof', 'Portfolio Ownership Proof'],
  MAKEUP_ARTIST: ['Identity Proof', 'Address Proof', 'Professional Certifications'],
  DEVELOPER: ['Identity Proof', 'Address Proof', 'Tax Document'],
  VIDEO_EDITOR: ['Identity Proof', 'Address Proof', 'Tax Document'],
  UGC_CONTENT_CREATOR: ['Identity Proof', 'Address Proof', 'Tax Document'],
  GRAPHIC_DESIGNER: ['Identity Proof', 'Address Proof', 'Tax Document'],
  SOCIAL_MEDIA_MANAGER: ['Identity Proof', 'Address Proof', 'Tax Document'],
  FITNESS_TRAINER: ['Identity Proof', 'Address Proof', 'Certification Proof'],
  TUTOR: ['Identity Proof', 'Address Proof', 'Educational Proof'],
  CATERING_SERVICES: ['Identity Proof', 'Address Proof', 'Food License'],
  PROFESSIONAL: ['Identity Proof', 'Address Proof', 'Tax Document'],
};

const REQUIREMENT_ROLE_FIELDS: Record<string, string[]> = {
  PHOTOGRAPHER: ['Event Type', 'Shoot Type', 'Event Date & Time', 'Event Duration (Hours)', 'Venue / Location', 'Number of People', 'Delivery Deadline'],
  MAKEUP_ARTIST: ['Event Type', 'Makeup Category', 'Event Date & Time', 'Artists Required', 'Venue / Location', 'Skin Tone Preference', 'Ready By Time'],
  TUTOR: ['Subject', 'Class / Grade', 'Mode (Online / Offline)', 'Sessions Per Week', 'Preferred Start Date', 'Student Location', 'Exam Goal'],
  DEVELOPER: ['Project Type', 'Platform', 'Preferred Stack', 'Project Duration', 'Launch Deadline', 'Team Size Needed', 'Support Duration'],
  VIDEO_EDITOR: ['Video Category', 'Final Duration', 'Footage Volume', 'Delivery Date', 'Editing Style', 'Platform', 'Revision Rounds'],
  UGC_CONTENT_CREATOR: ['Campaign Goal', 'Platform', 'Deliverables Needed', 'Brand Category', 'Delivery Deadline', 'Target Audience', 'Usage Rights Duration'],
  FITNESS_TRAINER: ['Primary Goal', 'Current Activity Level', 'Preferred Mode', 'Training Days Per Week', 'Preferred Timings', 'Health Conditions', 'Goal Timeline'],
  CATERING_SERVICES: ['Event Type', 'Cuisine Preference', 'Guest Count', 'Service Date', 'Venue / Location', 'Meal Slot', 'Serving Style'],
  GRAPHIC_DESIGNER: ['Project Type', 'Brand Industry', 'Deliverables Needed', 'Deadline', 'Target Audience', 'Reference Links', 'Output Formats'],
  SOCIAL_MEDIA_MANAGER: ['Primary Goal', 'Platforms', 'Posting Frequency', 'Campaign Duration', 'Start Date', 'Brand Category', 'Monthly Budget'],
};

const JOB_POSTING_FIELDS = [
  'Job Title',
  'Department',
  'Job Category',
  'Employment Type',
  'Seniority',
  'Openings',
  'Role & Requirements',
  'Compensation',
  'Location',
  'Description',
];

const APPROVAL_QUEUE_STORAGE_KEY = 'nxtgauge_admin_approval_queue';

const API = '/api/gateway';

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

const statusUi = (status: VerificationStatus) => {
  if (status === 'APPROVED') return { bg: '#ECFDF3', border: '#BBF7D0', text: '#166534', label: 'Approved' };
  if (status === 'UNDER_REVIEW') return { bg: '#EEF2FF', border: '#C7D2FE', text: '#3730A3', label: 'Under Review' };
  if (status === 'DOCUMENTS_REQUESTED') return { bg: '#FFF7ED', border: '#FED7AA', text: '#C2410C', label: 'Document Requested' };
  if (status === 'REVISION_REQUESTED') return { bg: '#FFF7ED', border: '#FED7AA', text: '#C2410C', label: 'Revision Requested' };
  if (status === 'REJECTED') return { bg: '#FEF2F2', border: '#FECACA', text: '#B91C1C', label: 'Rejected' };
  return { bg: '#FFFBEB', border: '#FDE68A', text: '#92400E', label: 'Pending' };
};

const priorityUi = (priority: VerificationPriority) => {
  if (priority === 'HIGH') return { color: '#DC2626', label: 'High' };
  if (priority === 'MEDIUM') return { color: '#D97706', label: 'Medium' };
  return { color: '#64748B', label: 'Low' };
};

const parseDate = (value: string) => {
  const ts = Date.parse(String(value || ''));
  return Number.isNaN(ts) ? 0 : ts;
};

const normalizeRoleSpecKey = (value: string) => {
  const key = String(value || '').toUpperCase();
  if (key.includes('COMPANY')) return 'COMPANY';
  if (key.includes('CUSTOMER') || key.includes('SERVICE_SEEKER')) return 'CUSTOMER';
  if (key.includes('JOB_SEEKER') || key.includes('JOBSEEKER')) return 'JOB_SEEKER';
  if (key.includes('PHOTOGRAPHER') || key.includes('PHOTO')) return 'PHOTOGRAPHER';
  if (key.includes('MAKEUP')) return 'MAKEUP_ARTIST';
  if (key.includes('DEVELOPER')) return 'DEVELOPER';
  if (key.includes('VIDEO')) return 'VIDEO_EDITOR';
  if (key.includes('UGC') || (key.includes('CONTENT') && key.includes('CREATOR'))) return 'UGC_CONTENT_CREATOR';
  if (key.includes('GRAPHIC')) return 'GRAPHIC_DESIGNER';
  if (key.includes('SOCIAL')) return 'SOCIAL_MEDIA_MANAGER';
  if (key.includes('FITNESS')) return 'FITNESS_TRAINER';
  if (key.includes('TUTOR')) return 'TUTOR';
  if (key.includes('CATER')) return 'CATERING_SERVICES';
  return 'PROFESSIONAL';
};

const FALLBACK_VERIFICATION_ROWS: VerificationRow[] = [
  {
    id: 'VR-92841',
    applicantName: 'Sarah Jenkins',
    requestType: 'Portfolio Approval',
    roleLabel: 'Photographer',
    submittedOn: '2026-04-01',
    status: 'UNDER_REVIEW',
    priority: 'HIGH',
    userType: 'PROFESSIONAL',
    area: 'T. Nagar, Chennai',
    userId: 'u-1001',
    roleKey: 'PHOTOGRAPHER',
  },
  {
    id: 'VR-92839',
    applicantName: 'Zenith Tech Hub',
    requestType: 'Company Approval',
    roleLabel: 'Company',
    submittedOn: '2026-04-01',
    status: 'DOCUMENTS_REQUESTED',
    priority: 'MEDIUM',
    userType: 'COMPANY',
    area: 'Guindy, Chennai',
    userId: 'u-1002',
    roleKey: 'COMPANY',
  },
  {
    id: 'VR-92835',
    applicantName: 'Marcus Davis',
    requestType: 'Profile Approval',
    roleLabel: 'Graphic Designer',
    submittedOn: '2026-03-31',
    status: 'REVISION_REQUESTED',
    priority: 'LOW',
    userType: 'PROFESSIONAL',
    area: 'Velachery, Chennai',
    userId: 'u-1003',
    roleKey: 'GRAPHIC_DESIGNER',
  },
  {
    id: 'VR-92812',
    applicantName: 'Wedding Shoot Request',
    requestType: 'Service Seeker Requirement',
    roleLabel: 'Service Seeker',
    submittedOn: '2026-03-31',
    status: 'APPROVED',
    priority: 'MEDIUM',
    userType: 'CUSTOMER',
    area: 'Adyar, Chennai',
    userId: 'u-1004',
    roleKey: 'CUSTOMER',
  },
  {
    id: 'VR-92798',
    applicantName: 'Elena Petrova',
    requestType: 'Job Seeker Approval',
    roleLabel: 'Job Seeker',
    submittedOn: '2026-03-30',
    status: 'PENDING',
    priority: 'MEDIUM',
    userType: 'JOBSEEKER',
    area: 'Anna Nagar, Chennai',
    userId: 'u-1005',
    roleKey: 'JOB_SEEKER',
  },
  {
    id: 'VR-92772',
    applicantName: 'Arjun Service Seeker',
    requestType: 'Service Seeker Profile Approval',
    roleLabel: 'Service Seeker',
    submittedOn: '2026-03-30',
    status: 'UNDER_REVIEW',
    priority: 'MEDIUM',
    userType: 'CUSTOMER',
    area: 'T. Nagar, Chennai',
    userId: 'u-1006',
    roleKey: 'CUSTOMER',
  },
  {
    id: 'VR-92744',
    applicantName: 'Zenith Tech Hub - Senior Architect',
    requestType: 'Job Approval',
    roleLabel: 'Company',
    submittedOn: '2026-03-29',
    status: 'PENDING',
    priority: 'HIGH',
    userType: 'COMPANY',
    area: 'Guindy, Chennai',
    userId: 'u-1007',
    roleKey: 'COMPANY',
  },
];

export default function VerificationManagementPage() {
  const [rows, setRows] = createSignal<VerificationRow[]>([]);
  const [search, setSearch] = createSignal('');
  const [statusFilter, setStatusFilter] = createSignal<'ALL' | VerificationStatus>('ALL');
  const [sortBy, setSortBy] = createSignal<'latest' | 'oldest' | 'priority'>('latest');
  const [sortOpen, setSortOpen] = createSignal(false);
  const [filterOpen, setFilterOpen] = createSignal(false);
  const [error, setError] = createSignal('');

  const [categoryTab, setCategoryTab] = createSignal<'all' | 'profile' | 'portfolio' | 'company' | 'job_seeker' | 'service_profile' | 'service_requirement' | 'job'>('all');
  const [listTab, setListTab] = createSignal<'all' | 'view'>('all');
  const [selectedRow, setSelectedRow] = createSignal<VerificationRow | null>(null);
  const [viewer, setViewer] = createSignal<{ open: boolean; title: string; type: 'IMAGE' | 'PDF'; url: string }>({
    open: false,
    title: '',
    type: 'IMAGE',
    url: '',
  });
  const [docSelection, setDocSelection] = createSignal<Record<string, boolean>>({});
  const [requestNote, setRequestNote] = createSignal('');
  const [actionMessage, setActionMessage] = createSignal('');

  const load = async () => {
    try {
      setError('');
      const res = await fetch(`${API}/api/admin/approvals?page=1&limit=200`, {
        headers: { Accept: 'application/json' },
        credentials: 'include',
      });
      if (!res.ok) throw new Error(`Failed to load verification queue (${res.status})`);
      const data = await res.json().catch(() => ({} as any));

      const jobs = Array.isArray(data?.jobs) ? data.jobs : [];
      const requirements = Array.isArray(data?.requirements) ? data.requirements : [];
      const profiles = Array.isArray(data?.profiles) ? data.profiles : [];
      const portfolios = Array.isArray(data?.portfolios) ? data.portfolios : [];

      const jobRows: VerificationRow[] = jobs.map((job: any) => ({
        id: `VR-J-${String(job.id || Math.random()).slice(0, 8)}`,
        applicantName: String(job.company_name || job.created_by_name || job.title || 'Company Applicant'),
        requestType: 'Job Approval',
        roleLabel: 'Company',
        submittedOn: String(job.created_at || ''),
        status: 'PENDING',
        priority: 'HIGH',
        userType: 'COMPANY',
        area: String(job.location || job.city || 'Chennai'),
        userId: String(job.user_id || ''),
        roleKey: 'COMPANY',
        payload: job,
      }));

      const requirementRows: VerificationRow[] = requirements.map((req: any) => ({
        id: `VR-R-${String(req.id || Math.random()).slice(0, 8)}`,
        applicantName: String(req.created_by_name || req.customer_name || req.title || 'Service Seeker Applicant'),
        requestType: 'Service Seeker Requirement',
        roleLabel: toTitle(String(req.role_key || req.profession || req.category || 'Service Seeker')),
        submittedOn: String(req.created_at || ''),
        status: 'UNDER_REVIEW',
        priority: 'MEDIUM',
        userType: 'CUSTOMER',
        area: String(req.area || req.location || req.city || 'Chennai'),
        userId: String(req.user_id || ''),
        roleKey: String(req.role_key || req.profession || req.category || 'CUSTOMER'),
        payload: req,
      }));

      const profileRows: VerificationRow[] = profiles.map((profile: any) => {
        const roleKey = String(profile.role_key || profile.roleKey || '').toUpperCase();
        const statusRaw = String(profile.status || profile.approval_status || '').toUpperCase();
        const mappedStatus: VerificationStatus =
          statusRaw === 'APPROVED' || statusRaw === 'VERIFIED' ? 'APPROVED'
            : statusRaw === 'REJECTED' ? 'REJECTED'
              : statusRaw === 'DOCUMENTS_REQUESTED' || statusRaw === 'RE_UPLOAD_REQUESTED' ? 'DOCUMENTS_REQUESTED'
                : statusRaw === 'REVISION_REQUESTED' ? 'REVISION_REQUESTED'
                  : statusRaw === 'IN_REVIEW' || statusRaw === 'UNDER_REVIEW' ? 'UNDER_REVIEW'
                    : 'PENDING';

        const userType: VerificationRow['userType'] = roleKey === 'COMPANY'
          ? 'COMPANY'
          : (roleKey === 'JOB_SEEKER' || roleKey === 'JOBSEEKER')
            ? 'JOBSEEKER'
            : (roleKey === 'CUSTOMER' || roleKey === 'SERVICE_SEEKER')
              ? 'CUSTOMER'
              : 'PROFESSIONAL';

        const requestType: VerificationRow['requestType'] = userType === 'COMPANY'
          ? 'Company Approval'
          : userType === 'JOBSEEKER'
            ? 'Job Seeker Approval'
            : userType === 'CUSTOMER'
              ? 'Service Seeker Profile Approval'
              : 'Profile Approval';

        return {
          id: `VR-P-${String(profile.id || profile.user_id || Math.random()).slice(0, 8)}`,
          applicantName: String(profile.full_name || profile.name || profile.user_name || 'Applicant'),
          requestType,
          roleLabel: toTitle(roleKey || 'Professional'),
          submittedOn: String(profile.submitted_at || profile.created_at || ''),
          status: mappedStatus,
          priority: userType === 'PROFESSIONAL' ? 'HIGH' : 'MEDIUM',
          userType,
          area: String(profile.area || profile.city || profile.place || 'Chennai'),
          userId: String(profile.user_id || profile.id || ''),
          roleKey,
          payload: profile,
        };
      });

      const portfolioRows: VerificationRow[] = portfolios.map((portfolio: any) => {
        const statusRaw = String(portfolio.status || portfolio.approval_status || '').toUpperCase();
        const mappedStatus: VerificationStatus =
          statusRaw === 'APPROVED' || statusRaw === 'VERIFIED' ? 'APPROVED'
            : statusRaw === 'REJECTED' ? 'REJECTED'
              : statusRaw === 'DOCUMENTS_REQUESTED' || statusRaw === 'RE_UPLOAD_REQUESTED' ? 'DOCUMENTS_REQUESTED'
                : statusRaw === 'REVISION_REQUESTED' ? 'REVISION_REQUESTED'
                  : statusRaw === 'IN_REVIEW' || statusRaw === 'UNDER_REVIEW' || statusRaw === 'SUBMITTED' ? 'UNDER_REVIEW'
                    : 'PENDING';

        return {
          id: `VR-F-${String(portfolio.id || portfolio.user_id || Math.random()).slice(0, 8)}`,
          applicantName: String(portfolio.full_name || portfolio.name || 'Professional'),
          requestType: 'Portfolio Approval',
          roleLabel: toTitle(String(portfolio.role_key || portfolio.roleKey || 'PROFESSIONAL')),
          submittedOn: String(portfolio.submitted_at || portfolio.created_at || ''),
          status: mappedStatus,
          priority: 'HIGH',
          userType: 'PROFESSIONAL',
          area: String(portfolio.area || portfolio.city || portfolio.place || 'Chennai'),
          userId: String(portfolio.user_id || portfolio.id || ''),
          roleKey: String(portfolio.role_key || portfolio.roleKey || 'PROFESSIONAL'),
          payload: portfolio,
        };
      });

      const mergedRows = [...profileRows, ...portfolioRows, ...jobRows, ...requirementRows];
      setRows(mergedRows.length ? mergedRows : FALLBACK_VERIFICATION_ROWS);
    } catch (e: any) {
      setRows(FALLBACK_VERIFICATION_ROWS);
      setError(e?.message ? `${e.message} Showing demo queue data.` : 'Could not load verification queue. Showing demo queue data.');
    }
  };

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

  const tabCounts = createMemo(() => {
    const all = rows();
    return {
      all: all.length,
      profile: all.filter((r) => r.requestType === 'Profile Approval').length,
      portfolio: all.filter((r) => r.requestType === 'Portfolio Approval').length,
      company: all.filter((r) => r.requestType === 'Company Approval').length,
      jobSeeker: all.filter((r) => r.requestType === 'Job Seeker Approval').length,
      serviceProfile: all.filter((r) => r.requestType === 'Service Seeker Profile Approval').length,
      serviceRequirement: all.filter((r) => r.requestType === 'Service Seeker Requirement').length,
      job: all.filter((r) => r.requestType === 'Job Approval').length,
    };
  });

  const filteredRows = createMemo(() => {
    const query = search().trim().toLowerCase();
    const activeTab = categoryTab();
    const status = statusFilter();
    const sort = sortBy();

    const scoped = rows().filter((row) => {
      if (activeTab === 'profile' && row.requestType !== 'Profile Approval') return false;
      if (activeTab === 'portfolio' && row.requestType !== 'Portfolio Approval') return false;
      if (activeTab === 'company' && row.requestType !== 'Company Approval') return false;
      if (activeTab === 'job_seeker' && row.requestType !== 'Job Seeker Approval') return false;
      if (activeTab === 'service_profile' && row.requestType !== 'Service Seeker Profile Approval') return false;
      if (activeTab === 'service_requirement' && row.requestType !== 'Service Seeker Requirement') return false;
      if (activeTab === 'job' && row.requestType !== 'Job Approval') return false;
      if (status !== 'ALL' && row.status !== status) return false;

      if (!query) return true;
      return [row.id, row.applicantName, row.requestType, row.roleLabel, row.area]
        .some((value) => String(value || '').toLowerCase().includes(query));
    });

    const next = [...scoped];
    if (sort === 'priority') {
      const rank = (p: VerificationPriority) => (p === 'HIGH' ? 3 : p === 'MEDIUM' ? 2 : 1);
      next.sort((a, b) => rank(b.priority) - rank(a.priority));
      return next;
    }
    next.sort((a, b) => (sort === 'oldest' ? 1 : -1) * (parseDate(a.submittedOn) - parseDate(b.submittedOn)));
    return next;
  });

  const displayRows = createMemo(() => {
    if (rows().length === 0) return FALLBACK_VERIFICATION_ROWS;
    return filteredRows();
  });

  const metrics = createMemo(() => {
    const all = rows();
    const today = new Date().toISOString().slice(0, 10);
    const submittedToday = all.filter((r) => String(r.submittedOn || '').slice(0, 10) === today);
    return {
      totalPending: all.filter((r) => r.status === 'PENDING' || r.status === 'UNDER_REVIEW').length,
      approvedToday: submittedToday.filter((r) => r.status === 'APPROVED').length,
      rejectedToday: submittedToday.filter((r) => r.status === 'REJECTED').length,
      needsRevision: all.filter((r) => r.status === 'DOCUMENTS_REQUESTED' || r.status === 'REVISION_REQUESTED').length,
    };
  });

  const exportCsv = () => {
    const headers = ['Submission ID', 'Type', 'Applicant Name', 'Role', 'Submitted On', 'Status', 'Priority', 'Area'];
    const lines = filteredRows().map((row) => [
      row.id,
      row.requestType,
      row.applicantName,
      row.roleLabel,
      String(row.submittedOn || '').slice(0, 10),
      row.status,
      row.priority,
      row.area,
    ]);
    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 link = document.createElement('a');
    link.href = url;
    link.download = `verification-queue-${new Date().toISOString().slice(0, 10)}.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  const selectedDocuments = createMemo<SubmittedDocument[]>(() => {
    const row = selectedRow();
    if (!row) return [];
    if (row.requestType === 'Job Approval') {
      return [
        { id: 'job_desc', title: 'Job Description File', type: 'PDF', url: '/nxtgauge-logo.png', status: 'SUBMITTED' },
        { id: 'company_proof', title: 'Company Verification Snapshot', type: 'PDF', url: '/nxtgauge-icon.png', status: 'SUBMITTED' },
      ];
    }
    if (row.requestType === 'Service Seeker Requirement') {
      return [
        { id: 'requirement_brief', title: 'Requirement Brief', type: 'PDF', url: '/nxtgauge-logo.png', status: 'SUBMITTED' },
        { id: 'reference', title: 'Reference Attachment', type: 'IMAGE', url: '/nxtgauge-icon.png', status: 'SUBMITTED' },
      ];
    }
    const roleSpecKey = normalizeRoleSpecKey(row.roleKey || row.userType);
    const fromPayload = Array.isArray(row.payload?.documents) ? row.payload.documents : [];
    if (fromPayload.length) {
      return fromPayload.slice(0, 8).map((doc: any, idx: number) => ({
        id: String(doc.id || `doc-${idx + 1}`),
        title: String(doc.title || doc.name || `Document ${idx + 1}`),
        type: String(doc.type || '').toUpperCase().includes('PDF') ? 'PDF' : 'IMAGE',
        url: String(doc.url || '/nxtgauge-logo.png'),
        status: String(doc.status || '').toUpperCase() === 'MISSING'
          ? 'MISSING'
          : String(doc.status || '').toUpperCase() === 'INVALID'
            ? 'INVALID'
            : 'SUBMITTED',
      }));
    }
    const docs = ROLE_DOCUMENTS[roleSpecKey] || ROLE_DOCUMENTS.PROFESSIONAL;
    return docs.map((title, idx) => ({
      id: `${roleSpecKey.toLowerCase()}-doc-${idx + 1}`,
      title,
      type: title.toLowerCase().includes('proof') ? 'IMAGE' : 'PDF',
      url: idx % 2 === 0 ? '/nxtgauge-logo.png' : '/nxtgauge-icon.png',
      status: idx === docs.length - 1 ? 'MISSING' : 'SUBMITTED',
    }));
  });

  const selectedPortfolio = createMemo<PortfolioAsset[]>(() => {
    const row = selectedRow();
    if (!row || !(row.userType === 'PROFESSIONAL' || row.requestType === 'Portfolio Approval')) return [];
    const fromPayload = Array.isArray(row.payload?.portfolio_images)
      ? row.payload.portfolio_images
      : Array.isArray(row.payload?.images)
        ? row.payload.images
        : Array.isArray(row.payload?.gallery)
          ? row.payload.gallery
          : [];
    if (fromPayload.length) {
      return fromPayload.slice(0, 6).map((asset: any, idx: number) => ({
        id: String(asset.id || `pf-${idx + 1}`),
        title: String(asset.title || asset.name || `Portfolio ${idx + 1}`),
        url: String(asset.url || '/nxtgauge-logo.png'),
      }));
    }
    return Array.from({ length: 6 }).map((_, idx) => ({
      id: `pf-${idx + 1}`,
      title: `Portfolio ${idx + 1}`,
      url: idx % 2 === 0 ? '/nxtgauge-logo.png' : '/nxtgauge-icon.png',
    }));
  });

  const selectedFieldValues = createMemo<Array<{ label: string; value: string }>>(() => {
    const row = selectedRow();
    if (!row) return [];
    const roleSpecKey = normalizeRoleSpecKey(row.roleKey || row.userType);
    const payload = row.payload || {};

    const fullName = String(
      payload.full_name
      || payload.fullName
      || [payload.first_name || payload.firstName, payload.last_name || payload.lastName].filter(Boolean).join(' ')
      || row.applicantName
      || '',
    ).trim();
    const email = String(payload.email || payload.email_address || payload.emailAddress || 'applicant@nxtgauge.com');
    const phone = String(payload.phone || payload.mobile || payload.mobile_number || payload.mobileNumber || '+91 90000 00000');
    const area = String(payload.area || row.area || 'T. Nagar');
    const place = String(payload.place || payload.locality || 'Chennai');
    const city = String(payload.city || 'Chennai');
    const state = String(payload.state || 'Tamil Nadu');
    const pin = String(payload.pin_code || payload.pinCode || '600001');
    const gender = String(payload.gender || 'Not specified');

    const byLabel: Record<string, string> = {
      'First Name': fullName.split(' ')[0] || fullName,
      'Last Name': fullName.split(' ').slice(1).join(' ') || '—',
      'Full Name': fullName || '—',
      'Email Address': email,
      'Mobile Number': phone,
      Area: area,
      Place: place,
      City: city,
      State: state,
      'PIN Code': pin,
      Gender: gender,
      'Address Line 1': String(payload.address_line1 || payload.addressLine1 || payload.address || 'No. 12, Main Road'),
      'Address Line 2 (Optional)': String(payload.address_line2 || payload.addressLine2 || '—'),
      'Service Category': String(payload.service_category || payload.serviceCategory || row.roleLabel || 'General'),
      'Company Name': String(payload.company_name || payload.companyName || row.applicantName || '—'),
      'Company Email': email,
      'Company Phone': phone,
      'Website URL': String(payload.website || payload.website_url || payload.websiteUrl || '—'),
      'Contact Person Name': String(payload.contact_person_name || payload.contactPersonName || fullName || '—'),
      'Current Role': String(payload.current_role || payload.currentRole || row.roleLabel || '—'),
      'Total Experience': String(payload.total_experience || payload.totalExperience || payload.experience || '—'),
    };

    if (row.requestType === 'Job Approval') {
      return JOB_POSTING_FIELDS.map((label) => ({
        label,
        value: ({
          'Job Title': String(payload.title || payload.job_title || '—'),
          Department: String(payload.department || payload.company_department || '—'),
          'Job Category': String(payload.category || payload.job_category || '—'),
          'Employment Type': String(payload.employment_type || payload.type || '—'),
          Seniority: String(payload.seniority || payload.level || '—'),
          Openings: String(payload.openings || payload.positions || '—'),
          'Role & Requirements': String(payload.requirements || payload.skills || '—'),
          Compensation: String(payload.salary_range || payload.compensation || '—'),
          Location: String(payload.location || payload.city || 'Chennai'),
          Description: String(payload.description || payload.summary || '—'),
        } as Record<string, string>)[label] || '—',
      }));
    }

    if (row.requestType === 'Service Seeker Requirement') {
      const reqRoleKey = normalizeRoleSpecKey(String(payload.role_key || payload.profession || payload.category || row.roleKey));
      const dynamicReqFields = REQUIREMENT_ROLE_FIELDS[reqRoleKey] || REQUIREMENT_ROLE_FIELDS.PHOTOGRAPHER;
      const baseReqFields = ['Requirement Title', 'Priority', 'Requirement Description', 'Expected Start Date', 'Service City', 'Contact Number'];
      const fields = [...baseReqFields, ...dynamicReqFields];
      return fields.map((label) => ({
        label,
        value: ({
          'Requirement Title': String(payload.title || payload.requirement_title || '—'),
          Priority: String(payload.priority || '—'),
          'Requirement Description': String(payload.description || payload.details || '—'),
          'Expected Start Date': String(payload.start_date || payload.expected_start_date || '—'),
          'Service City': String(payload.city || 'Chennai'),
          'Contact Number': String(payload.phone || payload.contact_number || '+91 90000 00000'),
        } as Record<string, string>)[label]
          || String(
            payload[label]
            || payload[label.toLowerCase().replace(/[^a-z0-9]+/g, '_')]
            || '—',
          ),
      }));
    }

    if (row.requestType === 'Portfolio Approval') {
      const portfolioFields = [
        'About',
        'Services & Pricing',
        'Portfolio Photos',
        'Experience & Tools',
        'Specialties',
        'Languages',
        'Service Areas',
      ];
      return portfolioFields.map((label) => ({
        label,
        value: ({
          About: String(payload.about || payload.bio || '—'),
          'Services & Pricing': Array.isArray(payload.services) ? `${payload.services.length} service(s) added` : String(payload.pricing || '—'),
          'Portfolio Photos': Array.isArray(payload.images || payload.portfolio_images || payload.gallery) ? `${(payload.images || payload.portfolio_images || payload.gallery).length} image(s)` : '0 image(s)',
          'Experience & Tools': String(payload.experience || payload.tools || '—'),
          Specialties: Array.isArray(payload.specialties) ? payload.specialties.join(', ') : String(payload.specialties || '—'),
          Languages: Array.isArray(payload.languages) ? payload.languages.join(', ') : String(payload.languages || '—'),
          'Service Areas': Array.isArray(payload.service_areas || payload.travel_areas) ? (payload.service_areas || payload.travel_areas).join(', ') : String(payload.service_areas || '—'),
        } as Record<string, string>)[label] || '—',
      }));
    }

    const fields = ROLE_PROFILE_FIELDS[roleSpecKey] || ROLE_PROFILE_FIELDS.PROFESSIONAL;
    return fields.map((label) => ({ label, value: byLabel[label] || '—' }));
  });

  const pushToApprovalQueue = (row: VerificationRow) => {
    if (typeof window === 'undefined') return;
    const item: ApprovalQueueItem = {
      id: row.id,
      requestType: row.requestType,
      applicantName: row.applicantName,
      roleLabel: row.roleLabel,
      userType: row.userType,
      roleKey: row.roleKey,
      area: row.area,
      submittedOn: row.submittedOn,
      documents: selectedDocuments(),
      submittedFields: selectedFieldValues(),
    };
    const raw = window.localStorage.getItem(APPROVAL_QUEUE_STORAGE_KEY);
    const parsed = raw ? JSON.parse(raw) : [];
    const current = Array.isArray(parsed) ? parsed as ApprovalQueueItem[] : [];
    const filtered = current.filter((entry) => entry.id !== item.id);
    window.localStorage.setItem(APPROVAL_QUEUE_STORAGE_KEY, JSON.stringify([item, ...filtered]));
  };

  const applySelectedStatus = (nextStatus: VerificationStatus) => {
    const current = selectedRow();
    if (!current) return;
    const nextRow = { ...current, status: nextStatus };
    setSelectedRow(nextRow);
    setRows((prev) => prev.map((item) => (item.id === current.id ? { ...item, status: nextStatus } : item)));
    if (nextStatus === 'APPROVED') {
      pushToApprovalQueue(nextRow);
      setActionMessage('Verified and sent to Approval Management for final approval.');
    }
  };

  const requestSelectedDocuments = () => {
    const selectedIds = Object.entries(docSelection()).filter(([, checked]) => checked).map(([id]) => id);
    if (selectedIds.length === 0) {
      setActionMessage('Select at least one document before sending request.');
      return;
    }
    applySelectedStatus('DOCUMENTS_REQUESTED');
    setActionMessage(`Document request sent for ${selectedIds.length} item(s).`);
  };

  const requestProfileChanges = () => {
    applySelectedStatus('REVISION_REQUESTED');
    setActionMessage('Revision request sent to applicant.');
  };

  return (
    <AdminShell>
      <div class="w-full space-y-6 pb-8">
        <div style="margin-bottom:1.5rem">
          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Verification Management</h1>
          <p class="mt-1 text-[14px] text-[#6B7280]">Review and verify all platform submissions before they move to approval management</p>
        </div>

        <Show when={error()}>
          <div style="border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">{error()}</div>
        </Show>

        <div style="display:flex;align-items:center;gap:24px;min-height:44px;border-bottom:1px solid #E5E7EB;overflow:auto">
          {([
            { key: 'all', label: 'All Verifications' },
            { key: 'view', label: 'View Verification' },
          ] as const).map((tab) => (
            <button
              type="button"
              onClick={() => setListTab(tab.key)}
              style={`height:44px;padding:0 2px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;white-space:nowrap;${listTab() === tab.key ? 'color:#FF5E13;box-shadow:inset 0 -2px 0 #FF5E13' : 'color:#6B7280'}`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        <Show when={listTab() === 'all'}>
          <div style="display:flex;align-items:center;gap:24px;min-height:44px;border-bottom:1px solid #E5E7EB;overflow:auto">
            {([
              { key: 'all', label: `All Verifications (${tabCounts().all})` },
              { key: 'profile', label: `Profile Approvals (${tabCounts().profile})` },
              { key: 'portfolio', label: `Portfolio Approvals (${tabCounts().portfolio})` },
              { key: 'company', label: `Company Approvals (${tabCounts().company})` },
              { key: 'job_seeker', label: `Job Seeker Approvals (${tabCounts().jobSeeker})` },
              { key: 'service_profile', label: `Service Seeker Profile (${tabCounts().serviceProfile})` },
              { key: 'service_requirement', label: `Service Seeker Requirements (${tabCounts().serviceRequirement})` },
              { key: 'job', label: `Job Approvals (${tabCounts().job})` },
            ] as const).map((tab) => (
              <button
                type="button"
                onClick={() => setCategoryTab(tab.key)}
                style={`height:44px;padding:0 2px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;white-space:nowrap;${categoryTab() === tab.key ? 'color:#FF5E13;box-shadow:inset 0 -2px 0 #FF5E13' : 'color:#6B7280'}`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </Show>

        <Show when={listTab() === 'all'}>
        <div style="position:relative;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:visible;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 by ID, name or type..."
              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={() => { setSortOpen((v) => !v); setFilterOpen(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={sortOpen()}>
                <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)">
                  {([
                    { key: 'latest', label: 'Latest Submitted' },
                    { key: 'oldest', label: 'Oldest Submitted' },
                    { key: 'priority', label: 'Priority (High-Low)' },
                  ] as const).map((item) => (
                    <button
                      type="button"
                      onClick={() => { setSortBy(item.key); setSortOpen(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() === item.key ? '#FF5E13' : '#374151'};background:${sortBy() === item.key ? '#FFF1EB' : 'transparent'}`}
                    >
                      {item.label}
                    </button>
                  ))}
                </div>
              </Show>
            </div>

            <div style="position:relative">
              <button
                type="button"
                onClick={() => { setFilterOpen((v) => !v); setSortOpen(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={filterOpen()}>
                <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)">
                  {([
                    { key: 'ALL', label: 'All Status' },
                    { key: 'PENDING', label: 'Pending' },
                    { key: 'UNDER_REVIEW', label: 'Under Review' },
                    { key: 'DOCUMENTS_REQUESTED', label: 'Documents Requested' },
                    { key: 'REVISION_REQUESTED', label: 'Revision Requested' },
                    { key: 'APPROVED', label: 'Approved' },
                    { key: 'REJECTED', label: 'Rejected' },
                  ] as const).map((item) => (
                    <button
                      type="button"
                      onClick={() => { setStatusFilter(item.key); setFilterOpen(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() === item.key ? '#FF5E13' : '#374151'};background:${statusFilter() === item.key ? '#FFF1EB' : 'transparent'}`}
                    >
                      {item.label}
                    </button>
                  ))}
                </div>
              </Show>
            </div>

            <button
              type="button"
              onClick={exportCsv}
              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 overflow-y-visible">
            <table class="min-w-full">
              <thead>
                <tr style="background:#0D0D2A;text-align:left">
                  {['Submission ID', 'Type', 'Applicant Name', 'Role', 'Submitted On', 'Status', 'Priority', 'Actions'].map((header) => (
                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{header}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                <Show
                  when={displayRows().length > 0}
                  fallback={
                    <tr>
                      <td colSpan={8} style="padding:32px;text-align:center">
                        <p style="font-size:15px;font-weight:600;color:#111827">No verification requests found</p>
                        <p style="margin-top:6px;font-size:13px;color:#6B7280">Try changing filters or search.</p>
                      </td>
                    </tr>
                  }
                >
                  <For each={displayRows()}>
                    {(row) => {
                      const s = statusUi(row.status);
                      const p = priorityUi(row.priority);
                      return (
                        <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;font-size:14px;color:#111827">{row.requestType}</td>
                          <td style="padding:12px 20px">
                            <div style="display:flex;flex-direction:column;gap:2px">
                              <span style="font-size:14px;font-weight:600;color:#111827">{row.applicantName}</span>
                              <span style="font-size:12px;color:#6B7280">{row.area || 'Chennai'}</span>
                            </div>
                          </td>
                          <td style="padding:12px 20px;font-size:14px;color:#111827">{row.roleLabel}</td>
                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{String(row.submittedOn || '').slice(0, 10) || '—'}</td>
                          <td style="padding:12px 20px">
                            <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${s.border};background:${s.bg};color:${s.text};padding:2px 10px;font-size:12px;font-weight:500`}>
                              {s.label}
                            </span>
                          </td>
                          <td style="padding:12px 20px">
                            <span style={`display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:${p.color}`}>
                              <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${p.color}`} />
                              {p.label}
                            </span>
                          </td>
                          <td style="padding:12px 20px">
                            <button
                              type="button"
                              onClick={() => {
                                setSelectedRow(row);
                                setDocSelection({});
                                setRequestNote('');
                                setActionMessage('');
                                setListTab('view');
                              }}
                              style="height:30px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:12px;font-weight:700;color:#374151;display:inline-flex;align-items:center;cursor:pointer"
                            >
                              View
                            </button>
                          </td>
                        </tr>
                      );
                    }}
                  </For>
                </Show>
              </tbody>
            </table>
          </div>

          <Show when={displayRows().length > 0}>
            <div style="display:flex;align-items:center;justify-content:space-between;border-top:1px solid #F3F4F6;padding:12px 20px">
              <p style="font-size:13px;color:#6B7280">
                Showing <strong style="font-weight:600;color:#111827">1–{displayRows().length}</strong> of <strong style="font-weight:600;color:#111827">{displayRows().length}</strong> verifications
              </p>
              <div style="display:flex;align-items:center;gap:4px">
                <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#6B7280;cursor:pointer;font-size:15px">‹</button>
                <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;background:#FF5E13;color:white;font-size:13px;font-weight:600;border:none;cursor:pointer">1</button>
                <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#374151;font-size:13px;font-weight:500;cursor:pointer">2</button>
                <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#374151;font-size:13px;font-weight:500;cursor:pointer">3</button>
                <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#6B7280;cursor:pointer;font-size:15px">›</button>
              </div>
            </div>
          </Show>
        </div>
        </Show>

        <Show when={listTab() === 'view'}>
          <Show
            when={selectedRow()}
            fallback={
              <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 <strong>View</strong> on a row from <strong>All Verifications</strong>.</p>
              </div>
            }
          >
            <div style="margin-top:24px;display:grid;gap:12px">
              <div style="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">#{selectedRow()!.id}</h2>
                    <p style="margin-top:2px;font-size:13px;color:#6B7280">{selectedRow()!.requestType}</p>
                  </div>
                  <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${statusUi(selectedRow()!.status).border};background:${statusUi(selectedRow()!.status).bg};color:${statusUi(selectedRow()!.status).text};padding:2px 10px;font-size:12px;font-weight:500`}>
                    {statusUi(selectedRow()!.status).label}
                  </span>
                </div>
                <div>
                  <div style="display:flex;border-bottom:1px solid #F3F4F6">
                    <div style="flex:1;padding:16px 24px;border-right:1px solid #F3F4F6">
                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Applicant Name</p>
                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{selectedRow()!.applicantName}</p>
                    </div>
                    <div style="flex:1;padding:16px 24px;border-right:1px solid #F3F4F6">
                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Role</p>
                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{selectedRow()!.roleLabel}</p>
                    </div>
                    <div style="flex:1;padding:16px 24px">
                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Area</p>
                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{selectedRow()!.area || 'Chennai'}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div style="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:16px 20px;border-bottom:1px solid #F3F4F6;display:flex;align-items:center;justify-content:space-between">
                  <h3 style="margin:0;font-size:16px;font-weight:700;color:#111827">Submitted Form Details</h3>
                  <span style="font-size:12px;color:#6B7280">{selectedFieldValues().length} fields</span>
                </div>
                <div style="padding:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px">
                  <For each={selectedFieldValues()}>
                    {(entry) => (
                      <div style="border:1px solid #E5E7EB;border-radius:10px;background:#F9FAFB;padding:10px">
                        <p style="margin:0;font-size:10px;letter-spacing:0.05em;text-transform:uppercase;color:#9CA3AF">{entry.label}</p>
                        <p style="margin:6px 0 0;font-size:13px;font-weight:700;color:#111827;line-height:1.35">{entry.value}</p>
                      </div>
                    )}
                  </For>
                </div>
              </div>

              <div style="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:16px 20px;border-bottom:1px solid #F3F4F6;display:flex;align-items:center;justify-content:space-between">
                  <h3 style="margin:0;font-size:16px;font-weight:700;color:#111827">Submitted Documents</h3>
                  <span style="font-size:12px;color:#6B7280">{selectedDocuments().length} files</span>
                </div>
                <div class="overflow-x-auto">
                  <table class="min-w-full">
                    <thead>
                      <tr style="background:#0D0D2A;text-align:left">
                        {['Document', 'State', 'View', 'Request'].map((header) => (
                          <th style="padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{header}</th>
                        ))}
                      </tr>
                    </thead>
                    <tbody>
                      <For each={selectedDocuments()}>
                        {(doc) => (
                          <tr style="border-bottom:1px solid #F3F4F6">
                            <td style="padding:12px 16px;font-size:14px;font-weight:600;color:#111827">{doc.title}</td>
                            <td style="padding:12px 16px;font-size:13px;color:#6B7280">{toTitle(doc.status)}</td>
                            <td style="padding:12px 16px">
                              <button
                                type="button"
                                onClick={() => setViewer({ open: true, title: doc.title, type: doc.type, url: doc.url })}
                                style="height:30px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:12px;font-weight:700;color:#374151;cursor:pointer"
                              >
                                View
                              </button>
                            </td>
                            <td style="padding:12px 16px">
                              <label style="display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#374151;cursor:pointer">
                                <input
                                  type="checkbox"
                                  checked={Boolean(docSelection()[doc.id])}
                                  onChange={(e) => setDocSelection((prev) => ({ ...prev, [doc.id]: e.currentTarget.checked }))}
                                  style="accent-color:#FF5E13"
                                />
                                Request
                              </label>
                            </td>
                          </tr>
                        )}
                      </For>
                    </tbody>
                  </table>
                </div>
              </div>

              <Show when={selectedPortfolio().length > 0}>
                <div style="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:16px 20px;border-bottom:1px solid #F3F4F6;display:flex;align-items:center;justify-content:space-between">
                    <h3 style="margin:0;font-size:16px;font-weight:700;color:#111827">Portfolio Photos</h3>
                    <span style="font-size:12px;color:#6B7280">{selectedPortfolio().length} images</span>
                  </div>
                  <div style="padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px">
                    <For each={selectedPortfolio()}>
                      {(asset) => (
                        <button
                          type="button"
                          onClick={() => setViewer({ open: true, title: asset.title, type: 'IMAGE', url: asset.url })}
                          style="border:1px solid #E5E7EB;border-radius:10px;background:#FFFFFF;padding:0;cursor:pointer;overflow:hidden;text-align:left"
                        >
                          <img src={asset.url} alt={asset.title} style="width:100%;height:110px;object-fit:cover;display:block" />
                          <div style="padding:8px 10px;font-size:12px;font-weight:600;color:#374151">{asset.title}</div>
                        </button>
                      )}
                    </For>
                  </div>
                </div>
              </Show>

              <div style="border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);padding:16px">
                <h3 style="margin:0 0 8px;font-size:16px;font-weight:700;color:#111827">Reviewer Actions</h3>
                <textarea
                  value={requestNote()}
                  onInput={(e) => setRequestNote(e.currentTarget.value)}
                  placeholder="Reviewer note for applicant"
                  style="width:100%;min-height:74px;border:1px solid #E5E7EB;border-radius:10px;padding:10px;font-size:13px;color:#374151;resize:vertical"
                />
                <div style="margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap">
                  <button type="button" onClick={requestSelectedDocuments} style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:700;color:#374151;cursor:pointer">Request Selected Documents</button>
                  <button type="button" onClick={requestProfileChanges} style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:700;color:#374151;cursor:pointer">Request Changes</button>
                  <button type="button" onClick={() => applySelectedStatus('APPROVED')} style="height:34px;border-radius:8px;border:none;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:700;color:white;cursor:pointer">Approve</button>
                  <button type="button" onClick={() => applySelectedStatus('REJECTED')} style="height:34px;border-radius:8px;border:1px solid #FECACA;background:white;padding:0 12px;font-size:12px;font-weight:700;color:#B91C1C;cursor:pointer">Reject</button>
                </div>
                <Show when={actionMessage()}>
                  <div style="margin-top:10px;border-radius:8px;border:1px solid #E5E7EB;background:#F9FAFB;padding:8px 10px;font-size:12px;color:#374151">{actionMessage()}</div>
                </Show>
                <Show when={selectedRow()!.status === 'APPROVED'}>
                  <A href="/admin/approval" style="margin-top:8px;height:32px;border-radius:8px;border:none;background:#0D0D2A;color:white;padding:0 12px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;text-decoration:none">
                    Open Approval Management
                  </A>
                </Show>
              </div>

              <div style="display:flex;align-items:center;gap:10px">
                <A
                  href={`/admin/verification/${encodeURIComponent(selectedRow()!.id)}?roleKey=${encodeURIComponent(selectedRow()!.roleKey || '')}&userId=${encodeURIComponent(selectedRow()!.userId || '')}&type=${encodeURIComponent(selectedRow()!.requestType)}`}
                  style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;display:inline-flex;align-items:center;text-decoration:none"
                >
                  Open Full Review
                </A>
                <button type="button" onClick={() => 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>

      <Show when={viewer().open}>
        <div style="position:fixed;inset:0;z-index:9999;background:rgba(17,24,39,0.72);display:flex;align-items:center;justify-content:center;padding:20px">
          <div style="width:min(90vw,900px);max-height:88vh;border-radius:14px;overflow:hidden;border:1px solid #E5E7EB;background:white;display:flex;flex-direction:column">
            <div style="padding:12px 16px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
              <p style="margin:0;font-size:14px;font-weight:700;color:#111827">{viewer().title}</p>
              <button type="button" onClick={() => setViewer({ open: false, title: '', type: 'IMAGE', url: '' })} style="height:30px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:12px;font-weight:700;color:#374151;cursor:pointer">Close</button>
            </div>
            <div style="padding:12px;overflow:auto;display:flex;justify-content:center;align-items:center;background:#F8FAFC">
              <Show
                when={viewer().type === 'IMAGE'}
                fallback={<iframe src={viewer().url} style="width:100%;height:70vh;border:none;background:white" title={viewer().title} />}
              >
                <img src={viewer().url} alt={viewer().title} style="max-width:100%;max-height:70vh;object-fit:contain" />
              </Show>
            </div>
          </div>
        </div>
      </Show>
    </AdminShell>
  );
}
