"use client";

import React, { useEffect, useState, useCallback, useMemo } from "react";
import dynamic from "next/dynamic";
import styles from "../../modules/commonstyle/dattabale.module.css";
import {
  CertificateFilters,
  type DocumentFilter,
  type DateFilter,
  type DomainFilter,
  type MonthFilter,
  type MonthScope,
} from "./CertificateFilters";
import { Pagination } from "./Pagination";
import { EnterpriseLoader } from "./../../../../components/loader/loader";
import {
  getCertificatesPaginated,
  deleteCertificate,
} from "@/lib/api/certificate.api";
import { deleteWithConfirm } from "./../../../../components/ConfirmDialog/ConfirmDialog";
import CertificateForm from "./Form/CertificateForm";
import CertificateViewModal from "./Form/Certificateviewmoda";
import CertificateQRModal from "./Form/CertificateQRModal";
import { mapCertificatesApiResponse } from "@/lib/api/mappers/certificate.mappers";
import type {
  CertificateRow,
  CertStatus,
  CertType,
} from "@/lib/api/types/certificate.types";

const CertificateRowFallback = dynamic(
  () => import("./CertificateRow").then((m) => m.CertificateRow),
  { ssr: false },
);

interface CertificateTableProps {
  refreshFlag?: boolean;
}

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

