"use client";

import React, { useEffect, useState, useCallback, useMemo } from "react";
import styles from "../commonstyle/dattabale.module.css";
import { TrainingFilters, type ScanFilter } from "./TrainingFilters";
import { Pagination } from "./Pagination";
import { EnterpriseLoader } from "./../../../../components/loader/loader";
import { deleteWithConfirm } from "./../../../../components/ConfirmDialog/ConfirmDialog";
import { useModulePermissions } from "@/lib/api/hooks/useModulePermissions";
import {
  getTrainingCertificatesPaginated,
  deleteTrainingCertificate,
  mapTrainingApiResponse,
} from "@/lib/api/training-certificate.api";
import type {
  TrainingRowType,
  TrainingStatus,
} from "@/lib/api/types/training-certificate.types";
import { TrainingRow } from "./TrainingRow";
import TrainingViewModal from "./Form/TrainingViewModal";
import TrainingQRModal from "./Form/TrainingQRModal";

interface TrainingTableProps {
  refreshFlag?: boolean;
  onEdit?: (id: number) => void;
}

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 TrainingTable({
  refreshFlag,
  onEdit,
}: TrainingTableProps) {
  // ── Data ────────────────────────────────────────────────────────────────
  const [data, setData] = useState<TrainingRowType[]>([]);
  const [total, setTotal] = useState(0);
  const [lastPage, setLastPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

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

  // ── Filters ─────────────────────────────────────────────────────────────
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<TrainingStatus | "all">(
    "all",
  );
  const [scanFilter, setScanFilter] = useState<ScanFilter>("all");

  const debouncedSearch = useDebounce(searchTerm, 400);

  // ── Modals ──────────────────────────────────────────────────────────────
  const [viewRow, setViewRow] = useState<TrainingRowType | null>(null);
  const [qrRow, setQrRow] = useState<TrainingRowType | null>(null);

  // ⚠️ Change to "training-certificates" once added to your permission config
  const { canPerform } = useModulePermissions("certificates");

  // ── Fetch page ──────────────────────────────────────────────────────────
  const fetchPage = useCallback((page: number, search: string) => {
    setLoading(true);
    getTrainingCertificatesPaginated({
      page,
      ...(search && { search }),
    })
      .then((res) => {
        setData(mapTrainingApiResponse(res.data, res.page, 10));
        setTotal(res.total);
        setLastPage(res.lastPage);
        setError(null);
      })
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  // ── 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 change → reset to page 1 ─────────────────────────────────────
  useEffect(() => {
    setCurrentPage(1);
    fetchPage(1, debouncedSearch);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedSearch]);

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

  // ── Client-side filters (status / scan) ─────────────────────────────────
  const filteredData = useMemo(() => {
    let result = [...data];
    if (statusFilter !== "all") {
      result = result.filter((r) => r.status === statusFilter);
    }
    if (scanFilter === "with_scan") {
      result = result.filter((r) => !!r.scan_pdf_url);
    } else if (scanFilter === "pending_scan") {
      result = result.filter((r) => !r.scan_pdf_url);
    }
    return result;
  }, [data, statusFilter, scanFilter]);

  const clearAllFilters = () => {
    setSearchTerm("");
    setStatusFilter("all");
    setScanFilter("all");
  };

  const hasActiveFilters =
    !!searchTerm || statusFilter !== "all" || scanFilter !== "all";

  // ── Actions ─────────────────────────────────────────────────────────────
  const handleDelete = async (row: TrainingRowType) => {
    const { confirmed, error: delErr } = await deleteWithConfirm(
      row.certificate_no,
      () => deleteTrainingCertificate(row.id),
      {
        successMessage: "Training certificate deleted.",
        errorMessage: "Failed to delete.",
      },
    );
    if (confirmed && !delErr) refresh();
  };

  const handleEdit = (row: TrainingRowType) => {
    onEdit?.(row.id);
  };

  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}>
      <TrainingViewModal
        row={viewRow}
        onClose={() => setViewRow(null)}
        onUpdated={refresh}
        canEdit={canPerform("edit")}
      />

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

      {/* ═══ Filters ═══ */}
      <TrainingFilters
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        statusFilter={statusFilter}
        setStatusFilter={setStatusFilter}
        scanFilter={scanFilter}
        setScanFilter={setScanFilter}
        clearFilters={clearAllFilters}
        onRefresh={refresh}
      />

      {/* 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> training 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 */}
      {loading ? (
        <EnterpriseLoader />
      ) : (
        <div className={styles.tableWrapper}>
          <table className={styles.table}>
            <thead>
              <tr>
                <th style={{ width: 50 }}>#</th>
                <th>Certificate No</th>
                <th>Participant</th>
                <th>Course</th>
                <th>Training Date</th>
                <th>Status</th>
                <th style={{ textAlign: "center" }}>Scan</th>
                <th>Batch</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filteredData.length === 0 ? (
                <tr>
                  <td
                    colSpan={9}
                    style={{
                      textAlign: "center",
                      padding: "40px 0",
                      color: "#94a3b8",
                    }}
                  >
                    No training certificates found.
                  </td>
                </tr>
              ) : (
                filteredData.map((row) => (
                  <TrainingRow
                    key={row.id}
                    row={row}
                    canEdit={canPerform("edit")}
                    canDelete={canPerform("delete")}
                    onView={(r) => setViewRow(r)}
                    onViewQR={(r) => setQrRow(r)}
                    onEdit={handleEdit}
                    onDelete={handleDelete}
                  />
                ))
              )}
            </tbody>
          </table>
        </div>
      )}

      {/* PAGINATION */}
      <Pagination
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        totalPages={lastPage}
        startIndex={(currentPage - 1) * itemsPerPage + 1}
        endIndex={currentPage * itemsPerPage}
        sortedDataLength={total}
        itemsPerPage={itemsPerPage}
        setItemsPerPage={setItemsPerPage}
      />
    </div>
  );
}