"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
  getPendingTransactions,
  approveTransaction,
  rejectTransaction,
  getStockMovementSheets,
  approveStockMovementSheet,
  rejectStockMovementSheet,
  type StockTransaction,
  type StockMovementSheet,
} from "@/lib/api";
import { useAuth } from "@/lib/auth";

export default function ApprovalsPage() {
  const { user } = useAuth();
  const router = useRouter();

  const [transactions, setTransactions] = useState<StockTransaction[]>([]);
  const [sheets, setSheets] = useState<StockMovementSheet[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [rejectId, setRejectId] = useState<string | null>(null);
  const [rejectType, setRejectType] = useState<"tx" | "sheet">("tx");
  const [rejectReason, setRejectReason] = useState("");
  const [processing, setProcessing] = useState<string | null>(null);
  const [tab, setTab] = useState<"transactions" | "sheets">("transactions");
  const [approveConfirmId, setApproveConfirmId] = useState<string | null>(null);
  const [approveConfirmType, setApproveConfirmType] = useState<"tx" | "sheet">("tx");

  useEffect(() => {
    if (user && user.role === "store_keeper") { router.replace("/"); return; }
    load();
  }, [user]); // eslint-disable-line react-hooks/exhaustive-deps

  async function load() {
    setLoading(true);
    try {
      const [txs, allSheets] = await Promise.all([
        getPendingTransactions(),
        getStockMovementSheets(),
      ]);
      setTransactions(txs);
      setSheets(allSheets.filter((s) => s.approvalStatus === "pending_approval"));
    } catch {
      setError("Failed to load pending approvals.");
    } finally {
      setLoading(false);
    }
  }

  async function handleApproveTx(id: string) {
    setProcessing(id);
    try {
      await approveTransaction(id);
      setTransactions((prev) => prev.filter((t) => t.id !== id));
      setApproveConfirmId(null);
    } catch (err) { setError(err instanceof Error ? err.message : "Approval failed."); }
    finally { setProcessing(null); }
  }

  async function handleApproveSheet(id: string) {
    setProcessing(id);
    try {
      await approveStockMovementSheet(id);
      setSheets((prev) => prev.filter((s) => s.id !== id));
      setApproveConfirmId(null);
    } catch (err) { setError(err instanceof Error ? err.message : "Approval failed."); }
    finally { setProcessing(null); }
  }

  async function handleReject() {
    if (!rejectId) return;
    setProcessing(rejectId);
    try {
      if (rejectType === "tx") {
        await rejectTransaction(rejectId, rejectReason);
        setTransactions((prev) => prev.filter((t) => t.id !== rejectId));
      } else {
        await rejectStockMovementSheet(rejectId, rejectReason);
        setSheets((prev) => prev.filter((s) => s.id !== rejectId));
      }
      setRejectId(null);
      setRejectReason("");
    } catch (err) { setError(err instanceof Error ? err.message : "Rejection failed."); }
    finally { setProcessing(null); }
  }

  const totalPending = transactions.length + sheets.length;

  const tabStyle = (active: boolean): React.CSSProperties => ({
    background: "none", border: "none", cursor: "pointer",
    padding: "10px 22px", fontSize: "0.9rem", fontWeight: 600,
    color: active ? "var(--brand)" : "var(--muted)",
    borderBottom: active ? "2px solid var(--brand)" : "2px solid transparent",
    marginBottom: -2, transition: "color 0.15s",
  });

  return (
    <>
      <section className="hero">
        <div className="hero-grid">
          <div>
            <h2>Pending Approvals</h2>
            <p>
              {totalPending > 0
                ? <><strong>{totalPending}</strong> item{totalPending !== 1 ? "s" : ""} waiting for your review.</>
                : "All caught up ✓"}
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        {error && (
          <div className="snackbar snackbar-error" style={{ marginBottom: 18 }}>
            {error}<button className="snackbar-close" onClick={() => setError(null)}>✕</button>
          </div>
        )}

        {/* Tabs */}
        <div style={{ display: "flex", gap: 0, marginBottom: 24, borderBottom: "2px solid var(--line)" }}>
          <button type="button" onClick={() => setTab("transactions")} style={tabStyle(tab === "transactions")}>
            Stock Transactions
            {transactions.length > 0 && (
              <span style={{ marginLeft: 8, background: "var(--brand)", color: "#fff", borderRadius: 10, padding: "1px 7px", fontSize: "0.72rem" }}>
                {transactions.length}
              </span>
            )}
          </button>
          <button type="button" onClick={() => setTab("sheets")} style={tabStyle(tab === "sheets")}>
            Strategic Sheets
            {sheets.length > 0 && (
              <span style={{ marginLeft: 8, background: "var(--brand)", color: "#fff", borderRadius: 10, padding: "1px 7px", fontSize: "0.72rem" }}>
                {sheets.length}
              </span>
            )}
          </button>
        </div>

        {loading && <p style={{ color: "var(--muted)" }}>Loading…</p>}

        {/* ── Stock Transactions ── */}
        {!loading && tab === "transactions" && (
          <>
            {transactions.length === 0 ? (
              <div className="card" style={{ textAlign: "center", padding: 40 }}>
                <p style={{ color: "var(--muted)", margin: 0 }}>No pending stock transactions ✓</p>
              </div>
            ) : (
              <div className="card">
                <div className="stock-table-scroll">
                  <table className="table stock-table">
                    <thead>
                      <tr>
                        <th>Type</th>
                        <th>Warehouse</th>
                        <th>Item</th>
                        <th>Batch</th>
                        <th>Expiry</th>
                        <th className="stock-table-num">Qty (MT)</th>
                        <th>Submitted By</th>
                        <th>Date</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {transactions.map((tx) => (
                        <tr key={tx.id}>
                          <td>
                            {tx.type === "inbound"
                              ? <span className="badge ok">↑ Stock In</span>
                              : <span className="badge warn">↓ Stock Out</span>}
                          </td>
                          <td>{tx.warehouseName ?? "—"}</td>
                          <td>
                            <span className="stock-table-item">{tx.itemName ?? "—"}</span>
                            {tx.itemCode && <span className="stock-table-item-code">{tx.itemCode}</span>}
                          </td>
                          <td className="stock-table-nowrap">{tx.batchNumber ?? "—"}</td>
                          <td className="stock-table-nowrap">{tx.expiryDate ?? "—"}</td>
                          <td className="stock-table-num stock-table-strong">{tx.quantityMt}</td>
                          <td>{tx.submittedBy ?? "—"}</td>
                          <td className="stock-table-nowrap">{tx.transactionDate}</td>
                          <td>
                            <div style={{ display: "flex", gap: 8 }}>
                              <button className="button" style={{ padding: "6px 14px", fontSize: "0.76rem" }}
                                disabled={processing === tx.id} 
                                onClick={() => { setApproveConfirmId(tx.id); setApproveConfirmType("tx"); }}>
                                {processing === tx.id ? "…" : "Approve"}
                              </button>
                              <button className="button secondary" style={{ padding: "6px 14px", fontSize: "0.76rem", color: "var(--danger)", borderColor: "var(--danger)" }}
                                disabled={processing === tx.id}
                                onClick={() => { setRejectId(tx.id); setRejectType("tx"); setRejectReason(""); }}>
                                Reject
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </>
        )}

        {/* ── Strategic Sheets ── */}
        {!loading && tab === "sheets" && (
          <>
            {sheets.length === 0 ? (
              <div className="card" style={{ textAlign: "center", padding: 40 }}>
                <p style={{ color: "var(--muted)", margin: 0 }}>No pending strategic sheets ✓</p>
              </div>
            ) : (
              <div className="card">
                <div className="stock-table-scroll">
                  <table className="table stock-table">
                    <thead>
                      <tr>
                        <th>Document #</th>
                        <th>Report For</th>
                        <th>Date</th>
                        <th className="stock-table-num">Total Bags</th>
                        <th className="stock-table-num">Total MT</th>
                        <th>Submitted By</th>
                        <th>Created</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {sheets.map((s) => (
                        <tr key={s.id}>
                          <td className="stock-table-nowrap">
                            {s.documentNumber ?? <span style={{ color: "var(--muted)", fontSize: "0.8rem" }}>#{s.id.slice(-6).toUpperCase()}</span>}
                          </td>
                          <td>{s.stockReportFor ?? s.companyName ?? "—"}</td>
                          <td className="stock-table-nowrap">
                            {s.documentDate ?? new Date(s.createdAt).toLocaleDateString("en-AE")}
                          </td>
                          <td className="stock-table-num stock-table-strong">{s.totalBagsAll.toLocaleString()}</td>
                          <td className="stock-table-num stock-table-strong stock-table-brand">{s.totalMtAll.toFixed(2)}</td>
                          <td>{s.submittedBy ?? "—"}</td>
                          <td className="stock-table-nowrap">{new Date(s.createdAt).toLocaleDateString("en-AE")}</td>
                          <td>
                            <div style={{ display: "flex", gap: 8 }}>
                              <button className="button" style={{ padding: "6px 14px", fontSize: "0.76rem" }}
                                disabled={processing === s.id} 
                                onClick={() => { setApproveConfirmId(s.id); setApproveConfirmType("sheet"); }}>
                                {processing === s.id ? "…" : "Approve"}
                              </button>
                              <button className="button secondary" style={{ padding: "6px 14px", fontSize: "0.76rem", color: "var(--danger)", borderColor: "var(--danger)" }}
                                disabled={processing === s.id}
                                onClick={() => { setRejectId(s.id); setRejectType("sheet"); setRejectReason(""); }}>
                                Reject
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </>
        )}
      </section>

      {/* Approve Confirmation Modal */}
      {approveConfirmId && (
        <div className="doc-modal-backdrop" onClick={() => setApproveConfirmId(null)}>
          <div className="doc-modal" style={{ maxWidth: 480 }} onClick={(e) => e.stopPropagation()}>
            <div className="doc-modal-header">
              <div>
                <strong className="doc-modal-title">Approve {approveConfirmType === "sheet" ? "Sheet" : "Transaction"}</strong>
                <span className="doc-modal-meta">Confirm approval action</span>
              </div>
              <button className="doc-modal-close" onClick={() => setApproveConfirmId(null)}>✕</button>
            </div>
            <div className="doc-modal-body" style={{ padding: 22 }}>
              <p style={{ margin: "0 0 20px", color: "var(--ink)", fontSize: "0.9rem" }}>
                Are you sure you want to approve this {approveConfirmType === "sheet" ? "sheet" : "transaction"}?
              </p>
              <div style={{ display: "flex", gap: 10 }}>
                <button 
                  className="button" 
                  style={{ background: "var(--brand)" }}
                  disabled={processing === approveConfirmId} 
                  onClick={() => {
                    if (approveConfirmType === "tx") {
                      handleApproveTx(approveConfirmId);
                    } else {
                      handleApproveSheet(approveConfirmId);
                    }
                  }}
                >
                  {processing === approveConfirmId ? "Approving…" : "Yes, Approve"}
                </button>
                <button 
                  className="button secondary" 
                  onClick={() => setApproveConfirmId(null)}
                  disabled={processing === approveConfirmId}
                >
                  Cancel
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Reject modal */}
      {rejectId && (
        <div className="doc-modal-backdrop" onClick={() => setRejectId(null)}>
          <div className="doc-modal" style={{ maxWidth: 480 }} onClick={(e) => e.stopPropagation()}>
            <div className="doc-modal-header">
              <div>
                <strong className="doc-modal-title">Reject {rejectType === "sheet" ? "Sheet" : "Transaction"}</strong>
                <span className="doc-modal-meta">Provide a reason for rejection</span>
              </div>
              <button className="doc-modal-close" onClick={() => setRejectId(null)}>✕</button>
            </div>
            <div className="doc-modal-body" style={{ padding: 22 }}>
              <div className="form-field">
                <label className="form-label">Reason <span className="form-optional">optional</span></label>
                <textarea className="form-input" value={rejectReason}
                  onChange={(e) => setRejectReason(e.target.value)}
                  placeholder="Enter rejection reason…" rows={3} />
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
                <button className="button" style={{ background: "var(--danger)" }}
                  disabled={processing === rejectId} onClick={handleReject}>
                  {processing === rejectId ? "Rejecting…" : "Confirm Reject"}
                </button>
                <button className="button secondary" onClick={() => setRejectId(null)}>Cancel</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}