import React, { useEffect, useMemo, useState, useCallback } from "react";
import { Link } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import AdminDataTable from "../../components/admin/AdminDataTable";
import Modal from "../../components/common/Modal";
import ProducerCapturePanel from "../../components/domestic/capture/ProducerCapturePanel";
import { formatLitres, SubmissionStatusPill, isOpenSubmissionStatus } from "../../components/domestic/shared/DomesticShared";
import { useAuthStore } from "../../store/authStore";
import { fetchAdminSubmissions } from "../../api/domesticCapture";
import { canApproveDomestic } from "../../utils/domesticPermissions";
import { useDomesticLookups } from "../../hooks/useDomesticLookups";
import { apiOr, admin as adminMsg } from "../../utils/userFacingMessages";
import { periodOptions, currentYearMonth } from "../../utils/domesticCaptureModel";
import "../../styles/domestic.css";
import "../../styles/admin-portal.css";
import "../../styles/admin-submissions.css";

function mapRow(row) {
  const litres = row.saved_totals?.grand_total ?? row.total_litres ?? row.totalLitres ?? null;
  return {
    id: row.id ?? row.submission_id,
    producer: row.producer_name
      ? `${row.producer_name} (${row.PRODKODE})`
      : String(row.PRODKODE || row.producer || "—"),
    period: row.period,
    country: row.country || row.VT || "—",
    status: row.status,
    totalLitres: litres,
    capturedBy: row.assigned_user_email || row.user_id || "—",
    submitted: row.submitted_at || row.updated_at || row.submitted || null,
  };
}

/**
 * Super User / Admin submissions list — live GET auth/domestic/admin/submissions.
 */
const SubmissionsListPage = () => {
  const { user } = useAuthStore();
  const { currentPeriod } = useDomesticLookups();
  const [period, setPeriod] = useState("");
  const [rows, setRows] = useState([]);
  const [loading, setLoading] = useState(false);
  const [notice, setNotice] = useState("");
  const canApprove = canApproveDomestic(user);

  // Dropdown — Firefox does not support input type="month" (falls back to plain text)
  const periods = useMemo(() => {
    const opts = periodOptions(currentPeriod || currentYearMonth());
    if (period && !opts.some((p) => p.value === period)) {
      const [y, m] = period.split("-").map(Number);
      const label =
        y && m
          ? new Date(y, m - 1, 1).toLocaleString("en-ZA", { month: "long", year: "numeric" })
          : period;
      opts.unshift({ value: period, label });
    }
    return opts;
  }, [currentPeriod, period]);

  useEffect(() => {
    if (currentPeriod) setPeriod((p) => p || currentPeriod);
  }, [currentPeriod]);

  const load = useCallback(async () => {
    if (!user?.token) return;
    setLoading(true);
    setNotice("");
    const result = await fetchAdminSubmissions(user.token, { period: period || undefined });
    setLoading(false);
    if (!result.ok) {
      setRows([]);
      setNotice(apiOr(adminMsg.submissionsLoadFailed(result.status), result));
      return;
    }
    const data = result.data?.data || result.data || [];
    setRows((Array.isArray(data) ? data : []).map(mapRow));
  }, [user, period]);

  useEffect(() => {
    load();
  }, [load]);

  const columns = useMemo(
    () => [
      {
        name: "Producer",
        selector: (row) => row.producer,
        sortable: true,
        grow: 1,
        minWidth: "120px",
        wrap: false,
      },
      {
        name: "Period",
        selector: (row) => row.period,
        sortable: true,
        width: "100px",
        wrap: false,
      },
      {
        name: "Country",
        selector: (row) => row.country,
        sortable: true,
        width: "100px",
        wrap: false,
      },
      {
        name: "Status",
        selector: (row) => row.status,
        sortable: true,
        width: "110px",
        wrap: false,
        cell: (row) => <SubmissionStatusPill status={row.status} />,
      },
      {
        name: "Total (L)",
        selector: (row) => row.totalLitres ?? -1,
        sortable: true,
        right: true,
        width: "100px",
        wrap: false,
        cell: (row) => (row.totalLitres == null ? "—" : formatLitres(row.totalLitres)),
      },
      {
        name: "Captured by",
        selector: (row) => String(row.capturedBy),
        sortable: true,
        grow: 1,
        minWidth: "120px",
        wrap: false,
      },
      {
        name: "Updated",
        selector: (row) => row.submitted || "",
        sortable: true,
        width: "110px",
        wrap: false,
        cell: (row) => (row.submitted ? String(row.submitted).slice(0, 10) : "—"),
      },
      {
        name: "Actions",
        width: "100px",
        minWidth: "100px",
        right: true,
        wrap: false,
        ignoreRowClick: true,
        allowOverflow: true,
        button: true,
        cell: (row) => {
          const st = String(row.status || "").toLowerCase();
          if (st === "submitted" || isOpenSubmissionStatus(row.status)) {
            return (
              <Link to={`/admin/submissions/${row.id}`} className="admin-portal-action">
                Review
              </Link>
            );
          }
          if (st === "approved" || st === "synced") {
            return (
              <Link to={`/admin/submissions/${row.id}`} className="admin-portal-action">
                View
              </Link>
            );
          }
          return (
            <Link to={`/admin/submissions/${row.id}`} className="admin-portal-action">
              Open
            </Link>
          );
        },
      },
    ],
    []
  );

  return (
    <main className="p-3 w-100 admin-submissions-page">
      <div className="card shadow-sm border-0 admin-portal-card">
        <div className="card-body">
          <div className="admin-portal-toolbar">
            <div>
              <h5 className="card-title">SAWIS 7 submissions</h5>
              <p className="admin-portal-subtitle">
                {canApprove
                  ? "Review and approve submitted returns (SAWIS 5 cross-check off-system)"
                  : "Submission overview"}
              </p>
            </div>
            <div className="admin-submissions-toolbar-actions">
              <div className="admin-submissions-period">
                <label className="admin-submissions-period-label" htmlFor="admin-period">
                  Period
                </label>
                <select
                  id="admin-period"
                  className="form-select form-select-sm admin-submissions-period-input"
                  value={period}
                  onChange={(e) => setPeriod(e.target.value)}
                >
                  {!period && <option value="">Select period</option>}
                  {periods.map((p) => (
                    <option key={p.value} value={p.value}>
                      {p.label}
                    </option>
                  ))}
                </select>
              </div>
              <Modal
                dialogClassName="bi-modal--domestic-capture"
                buttonText={
                  <>
                    <FontAwesomeIcon icon={faPlus} className="me-1" /> New entry
                  </>
                }
                modalContent={<ProducerCapturePanel variant="modal" />}
              />
            </div>
          </div>

          {notice && (
            <p className="admin-users-alert admin-users-alert--error" role="alert">
              {notice}
            </p>
          )}

          <AdminDataTable
            columns={columns}
            data={rows}
            searchPlaceholder="Search submissions..."
            paginationPerPage={10}
            progressPending={loading}
          />
        </div>
      </div>
    </main>
  );
};

export default SubmissionsListPage;