'use client';

import React, { useEffect, useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import styles from '../commonstyle/dattabale.module.css';
import { EnterpriseLoader } from '../../../../components/loader/loader';
import { Pagination } from '../companies/Pagination';
import { deleteWithConfirm } from '../../../../components/ConfirmDialog/ConfirmDialog';
import {
  fetchClosureFileBlob,
  getPreviousNcUsers,
} from '@/lib/api/previous-nc.api';
import type { PreviousNcUserOption } from '@/lib/api/types/previous-nc.types';
import FinalClosureFilters, {
  type FcSourceFilter,
  type FcNcTypeFilter,
} from './FinalClosureFilters';
import FinalClosureRow from './FinalClosureRow';
import {
  getFinalClosuresPaged,
  deleteFinalClosure,
  type FinalClosureRow as Row,
} from '@/lib/api/final-closure.api';

const COLUMNS = [
  '#',
  'Company Name',
  'Auditor',
  'Uploaded By',
  'Evidence Received',
  'Final Closure Report',
  'NC Type',
  'Closure Date',
  'Closed At',
  'Final Closure Created At',
  'Remarks',
  'Actions',
];

function useDebounce<T>(value: T, delay: number): T {
  const [d, setD] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setD(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);
  return d;
}

// Detect super-admin from localStorage("user") or the JWT. Tolerates either a
// `role` string or a `roles: []` array. Backend is the real gate regardless.
function detectSuperAdmin(): boolean {
  if (typeof window === 'undefined') return false;
  const isSA = (v: any): boolean => {
    if (!v) return false;
    const norm = (s: string) => s.trim().toLowerCase().replace(/[_\s]/g, '-');
    if (typeof v === 'string') return norm(v) === 'super-admin';
    if (Array.isArray(v))
      return v.some((x) =>
        typeof x === 'string'
          ? norm(x) === 'super-admin'
          : norm(String(x?.name ?? x?.role ?? '')) === 'super-admin',
      );
    if (typeof v === 'object')
      return norm(String(v.name ?? v.role ?? '')) === 'super-admin';
    return false;
  };
  try {
    const s = localStorage.getItem('user');
    if (s) {
      const u = JSON.parse(s);
      if (isSA(u?.role) || isSA(u?.roles) || isSA(u?.role_name)) return true;
    }
  } catch {}
  try {
    const tok =
      localStorage.getItem('access_token') || localStorage.getItem('token');
    if (tok) {
      const p = JSON.parse(atob(tok.split('.')[1]));
      if (isSA(p?.role) || isSA(p?.roles) || isSA(p?.role_name)) return true;
    }
  } catch {}
  return false;
}

export default function FinalClosurePage() {
  const router = useRouter();

  const [rows, setRows] = useState<Row[]>([]);
  const [meta, setMeta] = useState<{
    total: number;
    page: number;
    limit: number;
    totalPages: number;
  } | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(10);

  const [searchTerm, setSearchTerm] = useState('');
  const [sourceFilter, setSourceFilter] = useState<FcSourceFilter>('all');
  const [ncTypeFilter, setNcTypeFilter] = useState<FcNcTypeFilter>('all');
  const [auditTypeFilter, setAuditTypeFilter] = useState('all');
  const [userFilter, setUserFilter] = useState('all');
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');
  const debouncedSearch = useDebounce(searchTerm, 400);

  const [availableUsers, setAvailableUsers] = useState<PreviousNcUserOption[]>([]);
  const [reportBusy, setReportBusy] = useState<string | null>(null);
  const [isSuperAdmin, setIsSuperAdmin] = useState(false);

  useEffect(() => {
    setIsSuperAdmin(detectSuperAdmin());
  }, []);

  const fetchPage = useCallback(
    (
      page: number,
      limit: number,
      search: string,
      source: string,
      ncType: string,
      auditType: string,
      userName: string,
      from: string,
      to: string,
    ) => {
      setLoading(true);
      getFinalClosuresPaged({
        page,
        limit,
        ...(search && { search }),
        source: source === 'all' ? 'All' : (source as any),
        nc_type: ncType === 'all' ? 'All' : ncType,
        audit_type: auditType === 'all' ? 'All' : auditType,
        user_name: userName === 'all' ? undefined : userName,
        ...(from && { date_from: from }),
        ...(to && { date_to: to }),
      })
        .then((res) => {
          setRows(res.rows);
          setMeta({
            total: res.total,
            page: res.page,
            limit: res.limit,
            totalPages: res.totalPages,
          });
        })
        .catch((err) => setError(err.message))
        .finally(() => setLoading(false));
    },
    [],
  );

  useEffect(() => {
    fetchPage(1, itemsPerPage, '', 'all', 'all', 'all', 'all', '', '');
    getPreviousNcUsers()
      .then(setAvailableUsers)
      .catch(() => setAvailableUsers([]));
    setCurrentPage(1);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    fetchPage(
      currentPage,
      itemsPerPage,
      debouncedSearch,
      sourceFilter,
      ncTypeFilter,
      auditTypeFilter,
      userFilter,
      dateFrom,
      dateTo,
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentPage, itemsPerPage]);

  useEffect(() => {
    setCurrentPage(1);
    fetchPage(
      1,
      itemsPerPage,
      debouncedSearch,
      sourceFilter,
      ncTypeFilter,
      auditTypeFilter,
      userFilter,
      dateFrom,
      dateTo,
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedSearch, sourceFilter, ncTypeFilter, auditTypeFilter, userFilter, dateFrom, dateTo]);

  const refresh = () =>
    fetchPage(
      currentPage,
      itemsPerPage,
      debouncedSearch,
      sourceFilter,
      ncTypeFilter,
      auditTypeFilter,
      userFilter,
      dateFrom,
      dateTo,
    );

  const clearAllFilters = () => {
    setSearchTerm('');
    setSourceFilter('all');
    setNcTypeFilter('all');
    setAuditTypeFilter('all');
    setUserFilter('all');
    setDateFrom('');
    setDateTo('');
  };

  const openReport = async (row: Row) => {
    const key = `report-${row.source}-${row.nc_id}`;
    setReportBusy(key);
    try {
      const url = await fetchClosureFileBlob(row.source, row.nc_id, 'signed_copy');
      const win = window.open(url, '_blank');
      if (!win) toast.error('Popup blocked — please allow popups for this site');
      setTimeout(() => URL.revokeObjectURL(url), 60_000);
    } catch (err: any) {
      toast.error(err?.message ?? 'Failed to open report');
    } finally {
      setReportBusy(null);
    }
  };

  const openEvidence = async (row: Row, _file: Row['evidence_files'][number]) => {
    try {
      const url = await fetchClosureFileBlob(row.source, row.nc_id, 'signed_copy');
      const win = window.open(url, '_blank');
      if (!win) toast.error('Popup blocked');
      setTimeout(() => URL.revokeObjectURL(url), 60_000);
    } catch (err: any) {
      toast.error(err?.message ?? 'Failed to open evidence');
    }
  };

  const handleView = (row: Row) => {
    router.push(`/modules/previous-nc/edit?source=${row.source}&id=${row.nc_id}`);
  };

  // Super-admin only. Backend enforces it too; this is the UX layer.
  const handleDelete = async (row: Row) => {
    if (!isSuperAdmin) {
      toast.error('Only a super-admin can delete a final closure');
      return;
    }
    const code = `NC-${row.source}-${String(row.nc_id).padStart(6, '0')}`;
    const { confirmed, error: delErr } = await deleteWithConfirm(
      code,
      () => deleteFinalClosure(row.source, row.nc_id),
      {
        successMessage: 'Closure deleted — NC reopened.',
        errorMessage: 'Failed to delete closure.',
      },
    );
    if (confirmed && !delErr) refresh();
  };

  const thStyle: React.CSSProperties = {
    padding: '12px 10px',
    textAlign: 'left',
    fontSize: 10,
    fontWeight: 800,
    color: '#475569',
    textTransform: 'uppercase',
    letterSpacing: '0.06em',
    background: '#f8fafc',
    borderBottom: '1px solid #e2e8f0',
    whiteSpace: 'nowrap',
  };

  if (error)
    return (
      <div className={styles.errorContainer}>
        <div className={styles.errorIcon}>⚠️</div>
        <h3 className={styles.errorTitle}>Error</h3>
        <p className={styles.errorMessage}>{error}</p>
        <button className={styles.errorButton} onClick={refresh}>
          Retry
        </button>
      </div>
    );

  return (
    <div className={styles.container}>
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginBottom: 14,
          flexWrap: 'wrap',
          gap: 10,
        }}
      >
        <div>
          <h2
            style={{
              margin: 0,
              fontSize: 20,
              fontWeight: 800,
              color: '#0b1220',
              letterSpacing: '-0.01em',
            }}
          >
            Final Closures
          </h2>
          <p style={{ margin: '2px 0 0', fontSize: 12, color: '#64748b' }}>
            All finalized NC closures with verified evidence
          </p>
        </div>
      </div>

      <FinalClosureFilters
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        sourceFilter={sourceFilter}
        setSourceFilter={setSourceFilter}
        ncTypeFilter={ncTypeFilter}
        setNcTypeFilter={setNcTypeFilter}
        auditTypeFilter={auditTypeFilter}
        setAuditTypeFilter={setAuditTypeFilter}
        userFilter={userFilter}
        setUserFilter={setUserFilter}
        availableUsers={availableUsers}
        dateFrom={dateFrom}
        setDateFrom={setDateFrom}
        dateTo={dateTo}
        setDateTo={setDateTo}
        clearFilters={clearAllFilters}
        onRefresh={refresh}
      />

      {meta && (
        <div
          style={{
            padding: '10px 16px',
            background: 'linear-gradient(90deg, #f0fdfa 0%, #f8fafc 100%)',
            border: '1px solid #99f6e4',
            borderRadius: 8,
            marginBottom: 12,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            fontSize: 13,
            color: '#0f766e',
          }}
        >
          <span>
            ✅ Showing{' '}
            <strong>
              {(currentPage - 1) * itemsPerPage + 1}–
              {Math.min(currentPage * itemsPerPage, meta.total)}
            </strong>{' '}
            of <strong>{meta.total.toLocaleString()}</strong> final closures
          </span>
          {userFilter !== 'all' && (
            <span
              style={{
                fontSize: 11,
                fontWeight: 700,
                color: '#0f766e',
                background: '#fff',
                padding: '3px 10px',
                borderRadius: 99,
                border: '1px solid #99f6e4',
              }}
            >
              👤 Filtered by: {userFilter}
            </span>
          )}
        </div>
      )}

      <div className={styles.tableWrapper}>
        <table className={styles.table} style={{ width: '100%' }}>
          <thead>
            <tr>
              {COLUMNS.map((c) => (
                <th key={c} style={thStyle}>
                  {c}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr>
                <td colSpan={COLUMNS.length} style={{ textAlign: 'center', padding: 60 }}>
                  <EnterpriseLoader />
                </td>
              </tr>
            ) : rows.length === 0 ? (
              <tr>
                <td colSpan={COLUMNS.length} style={{ textAlign: 'center', padding: 60 }}>
                  <div style={{ fontSize: 36 }}>✅</div>
                  <h3 style={{ margin: '12px 0 4px', color: '#111827' }}>
                    No final closures found
                  </h3>
                  <p style={{ color: '#6b7280', margin: 0 }}>
                    {searchTerm ||
                    sourceFilter !== 'all' ||
                    ncTypeFilter !== 'all' ||
                    auditTypeFilter !== 'all' ||
                    userFilter !== 'all' ||
                    dateFrom ||
                    dateTo
                      ? 'No closures match your filters.'
                      : 'No NCs have been finalized yet.'}
                  </p>
                </td>
              </tr>
            ) : (
              rows.map((row, i) => (
                <FinalClosureRow
                  key={`${row.source}-${row.id}`}
                  row={row}
                  index={(currentPage - 1) * itemsPerPage + i + 1}
                  reportBusy={reportBusy}
                  isSuperAdmin={isSuperAdmin}
                  onView={handleView}
                  onReport={openReport}
                  onEvidence={openEvidence}
                  onDelete={handleDelete}
                />
              ))
            )}
          </tbody>
        </table>
      </div>

      {meta && (
        <Pagination
          currentPage={currentPage}
          setCurrentPage={setCurrentPage}
          totalPages={meta.totalPages}
          startIndex={(currentPage - 1) * itemsPerPage + 1}
          endIndex={Math.min(currentPage * itemsPerPage, meta.total)}
          sortedDataLength={meta.total}
          itemsPerPage={itemsPerPage}
          setItemsPerPage={(v) => {
            setCurrentPage(1);
            setItemsPerPage(v);
          }}
        />
      )}
    </div>
  );
}