"use client";

import React, { useEffect, useState, useCallback, useMemo } from "react";
import dynamic from "next/dynamic";
import toast from "react-hot-toast";
import styles from "../../modules/commonstyle/dattabale.module.css";
import {
  AuditRequestFilters,
  type DatePreset,
  type SubmitterOption, // ✅ same shape as Inquiry module
} from "./AuditRequestFilters";
import { Pagination } from "./Pagination";
import {
  getAuditRequestsPaginated,
  getAuditRequestsAnalytics,
  getAuditRequest,
} from "@/lib/api/audit-request.api";
import { fetchApi } from "@/lib/api/http";
import { mapAuditRequestsApiResponse } from "@/lib/api/mappers/audit-request.mappers";
// import AuditRequestForm from "./Form/AuditRequestForm";
// import AuditRequestForm from "./Form/AuditRequestForm"; // REMOVED
import AuditRequestDetailModal from "./Modals/AuditRequestDetailModal";
import ScheduleRequestModal from "./Modals/ScheduleRequestModal";
import RejectRequestModal from "./Modals/RejectRequestModal";
// 🆕 Proceed to Inquiry
import ProceedToInquiryModal from "./Modals/ProceedToInquiryModal";
import type {
  AuditRequest,
  AuditRequestTableRow as AuditRequestTableRowType,
  AuditRequestStatus,
  AuditRequestAnalytics,
} from "@/lib/api/types/audit-request.types";
import { deleteWithConfirm } from "./../../../../components/ConfirmDialog/ConfirmDialog";
import { deleteAuditRequest } from "@/lib/api/audit-request.api";
// 🆕 Proceed guard for the bulk bar
import { canProceedRequest } from "@/lib/api/mappers/audit-request.mappers";

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

interface Props {
  refreshFlag?: boolean;
  onEditClick?: (row: AuditRequestTableRowType) => void;
}

// ─── API base (for /modules + /user-permissions + /users) ─────────────────
const API_BASE_URL =
  process.env.NEXT_PUBLIC_API_URL || "http://localhost:3007/api";

// ─── Debounce hook ────────────────────────────────────────────────────────
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;
}

// ─── User info from JWT ───────────────────────────────────────────────────
function getCurrentUserInfo(): {
  id: number | null;
  roleNames: string[];
} {
  if (typeof window === "undefined") return { id: null, roleNames: [] };
  try {
    const token =
      localStorage.getItem("token") ||
      localStorage.getItem("accessToken") ||
      localStorage.getItem("access_token");
    if (token && token.split(".").length === 3) {
      const payload = JSON.parse(atob(token.split(".")[1]));
      const id =
        payload?.id ?? payload?.userId ?? payload?.user_id ?? payload?.sub;
      const roleNames: string[] = Array.isArray(payload?.roleNames)
        ? payload.roleNames
        : [];
      return { id: id != null ? Number(id) : null, roleNames };
    }
  } catch {
    // ignore
  }
  return { id: null, roleNames: [] };
}

// ─── Simple KPI tile (inline — matches audit-schedules pattern) ───────────
const KpiCard = ({
  label,
  value,
  gradient,
}: {
  label: string;
  value: number;
  gradient: string;
}) => (
  <div
    style={{
      padding: "14px 16px",
      borderRadius: 10,
      color: "white",
      background: `linear-gradient(135deg,${gradient})`,
      boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
    }}
  >
    <div style={{ fontSize: 11, opacity: 0.85, fontWeight: 600 }}>{label}</div>
    <div
      style={{
        fontSize: 28,
        fontWeight: 800,
        marginTop: 4,
        fontFamily: "'IBM Plex Mono', monospace",
      }}
    >
      {value ?? 0}
    </div>
  </div>
);