export default function CertificateTable({ refreshFlag }: CertificateTableProps) {
  // ── Data ────────────────────────────────────────────────────────────────
  const [data, setData] = useState<CertificateRow[]>([]);
  const [total, setTotal] = useState(0);
  const [lastPage, setLastPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [selectedRows, setSelectedRows] = useState<number[]>([]);
  const [expandedRows, setExpandedRows] = useState<number[]>([]);

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

  // ── Filters ─────────────────────────────────────────────────────────────
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<CertStatus | "all">("all");
  const [typeFilter, setTypeFilter] = useState<CertType | "all">("all");

  // ✅ Additional filters
  const [documentFilter, setDocumentFilter] = useState<DocumentFilter>("all");
  const [dateFilter, setDateFilter] = useState<DateFilter>("all");
  const [domainFilter, setDomainFilter] = useState<DomainFilter>("all");

  // ✅ NEW — Month filter
  const [monthFilter, setMonthFilter] = useState<MonthFilter>("all");
  const [monthScope, setMonthScope] = useState<MonthScope>("issue");

  const debouncedSearch = useDebounce(searchTerm, 400);

  // ── Modals ──────────────────────────────────────────────────────────────
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
  const [editingId, setEditingId] = useState<number | null>(null);
  const [viewRow, setViewRow] = useState<CertificateRow | null>(null);
  const [qrRow, setQrRow] = useState<CertificateRow | null>(null);

  const [showAnalytics, setShowAnalytics] = useState(false);

  // ── Fetch page ──────────────────────────────────────────────────────────
  const fetchPage = useCallback(
    (page: number, search: string) => {
      setLoading(true);
      setSelectedRows([]);
      setExpandedRows([]);
      getCertificatesPaginated({
        page,
        ...(search && { search }),
      })
        .then((res) => {
          let rows = mapCertificatesApiResponse(res.data);
          if (statusFilter !== "all")
            rows = rows.filter((r) => r.status === statusFilter);
          if (typeFilter !== "all")
            rows = rows.filter((r) => r.cert_type === typeFilter);
          setData(rows);
          setTotal(res.total);
          setLastPage(res.lastPage);
        })
        .catch((err) => setError(err.message))
        .finally(() => setLoading(false));
    },
    [statusFilter, typeFilter],
  );

  // ── Initial / refresh load ──────────────────────────────────────────────
  useEffect(() => {
    setCurrentPage(1);
    fetchPage(1, "");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [refreshFlag]);

  // ── Page change ─────────────────────────────────────────────────────────
  useEffect(() => {
    fetchPage(currentPage, debouncedSearch);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentPage]);

  // ── Search/filter change → reset to page 1 ──────────────────────────────
  useEffect(() => {
    setCurrentPage(1);
    fetchPage(1, debouncedSearch);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedSearch, statusFilter, typeFilter]);

  const refresh = () => fetchPage(currentPage, debouncedSearch);

  // ✅ Apply client-side filters (document/date/domain/month)
  const filteredData = useMemo(() => {
    let result = [...data];

    // Document filter
    if (documentFilter !== "all") {
      if (documentFilter === "draft_only") {
        result = result.filter((r) => !r.scan_pdf_url);
      } else if (documentFilter === "final_only") {
        result = result.filter((r) => !!r.scan_pdf_url);
      } else if (documentFilter === "pending_issue") {
        result = result.filter((r) => r.status === "pending_scan");
      }
    }

    // Date filter (smart presets)
    if (dateFilter !== "all") {
      const now = new Date();
      const thisMonth = now.getMonth();
      const thisYear = now.getFullYear();

      result = result.filter((r) => {
        if (dateFilter === "expiring_this_month") {
          if (!r.expire_date) return false;
          const exp = new Date(r.expire_date);
          return (
            exp.getMonth() === thisMonth && exp.getFullYear() === thisYear
          );
        }
        if (dateFilter === "expiring_3_months") {
          if (!r.expire_date) return false;
          const exp = new Date(r.expire_date);
          const threeMonthsFromNow = new Date(now);
          threeMonthsFromNow.setMonth(now.getMonth() + 3);
          return exp >= now && exp <= threeMonthsFromNow;
        }
        if (dateFilter === "issued_this_month") {
          if (!r.issue_date) return false;
          const iss = new Date(r.issue_date);
          return (
            iss.getMonth() === thisMonth && iss.getFullYear() === thisYear
          );
        }
        if (dateFilter === "issued_this_year") {
          if (!r.issue_date) return false;
          const iss = new Date(r.issue_date);
          return iss.getFullYear() === thisYear;
        }
        return true;
      });
    }

    // ✅ NEW — Month filter (Jan-Dec)
    if (monthFilter !== "all") {
      const targetMonth = parseInt(monthFilter, 10) - 1; // 0-indexed

      result = result.filter((r) => {
        const dateField =
          monthScope === "issue" ? r.issue_date : r.expire_date;
        if (!dateField) return false;
        const d = new Date(dateField);
        return d.getMonth() === targetMonth;
      });
    }

    // Domain filter
    if (domainFilter !== "all") {
      result = result.filter((r) => r.verification_domain === domainFilter);
    }

    return result;
  }, [data, documentFilter, dateFilter, domainFilter, monthFilter, monthScope]);

  const clearAllFilters = () => {
    setSearchTerm("");
    setStatusFilter("all");
    setTypeFilter("all");
    setDocumentFilter("all");
    setDateFilter("all");
    setDomainFilter("all");
    // ✅ NEW
    setMonthFilter("all");
    setMonthScope("issue");
  };

  const handleDelete = async (row: CertificateRow) => {
    const { confirmed, error: delErr } = await deleteWithConfirm(
      row.certificate_no,
      () => deleteCertificate(row.id),
      {
        successMessage: "Certificate deleted.",
        errorMessage: "Failed to delete.",
      },
    );
    if (confirmed && !delErr) refresh();
  };

  const handleEdit = (row: CertificateRow) => {
    setEditingId(row.id);
    setIsEditModalOpen(true);
  };

  const handleView = (row: CertificateRow) => {
    setViewRow(row);
  };

  const handleViewQR = (row: CertificateRow) => {
    setQrRow(row);
  };

  // Check if any filter is active
  const hasActiveFilters =
    !!searchTerm ||
    statusFilter !== "all" ||
    typeFilter !== "all" ||
    documentFilter !== "all" ||
    dateFilter !== "all" ||
    domainFilter !== "all" ||
    monthFilter !== "all";

  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}>
      <CertificateViewModal
        row={viewRow}
        onClose={() => setViewRow(null)}
      />

      <CertificateQRModal
        row={qrRow}
        onClose={() => setQrRow(null)}
      />

      {/* ═══ Filters ═══ */}
      <CertificateFilters
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        statusFilter={statusFilter}
        setStatusFilter={setStatusFilter}
        typeFilter={typeFilter}
        setTypeFilter={setTypeFilter}
        clearFilters={clearAllFilters}
        onRefresh={refresh}
        showAnalytics={showAnalytics}
        onAnalyticsToggle={() => setShowAnalytics((p) => !p)}
        documentFilter={documentFilter}
        setDocumentFilter={setDocumentFilter}
        dateFilter={dateFilter}
        setDateFilter={setDateFilter}
        domainFilter={domainFilter}
        setDomainFilter={setDomainFilter}
        // ✅ NEW
        monthFilter={monthFilter}
        setMonthFilter={setMonthFilter}
        monthScope={monthScope}
        setMonthScope={setMonthScope}
      />

      {showAnalytics && (
        <CertificateAnalytics total={total} data={filteredData} />
      )}

      {/* Record count */}
      <div
        style={{
          padding: "10px 16px",
          backgroundColor: "#f0fdfa",
          border: "1px solid #99f6e4",
          borderRadius: 8,
          marginBottom: 12,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          fontSize: 13,
          color: "#0f766e",
        }}
      >
        <span>
          📊 Showing{" "}
          <strong>
            {filteredData.length > 0 ? (currentPage - 1) * itemsPerPage + 1 : 0}–
            {(currentPage - 1) * itemsPerPage + filteredData.length}
          </strong>{" "}
          of <strong>{total.toLocaleString()}</strong> certificates
          {hasActiveFilters && (
            <span style={{ marginLeft: 8, color: "#9ca3af" }}>(filtered)</span>
          )}
        </span>
        {hasActiveFilters && (
          <button
            onClick={clearAllFilters}
            style={{
              background: "none",
              border: "none",
              color: "#0f766e",
              cursor: "pointer",
              textDecoration: "underline",
              fontSize: 13,
            }}
          >
            Clear filters
          </button>
        )}
      </div>

      {/* TABLE */}
      <div className={styles.tableWrapper}>
        <table className={styles.table}>
          <thead>
            <tr>
              <th className={styles.expandCol}></th>
              <th className={styles.checkboxCol}>
                <input
                  type="checkbox"
                  className={styles.checkbox}
                  checked={
                    filteredData.length > 0 &&
                    filteredData.every((r) => selectedRows.includes(r.sno))
                  }
                  onChange={(e) =>
                    setSelectedRows(
                      e.target.checked ? filteredData.map((r) => r.sno) : [],
                    )
                  }
                />
              </th>
              <th className={styles.th}>Cert No</th>
              <th className={styles.th}>Company</th>
              <th className={styles.th}>Standard</th>
              <th className={styles.th}>Type</th>
              <th className={styles.th}>Status</th>
              <th className={styles.th}>Issue</th>
              <th className={styles.th}>Expire</th>
              <th className={styles.actionsCol}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr>
                <td
                  colSpan={10}
                  style={{
                    textAlign: "center",
                    padding: "60px",
                    color: "#9ca3af",
                  }}
                >
                  <div
                    style={{
                      display: "inline-block",
                      width: 28,
                      height: 28,
                      border: "3px solid #e5e7eb",
                      borderTopColor: "#14b8a6",
                      borderRadius: "50%",
                      animation: "spin 0.7s linear infinite",
                      marginBottom: 10,
                    }}
                  />
                  <p style={{ margin: 0 }}>Loading...</p>
                </td>
              </tr>
            ) : filteredData.length > 0 ? (
              filteredData.map((row) => (
                <CertificateRowFallback
                  key={row.sno}
                  row={row}
                  isExpanded={expandedRows.includes(row.sno)}
                  toggleRowExpand={(id) =>
                    setExpandedRows((p) =>
                      p.includes(id) ? p.filter((r) => r !== id) : [...p, id],
                    )
                  }
                  isSelected={selectedRows.includes(row.sno)}
                  handleRowSelect={(id, checked) =>
                    setSelectedRows((p) =>
                      checked ? [...p, id] : p.filter((r) => r !== id),
                    )
                  }
                  onEdit={handleEdit}
                  onDelete={handleDelete}
                  onView={handleView}
                  onViewQR={handleViewQR}
                />
              ))
            ) : (
              <tr>
                <td
                  colSpan={10}
                  style={{ textAlign: "center", padding: "60px" }}
                >
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      alignItems: "center",
                      gap: 12,
                    }}
                  >
                    <div style={{ fontSize: 36 }}>📜</div>
                    <h3 style={{ margin: 0, color: "#111827" }}>
                      No Certificates Found
                    </h3>
                    <p style={{ color: "#6b7280", margin: 0 }}>
                      {hasActiveFilters
                        ? "No certificates match your filters."
                        : "Get started by issuing a new certificate."}
                    </p>
                  </div>
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

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

      {/* Edit modal */}
      <CertificateForm
        isOpen={isEditModalOpen}
        onClose={() => {
          setIsEditModalOpen(false);
          setEditingId(null);
        }}
        refreshData={refresh}
        editId={editingId}
      />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════