export default function AuditRequestTable({ refreshFlag, onEditClick }: Props) {
  // ── Data ─────────────────────────────────────────────────────────────────
  const [data, setData] = useState<AuditRequestTableRowType[]>([]);
  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[]>([]);

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

  // ── Filters ──────────────────────────────────────────────────────────────
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<AuditRequestStatus | "all">(
    "all",
  );
  const [datePreset, setDatePreset] = useState<DatePreset>("all");

  // ✅ NEW — month / year / custom-range filters
  const [monthFilter, setMonthFilter] = useState<number | "all">("all");
  const [yearFilter, setYearFilter] = useState<number | "all">("all");
  const [customFrom, setCustomFrom] = useState("");
  const [customTo, setCustomTo] = useState("");

  // ✅ NEW — User filter state (SAME as Inquiry module)
  const [userFilter, setUserFilter] = useState("all");
  const [submitters, setSubmitters] = useState<SubmitterOption[]>([]);

  // 🆕 Standards lookup (id → name) for the Standards column badges
  const [standardsMap, setStandardsMap] = useState<Record<number, string>>({});
  useEffect(() => {
    fetchApi<any>(`${API_BASE_URL}/standards`)
      .then((res: any) => {
        const list = Array.isArray(res) ? res : (res?.data ?? []);
        const map: Record<number, string> = {};
        for (const st of list) map[st.id] = st.name ?? st.title ?? `#${st.id}`;
        setStandardsMap(map);
      })
      .catch(() => setStandardsMap({}));
  }, []);

  const debouncedSearch = useDebounce(searchTerm, 400);

  // ── Analytics ────────────────────────────────────────────────────────────
  const [showAnalytics, setShowAnalytics] = useState(false);
  const [analytics, setAnalytics] = useState<AuditRequestAnalytics>({
    submitted: 0,
    under_review: 0,
    scheduled: 0,
    completed: 0,
    rejected: 0,
    cancelled: 0,
    total: 0,
  });

  // ── Role detection ───────────────────────────────────────────────────────
  const { id: currentUserId, roleNames } = useMemo(getCurrentUserInfo, []);
  const isMarketing = roleNames.includes("Marketing");
  const isCoordinator = roleNames.includes("Coordinator");
  const isAdmin =
    roleNames.includes("Super-admin") || roleNames.includes("scheme");

  // Marketing can edit their OWN requests; admins can edit any
  // Coordinator/admin can schedule and reject
  const canScheduleAction = isCoordinator || isAdmin;

  // ✅ NEW — Dynamic permission system (same pattern as InquiryTable /
  // AuditScheduleTable). moduleConfig is the `modules` row for slug
  // 'audit-requests'; permittedActions is the Set of action keys allowed.
  const [moduleConfig, setModuleConfig] = useState<any>(null);
  const [userPermissions, setUserPermissions] = useState<any[]>([]);
  const [permissionsReady, setPermissionsReady] = useState(false);

  // ── Modals state ────────────────────────────────────────────────────────
  const [editingId, setEditingId] = useState<number | null>(null);
   const [detailRequestId, setDetailRequestId] = useState<number | null>(null);
  const [detailRefreshFlag, setDetailRefreshFlag] = useState(0);
  const [scheduleTarget, setScheduleTarget] = useState<AuditRequest | null>(null);
  const [rejectTarget, setRejectTarget] = useState<AuditRequest | null>(null);
  const [loadingAction, setLoadingAction] = useState(false);
  // 🆕 Proceed to Inquiry modal — single (full request) OR bulk (id list)
  const [proceedTarget, setProceedTarget] = useState<AuditRequest | null>(null);
  const [proceedBulkIds, setProceedBulkIds] = useState<number[] | null>(null);

  // ✅ NEW — Load module config (button_config) for slug 'audit-requests'.
  const fetchModuleConfig = useCallback(async (): Promise<void> => {
    try {
      const response = await fetchApi<any>(`${API_BASE_URL}/modules`);
      const list = Array.isArray(response)
        ? response
        : response?.data
          ? Array.isArray(response.data)
            ? response.data
            : [response.data]
          : [response];
      const mod = list.find(
        (m: any) =>
          m.slug === "audit-requests" || m.name === "audit-requests",
      );
      if (mod) setModuleConfig(mod);
    } catch {
      // silent — falls through to permittedActions default
    }
  }, []);

  // ✅ NEW — Load the current user's permissions.
  const fetchUserPermissions = useCallback(async (): Promise<void> => {
    try {
      let userId: any = null;
      if (typeof window !== "undefined") {
        try {
          const s = localStorage.getItem("user");
          if (s) {
            const p = JSON.parse(s);
            userId = p?.id || p?.userId || p?.user_id;
          }
        } catch { }
        if (!userId) {
          try {
            const t =
              localStorage.getItem("token") ||
              localStorage.getItem("access_token");
            if (t) {
              const p = JSON.parse(atob(t.split(".")[1]));
              userId = p?.id || p?.userId || p?.sub;
            }
          } catch { }
        }
      }
      if (!userId) {
        setUserPermissions([]);
        return;
      }
      const res = await fetchApi<any>(
        `${API_BASE_URL}/user-permissions/user/${userId}`,
      );
      const list = Array.isArray(res)
        ? res
        : res?.data
          ? Array.isArray(res.data)
            ? res.data
            : [res.data]
          : (res?.permissions ?? []);
      setUserPermissions(list);
    } catch {
      setUserPermissions([]);
    }
  }, []);

  // ✅ NEW — Set of action keys the user is permitted to use on this module.
  // Fails OPEN when module config is unavailable so admins are never broken;
  // the backend is the real lock.
  const permittedActions = useMemo((): Set<string> => {
    if (!moduleConfig) {
      return new Set([
        "view",
        "edit",
        "create",
        "schedule",
        "reject",
        "delete",
        "review",
        "proceed", // 🆕 Proceed to Inquiry
      ]);
    }
    const a = new Set<string>();
    for (const up of userPermissions) {
      const action = up.permission?.action ?? up.action;
      const moduleId =
        up.permission?.module?.id ??
        up.permission?.module_id ??
        up.module?.id ??
        up.module_id;
      if (!action) continue;
      if (String(moduleId) === String(moduleConfig.id)) {
        a.add(action);
      }
    }
    a.add("view"); // view is implicit — page loaded ⇒ can view
    return a;
  }, [moduleConfig, userPermissions]);

  // ✅ NEW — Detect if current user may filter by user — SAME logic as the
  // Inquiry module: super admin ids (1, 8) OR scheme role.
  const canFilterByUser = useMemo(() => {
    const uid = Number(currentUserId);
    if (uid === 1 || uid === 8) return true;

    // JWT roles (audit-requests page already decodes these)
    if (isAdmin) return true;

    // Check scheme role via permissions (same as InquiryTable)
    for (const up of userPermissions) {
      const roleName = (
        up.role?.name ??
        up.permission?.role?.name ??
        ""
      ).toLowerCase();
      if (roleName === "scheme") return true;
    }
    return false;
  }, [currentUserId, isAdmin, userPermissions]);

  // ✅ NEW — Fetch users list directly from /users endpoint
  // (SAME as Inquiry module — runs only for super admin / scheme)
  useEffect(() => {
    if (!canFilterByUser) return;

    fetchApi<any>(`${API_BASE_URL}/users`)
      .then((res) => {
        // Handle different response shapes: array, { data: [...] },
        // or { data: { data: [...] } }
        const raw = Array.isArray(res)
          ? res
          : Array.isArray(res?.data)
            ? res.data
            : Array.isArray(res?.data?.data)
              ? res.data.data
              : [];

        // Map to the shape our dropdown expects
        const list = raw.map((u: any) => ({
          id: u.id,
          firstName: u.firstName ?? u.first_name ?? "",
          lastName: u.lastName ?? u.last_name ?? "",
          email: u.email ?? "",
        }));

        // Sort by firstName for nice display
        list.sort((a: any, b: any) =>
          (a.firstName || a.email).localeCompare(b.firstName || b.email),
        );

        setSubmitters(list);
        console.log("👥 [AUDIT-REQ] Users loaded:", list.length, list);
      })
      .catch((err) => {
        console.error("👥 [AUDIT-REQ] Users fetch failed:", err);
        setSubmitters([]);
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [canFilterByUser]);

  // ── Date preset → date_from / date_to ────────────────────────────────────
  const datePresetToRange = useCallback(
    (preset: DatePreset): { date_from?: string; date_to?: string } => {
      const today = new Date();
      const toISO = (d: Date) => d.toISOString().split("T")[0];

      if (preset === "today") {
        return { date_from: toISO(today), date_to: toISO(today) };
      }
      if (preset === "this_week") {
        const day = today.getDay();
        const monday = new Date(today);
        monday.setDate(today.getDate() - (day === 0 ? 6 : day - 1));
        const sunday = new Date(monday);
        sunday.setDate(monday.getDate() + 6);
        return { date_from: toISO(monday), date_to: toISO(sunday) };
      }
      if (preset === "this_month") {
        const start = new Date(today.getFullYear(), today.getMonth(), 1);
        const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
        return { date_from: toISO(start), date_to: toISO(end) };
      }
      if (preset === "next_month") {
        const start = new Date(today.getFullYear(), today.getMonth() + 1, 1);
        const end = new Date(today.getFullYear(), today.getMonth() + 2, 0);
        return { date_from: toISO(start), date_to: toISO(end) };
      }
      if (preset === "past") {
        const yesterday = new Date(today);
        yesterday.setDate(today.getDate() - 1);
        return { date_to: toISO(yesterday) };
      }
      return {};
    },
    [],
  );

  // ✅ NEW — month/year/custom-range → date_from / date_to.
  // Custom from/to wins if set; otherwise derive a range from month+year.
  const extraDateRange = useCallback(
    (): { date_from?: string; date_to?: string } => {
      const toISO = (d: Date) => d.toISOString().split("T")[0];

      // Custom range takes priority
      if (customFrom || customTo) {
        return {
          ...(customFrom && { date_from: customFrom }),
          ...(customTo && { date_to: customTo }),
        };
      }

      // Month + Year combos
      const now = new Date();
      const y = yearFilter !== "all" ? yearFilter : now.getFullYear();

      if (monthFilter !== "all" && yearFilter !== "all") {
        const start = new Date(y, monthFilter, 1);
        const end = new Date(y, monthFilter + 1, 0);
        return { date_from: toISO(start), date_to: toISO(end) };
      }
      if (monthFilter !== "all" && yearFilter === "all") {
        // month in the current year
        const start = new Date(now.getFullYear(), monthFilter, 1);
        const end = new Date(now.getFullYear(), monthFilter + 1, 0);
        return { date_from: toISO(start), date_to: toISO(end) };
      }
      if (monthFilter === "all" && yearFilter !== "all") {
        // whole year
        const start = new Date(y, 0, 1);
        const end = new Date(y, 11, 31);
        return { date_from: toISO(start), date_to: toISO(end) };
      }
      return {};
    },
    [monthFilter, yearFilter, customFrom, customTo],
  );

  // ── Fetch page ───────────────────────────────────────────────────────────
  // ✅ UPDATED — sends requested_by_id when a user is selected
  // (same pattern as InquiryTable's submitted_by_id)
  const fetchPage = useCallback(
    (page: number, search: string) => {
      setLoading(true);
      setSelectedRows([]);
      const presetRange = datePresetToRange(datePreset);
      const extraRange = extraDateRange();
      // extraRange (custom/month/year) overrides the preset range when present
      const range = { ...presetRange, ...extraRange };

      getAuditRequestsPaginated({
        page,
        limit: itemsPerPage,
        ...(search && { search }),
        ...(statusFilter !== "all" && { status: statusFilter }),
        ...range,
        ...(userFilter !== "all" && { requested_by_id: Number(userFilter) }), // ✅ NEW

      })
        .then((res) => {
          setData(mapAuditRequestsApiResponse(res.data));
          setTotal(res.total);
          setLastPage(res.lastPage);
          setError(null);
        })
        .catch((err) => setError(err?.message || "Failed to load"))
        .finally(() => setLoading(false));
    },
    [
      statusFilter,
      datePreset,
      itemsPerPage,
      datePresetToRange,
      extraDateRange,
      userFilter, // ✅ NEW
    ],
  );

  // ── Fetch analytics ──────────────────────────────────────────────────────
  const fetchAnalytics = useCallback(() => {
    getAuditRequestsAnalytics()
      .then((res) => setAnalytics(res))
      .catch(() => {
        /* silent — analytics is non-critical */
      });
  }, []);

  // ✅ NEW — Load module config + permissions once on mount.
  useEffect(() => {
    const initPermissions = async () => {
      await Promise.all([fetchModuleConfig(), fetchUserPermissions()]);
      setPermissionsReady(true);
    };
    initPermissions();
  }, [fetchModuleConfig, fetchUserPermissions]);

  // ── Initial / refresh load ───────────────────────────────────────────────
  useEffect(() => {
    setCurrentPage(1);
    fetchPage(1, "");
    fetchAnalytics();
    // 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 ───────────────────────────────
  // ✅ UPDATED — userFilter included (same as InquiryTable)
  useEffect(() => {
    setCurrentPage(1);
    fetchPage(1, debouncedSearch);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedSearch, statusFilter, datePreset, itemsPerPage,
    monthFilter, yearFilter, customFrom, customTo, userFilter]);

  const refresh = () => {
    fetchPage(currentPage, debouncedSearch);
    fetchAnalytics();
  };

  // ✅ Client-side safety net — if the backend doesn't support the
  // requested_by_id param yet, this still filters the visible page using
  // row.raw.requested_by_id.
  const visibleData = useMemo(() => {
    if (userFilter === "all") return data;
    const uid = Number(userFilter);
    return data.filter((r) => Number(r.raw?.requested_by_id) === uid);
  }, [data, userFilter]);

  // ── Filter helpers ───────────────────────────────────────────────────────
  const hasActiveFilters =
    statusFilter !== "all" ||
    datePreset !== "all" ||
    !!debouncedSearch ||
    monthFilter !== "all" ||
    yearFilter !== "all" ||
    !!customFrom ||
    !!customTo ||
    userFilter !== "all"; // ✅ NEW

  // ✅ UPDATED — clear also resets userFilter
  const clearAllFilters = () => {
    setStatusFilter("all");
    setDatePreset("all");
    setSearchTerm("");
    setMonthFilter("all");
    setYearFilter("all");
    setCustomFrom("");
    setCustomTo("");
    setUserFilter("all");
  };

  // ── Action handlers ─────────────────────────────────────────────────────
  const handleView = (row: AuditRequestTableRowType) => {
    setDetailRequestId(row.id);
  };

   const handleEdit = (row: AuditRequestTableRowType) => {
    if (currentUserId !== row.raw.requested_by_id && !isAdmin) {
      toast.error("You can only edit your own requests.");
      return;
    }
    onEditClick?.(row);
  };

  const handleSchedule = async (row: AuditRequestTableRowType) => {
    // Fetch fresh full request before opening modal (avoid stale data)
    setLoadingAction(true);
    try {
      const full = await getAuditRequest(row.id);
      setScheduleTarget(full);
    } catch (err: any) {
      toast.error(err?.message || "Failed to load request");
    } finally {
      setLoadingAction(false);
    }
  };

  const handleReject = async (row: AuditRequestTableRowType) => {
    // Fetch fresh full request before opening modal
    setLoadingAction(true);
    try {
      const full = await getAuditRequest(row.id);
      setRejectTarget(full);
    } catch (err: any) {
      toast.error(err?.message || "Failed to load request");
    } finally {
      setLoadingAction(false);
    }
  };

  // 🆕 Proceed to Inquiry — single row. Fetch fresh full request first so
  // the popup pre-fills from live data (scope, prev cert, schedule row).
  const handleProceed = async (row: AuditRequestTableRowType) => {
    setLoadingAction(true);
    try {
      const full = await getAuditRequest(row.id);
      if ((full as any).inquiry_id) {
        toast.error(
          `Request #${row.id} is already linked to inquiry #${(full as any).inquiry_id}`,
        );
        refresh();
        return;
      }
      setProceedTarget(full);
    } catch (err: any) {
      toast.error(err?.message || "Failed to load request");
    } finally {
      setLoadingAction(false);
    }
  };

  // 🆕 Proceed to Inquiry — bulk (checkbox selection). Filters out rows the
  // backend would reject (already linked / rejected / cancelled) up-front.
  const handleBulkProceed = () => {
    const selected = visibleData.filter((r) => selectedRows.includes(r.sno));
    const eligible = selected.filter((r) =>
      canProceedRequest(r.status, r.inquiry_id),
    );
    const skipped = selected.length - eligible.length;
    if (!eligible.length) {
      toast.error(
        "None of the selected requests can be proceeded (already linked, rejected, or cancelled).",
      );
      return;
    }
    if (skipped > 0) {
      toast(`${skipped} selected request(s) skipped — already linked or blocked`, {
        icon: "⚠️",
      });
    }
    if (eligible.length === 1) {
      // single eligible → use the richer pre-filled single popup
      handleProceed(eligible[0]);
      return;
    }
    setProceedBulkIds(eligible.map((r) => r.id));
  };

  const handleDelete = async (row: AuditRequestTableRowType) => {
    const { confirmed, error: delErr } = await deleteWithConfirm(
      `Audit request #${row.id} (${row.company_name})`,
      () => deleteAuditRequest(row.id),
      {
        successMessage: "Audit request deleted.",
        errorMessage: "Failed to delete audit request.",
      },
    );
    if (confirmed && !delErr) {
      refresh();
      setDetailRefreshFlag((p) => p + 1);
    }
  };

  // Can current user edit this row? (used by row to gate edit button)
  // ✅ Now also requires the 'edit' permission for the module.
  const canUserEditRow = (row: AuditRequestTableRowType): boolean => {
    if (!permittedActions.has("edit")) return false;
    if (isAdmin) return true;
    if (isMarketing && row.raw.requested_by_id === currentUserId) return true;
    return false;
  };

  // ── Render ───────────────────────────────────────────────────────────────
  return (
    <div className={styles.container}>
      <AuditRequestFilters
        searchTerm={searchTerm}
        setSearchTerm={setSearchTerm}
        statusFilter={statusFilter}
        setStatusFilter={setStatusFilter}
        datePreset={datePreset}
        setDatePreset={setDatePreset}
        clearFilters={clearAllFilters}
        onRefresh={refresh}
        showAnalytics={showAnalytics}
        onAnalyticsToggle={() => setShowAnalytics((p) => !p)}
        monthFilter={monthFilter}
        setMonthFilter={setMonthFilter}
        yearFilter={yearFilter}
        setYearFilter={setYearFilter}
        customFrom={customFrom}
        setCustomFrom={setCustomFrom}
        customTo={customTo}
        setCustomTo={setCustomTo}
        /* ✅ NEW — User filter props (SAME as Inquiry module) */
        showUserFilter={canFilterByUser}
        userFilter={userFilter}
        setUserFilter={setUserFilter}
        submitters={submitters}
      />

      {/* Analytics cards */}
      {showAnalytics && (
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
            gap: 10,
            marginBottom: 12,
          }}
        >
          <KpiCard
            label="Total"
            value={analytics.total}
            gradient="#1e40af,#3b82f6"
          />
          <KpiCard
            label="Submitted"
            value={analytics.submitted}
            gradient="#1e40af,#3b82f6"
          />
          <KpiCard
            label="Under Review"
            value={analytics.under_review}
            gradient="#b45309,#d97706"
          />
          <KpiCard
            label="Scheduled"
            value={analytics.scheduled}
            gradient="#166534,#22c55e"
          />
          <KpiCard
            label="Rejected"
            value={analytics.rejected}
            gradient="#991b1b,#dc2626"
          />
          <KpiCard
            label="Cancelled"
            value={analytics.cancelled}
            gradient="#475569,#64748b"
          />
        </div>
      )}

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

      {/* Hint banner */}
      {visibleData.length > 0 && (
        <div
          style={{
            padding: "8px 14px",
            background: "#eff6ff",
            border: "1px solid #bfdbfe",
            borderRadius: 8,
            marginBottom: 8,
            display: "flex",
            alignItems: "center",
            gap: 8,
            fontSize: 12,
            color: "#1e40af",
          }}
        >
          💡 <strong>Tip:</strong>{" "}
          {canScheduleAction
            ? "Click the calendar icon to schedule a submitted request — creates a linked audit row."
            : "Submit new audit requests via the ＋ New Request button. You'll see them here once submitted."}
        </div>
      )}

      {/* 🆕 Bulk action bar — appears when rows are checkbox-selected */}
      {selectedRows.length > 0 && (
        <div
          style={{
            padding: "10px 16px",
            background: "#f0fdfa",
            border: "1px solid #99f6e4",
            borderRadius: 8,
            marginBottom: 8,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: 12,
            flexWrap: "wrap",
          }}
        >
          <span style={{ fontSize: 13, color: "#0f766e", fontWeight: 600 }}>
            ☑️ {selectedRows.length} request
            {selectedRows.length > 1 ? "s" : ""} selected
          </span>
          <div style={{ display: "flex", gap: 8 }}>
            {(permittedActions.has("proceed") ||
              permittedActions.has("create")) && (
              <button
                onClick={handleBulkProceed}
                disabled={loadingAction}
                style={{
                  padding: "7px 16px",
                  borderRadius: 8,
                  border: "1px solid #0f766e",
                  background: "#0f766e",
                  color: "#fff",
                  fontSize: 13,
                  fontWeight: 700,
                  cursor: "pointer",
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 6,
                }}
                title="Create inquiries (proceedings) from the selected requests"
              >
                ➡️ Proceed to Scheme ({selectedRows.length})
              </button>
            )}
            <button
              onClick={() => setSelectedRows([])}
              style={{
                padding: "7px 12px",
                borderRadius: 8,
                border: "1px solid #d1d5db",
                background: "#fff",
                color: "#374151",
                fontSize: 13,
                cursor: "pointer",
              }}
            >
              Clear
            </button>
          </div>
        </div>
      )}

      {/* Table */}
      <div className={styles.tableWrapper}>
        <table className={styles.table}>
          <thead>
            <tr>
              <th className={styles.checkboxCol}>
                <input
                  type="checkbox"
                  className={styles.checkbox}
                  checked={
                    visibleData.length > 0 &&
                    visibleData.every((r) => selectedRows.includes(r.sno))
                  }
                  onChange={(e) =>
                    setSelectedRows(
                      e.target.checked ? visibleData.map((r) => r.sno) : [],
                    )
                  }
                />
              </th>
              <th className={styles.th}>Req #</th>
              <th className={styles.th}>Company / Auditee</th>
              <th className={styles.th}>Type</th>
              {/* 🆕 Standards column */}
              <th className={styles.th}>Standards</th>
              <th className={styles.th}>Proposed</th>
              <th className={styles.th}>Mode</th>
              <th className={styles.th}>Requested By</th>
              {/* ✅ NEW — Lead Auditor column */}
              <th className={styles.th}>Lead Auditor</th>
              <th className={styles.th}>Status</th>
              <th className={styles.actionsCol}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {loading ? (
              <tr>
                <td
                  colSpan={11}
                  style={{
                    textAlign: "center",
                    padding: "60px",
                    color: "#9ca3af",
                  }}
                >
                  <div style={{ fontSize: 14, fontWeight: 600 }}>
                    Loading audit requests…
                  </div>
                </td>
              </tr>
            ) : error ? (
              <tr>
                <td
                  colSpan={11}
                  style={{
                    textAlign: "center",
                    padding: "60px",
                    color: "#991b1b",
                  }}
                >
                  ⚠️ {error}
                </td>
              </tr>
            ) : visibleData.length === 0 ? (
              <tr>
                <td
                  colSpan={11}
                  style={{
                    textAlign: "center",
                    padding: "60px",
                    color: "#9ca3af",
                  }}
                >
                  <div style={{ fontSize: 40, marginBottom: 8 }}>📋</div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>
                    No audit requests found
                  </div>
                  <div style={{ fontSize: 12, marginTop: 4 }}>
                    {hasActiveFilters
                      ? "Try clearing filters to see more results."
                      : isMarketing
                        ? "Click ＋ New Request to submit your first audit request."
                        : "Awaiting marketing submissions."}
                  </div>
                </td>
              </tr>
            ) : (
              visibleData.map((row) => (
                <AuditRequestRowFallback
                  key={row.id}
                  row={row}
                  isSelected={selectedRows.includes(row.sno)}
                  handleRowSelect={(sno, checked) =>
                    setSelectedRows((prev) =>
                      checked
                        ? [...prev, sno]
                        : prev.filter((s) => s !== sno),
                    )
                  }
                  onView={handleView}
                  onEdit={handleEdit}
                  onSchedule={handleSchedule}
                  onReject={handleReject}
                  onDelete={handleDelete}
                  onProceed={handleProceed}
                  standardsMap={standardsMap}
                  canEdit={canUserEditRow(row)}
                  canScheduleAction={canScheduleAction}
                  /* ✅ NEW — permission gating */
                  permittedActions={permittedActions}
                />
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      {!loading && visibleData.length > 0 && (
        <Pagination
          currentPage={currentPage}
          setCurrentPage={setCurrentPage}
          totalPages={lastPage}
          startIndex={(currentPage - 1) * itemsPerPage + 1}
          endIndex={(currentPage - 1) * itemsPerPage + visibleData.length}
          sortedDataLength={total}
          itemsPerPage={itemsPerPage}
          setItemsPerPage={setItemsPerPage}
        />
      )}

      {/* ─────────────────── Modals ─────────────────── */}

           {/* ─────────────────── Modals ─────────────────── */}

      {/* Edit form modal — REMOVED */}

      {/* Detail modal */}

      {/* Detail modal */}
      {detailRequestId !== null && (
        <AuditRequestDetailModal
          isOpen={detailRequestId !== null}
          onClose={() => setDetailRequestId(null)}
          requestId={detailRequestId}
          refreshFlag={detailRefreshFlag}
        />
      )}

      {/* Schedule modal */}
      {scheduleTarget && (
        <ScheduleRequestModal
          isOpen={scheduleTarget !== null}
          onClose={() => setScheduleTarget(null)}
          request={scheduleTarget}
          onSuccess={() => {
            refresh();
            setDetailRefreshFlag((p) => p + 1);
          }}
        />
      )}

      {/* Reject modal */}
      {rejectTarget && (
        <RejectRequestModal
          isOpen={rejectTarget !== null}
          onClose={() => setRejectTarget(null)}
          request={rejectTarget}
          onSuccess={() => {
            refresh();
            setDetailRefreshFlag((p) => p + 1);
          }}
        />
      )}

      {/* 🆕 Proceed to Inquiry — single (pre-filled popup) */}
      {proceedTarget && (
        <ProceedToInquiryModal
          isOpen={proceedTarget !== null}
          onClose={() => setProceedTarget(null)}
          request={proceedTarget}
          onSuccess={() => {
            setSelectedRows([]);
            refresh();
            setDetailRefreshFlag((p) => p + 1);
          }}
        />
      )}

      {/* 🆕 Proceed to Inquiry — bulk (shared overrides) */}
      {proceedBulkIds && (
        <ProceedToInquiryModal
          isOpen={proceedBulkIds !== null}
          onClose={() => setProceedBulkIds(null)}
          requestIds={proceedBulkIds}
          onSuccess={() => {
            setSelectedRows([]);
            refresh();
            setDetailRefreshFlag((p) => p + 1);
          }}
        />
      )}
    </div>
  );
}