// Inline CertificateAnalytics component (UNCHANGED)
// ═══════════════════════════════════════════════════════════════════════

interface AnalyticsProps {
  total: number;
  data: CertificateRow[];
}

function CertificateAnalytics({ total, data }: AnalyticsProps) {
  const stats = React.useMemo(() => {
    let active = 0;
    let expired = 0;
    let pending = 0;
    let revoked = 0;
    let initial = 0;
    let surveillance = 0;
    let recert = 0;

    data.forEach((row) => {
      const s = (row.status || "").toLowerCase();
      const t = (row.cert_type || "").toUpperCase();

      if (s === "active") active++;
      else if (s === "expired") expired++;
      else if (s === "pending_scan") pending++;
      else if (s === "revoked") revoked++;

      if (t === "INITIAL") initial++;
      else if (t === "SURVEILLANCE") surveillance++;
      else if (t === "RECERTIFICATION") recert++;
    });

    return { active, expired, pending, revoked, initial, surveillance, recert };
  }, [data]);

  const cards = [
    { label: "Total", value: total.toLocaleString(), gradient: "linear-gradient(135deg, #1e40af 0%, #3b82f6 100%)", icon: "📊" },
    { label: "Active", value: stats.active.toLocaleString(), gradient: "linear-gradient(135deg, #166534 0%, #22c55e 100%)", icon: "✅" },
    { label: "Pending Scan", value: stats.pending.toLocaleString(), gradient: "linear-gradient(135deg, #b45309 0%, #f59e0b 100%)", icon: "⏳" },
    { label: "Expired", value: stats.expired.toLocaleString(), gradient: "linear-gradient(135deg, #b91c1c 0%, #ef4444 100%)", icon: "⚠️" },
    { label: "Initial", value: stats.initial.toLocaleString(), gradient: "linear-gradient(135deg, #6366f1 0%, #818cf8 100%)", icon: "🆕" },
    { label: "Surveillance", value: stats.surveillance.toLocaleString(), gradient: "linear-gradient(135deg, #0891b2 0%, #06b6d4 100%)", icon: "🔍" },
    { label: "Recertification", value: stats.recert.toLocaleString(), gradient: "linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%)", icon: "🔄" },
    { label: "Revoked", value: stats.revoked.toLocaleString(), gradient: "linear-gradient(135deg, #475569 0%, #64748b 100%)", icon: "❌" },
  ];

  return (
    <div
      style={{
        background: "#f4f6f9",
        border: "1px solid #e5e7eb",
        borderRadius: 14,
        padding: "18px 20px 20px",
        marginBottom: 16,
        animation: "certAnalyticsSlide 220ms ease-out",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          marginBottom: 14,
          color: "#0f766e",
        }}
      >
        <span style={{ fontSize: 18 }}>📊</span>
        <h3 style={{ margin: 0, fontSize: 15, fontWeight: 800, color: "#111827" }}>
          Certificate Analytics
        </h3>
        <span style={{ marginLeft: "auto", fontSize: 11, color: "#9ca3af", fontWeight: 500 }}>
          📌 Stats based on current page
        </span>
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
          gap: 12,
        }}
      >
        {cards.map((card) => (
          <div
            key={card.label}
            style={{
              background: card.gradient,
              color: "#fff",
              padding: "14px 16px",
              borderRadius: 12,
              display: "flex",
              alignItems: "center",
              gap: 12,
              boxShadow: "0 4px 14px rgba(0,0,0,0.10)",
              minWidth: 0,
            }}
          >
            <div
              style={{
                width: 40,
                height: 40,
                background: "rgba(255,255,255,0.18)",
                borderRadius: 10,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                flexShrink: 0,
                fontSize: 20,
              }}
            >
              {card.icon}
            </div>
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: 2,
                minWidth: 0,
                flex: 1,
              }}
            >
              <span
                style={{
                  fontSize: 11,
                  fontWeight: 700,
                  opacity: 0.92,
                  textTransform: "uppercase",
                  letterSpacing: 0.5,
                }}
              >
                {card.label}
              </span>
              <span
                style={{
                  fontSize: 20,
                  fontWeight: 800,
                  fontFamily: "'IBM Plex Mono', monospace",
                  lineHeight: 1.1,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                }}
              >
                {card.value}
              </span>
            </div>
          </div>
        ))}
      </div>

      <style>{`
        @keyframes certAnalyticsSlide {
          from { opacity: 0; transform: translateY(-8px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}