import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { format, addDays } from "date-fns";
import { CreditCard, TrendingDown, Wallet, AlertTriangle, CheckCircle2 } from "lucide-react";
import { toast } from "sonner";
import OrderInvoiceButton from "@/components/admin/OrderInvoiceButton";
import { grossCents } from "@/lib/vat";
import { useAuth } from "@/hooks/useAuth";

const csrfToken = () =>
  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';

interface CreditOrder {
  id: string;
  course_id: string;
  customer_name: string;
  customer_email: string;
  customer_phone?: string | null;
  start_date: string;
  num_delegates: number;
  price_cents: number;
  refund_cents: number;
  status: string;
  created_at: string;
  cancelled_at: string | null;
  payment_method: string;
  course?: { title: string } | null;
  training_companies?: { name: string } | null;
}

interface CompanyCreditTabProps {
  companyId: string;
  creditLimitCents: number;
  creditAvailableCents: number;
  paymentTermsDays: number;
}

export const CompanyCreditTab = ({ companyId, creditLimitCents, creditAvailableCents, paymentTermsDays }: CompanyCreditTabProps) => {
  const queryClient = useQueryClient();
  // Settling an invoice is a platform-staff action (matches the API gate) —
  // company managers viewing their own finances must not see the button.
  const { hasAnyRole } = useAuth();
  const canMarkPaid = hasAnyRole(["sys_admin", "sys_manager"]);
  const { data: creditOrders, isLoading } = useQuery({
    queryKey: ["company-credit-orders", companyId],
    queryFn: async (): Promise<CreditOrder[]> => {
      const res = await fetch(`/api/admin/companies/${companyId}/credit-orders`);
      if (!res.ok) return [];
      return res.json();
    },
  });

  const markPaidMutation = useMutation({
    mutationFn: async (orderId: string) => {
      const res = await fetch(`/api/admin/orders/${orderId}/mark-paid`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
        body: JSON.stringify({}),
      });
      if (!res.ok) {
        const err = await res.json().catch(() => ({ error: 'Failed' }));
        throw new Error(err.error || 'Failed to mark paid');
      }
      return res.json();
    },
    onSuccess: () => {
      toast.success("Invoice marked as paid");
      queryClient.invalidateQueries({ queryKey: ["company-credit-orders", companyId] });
      queryClient.invalidateQueries({ queryKey: ["finance-overview"] });
      queryClient.invalidateQueries({ queryKey: ["finance-company", companyId] });
      queryClient.invalidateQueries({ queryKey: ["admin-orders"] });
    },
    onError: (err: Error) => toast.error(err.message || "Failed to mark paid"),
  });

  const activeInvoices = creditOrders?.filter((o) => o.status === "confirmed" || o.status === "pending") || [];
  const settledInvoices = creditOrders?.filter((o) => o.status === "cancelled") || [];

  // Only invoice/credit orders count against the credit balance
  const invoiceSpentCents = activeInvoices.reduce((sum, o) => sum + (o.price_cents - o.refund_cents), 0);
  const availableBalanceCents = creditLimitCents - invoiceSpentCents;
  const utilizationPercent = creditLimitCents > 0 ? Math.round((invoiceSpentCents / creditLimitCents) * 100) : 0;

  const getSettlementDate = (createdAt: string) => addDays(new Date(createdAt), paymentTermsDays);

  const isOverdue = (createdAt: string) => {
    const due = getSettlementDate(createdAt);
    return new Date() > due;
  };

  return (
    <div className="space-y-6">
      {/* Credit Summary Cards */}
      <div className="grid grid-cols-4 gap-4">
        <div className="bg-card border border-border rounded-xl p-4">
          <div className="flex items-center gap-2 mb-1">
            <CreditCard className="h-4 w-4 text-muted-foreground" />
            <p className="text-sm text-muted-foreground">Credit Limit</p>
          </div>
          <p className="text-2xl font-bold text-foreground">£{(creditLimitCents / 100).toFixed(2)}</p>
        </div>
        <div className="bg-card border border-border rounded-xl p-4">
          <div className="flex items-center gap-2 mb-1">
            <TrendingDown className="h-4 w-4 text-muted-foreground" />
            <p className="text-sm text-muted-foreground">Invoice Spend</p>
          </div>
          <p className="text-2xl font-bold text-foreground">£{(invoiceSpentCents / 100).toFixed(2)}</p>
        </div>
        <div className="bg-card border border-border rounded-xl p-4">
          <div className="flex items-center gap-2 mb-1">
            <Wallet className="h-4 w-4 text-muted-foreground" />
            <p className="text-sm text-muted-foreground">Available Balance</p>
          </div>
          <p className={`text-2xl font-bold ${availableBalanceCents <= 0 ? "text-destructive" : "text-foreground"}`}>
            £{(availableBalanceCents / 100).toFixed(2)}
          </p>
        </div>
        <div className="bg-card border border-border rounded-xl p-4">
          <div className="flex items-center gap-2 mb-1">
            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
            <p className="text-sm text-muted-foreground">Utilisation</p>
          </div>
          <p className="text-2xl font-bold text-foreground">{utilizationPercent}%</p>
          <div className="mt-2 h-2 bg-muted rounded-full overflow-hidden">
            <div
              className={`h-full rounded-full transition-all ${utilizationPercent >= 90 ? "bg-destructive" : utilizationPercent >= 70 ? "bg-yellow-500" : "bg-primary"}`}
              style={{ width: `${Math.min(utilizationPercent, 100)}%` }}
            />
          </div>
        </div>
      </div>

      {/* Payment Terms Info */}
      <div className="bg-muted/50 border border-border rounded-xl p-4 flex items-center gap-3">
        <Badge variant="outline" className="text-sm">Payment Terms: {paymentTermsDays} days</Badge>
        <span className="text-sm text-muted-foreground">Invoices are due for settlement {paymentTermsDays} days from order date.</span>
      </div>

      {/* Outstanding Invoices */}
      <div className="bg-card border border-border rounded-xl overflow-hidden">
        <div className="px-4 py-3 border-b border-border">
          <h2 className="text-lg font-semibold text-primary">Outstanding Invoices ({activeInvoices.length})</h2>
        </div>
        {isLoading ? (
          <p className="text-muted-foreground p-4">Loading...</p>
        ) : activeInvoices.length === 0 ? (
          <p className="text-muted-foreground text-center py-8">No outstanding invoices.</p>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Order Date</TableHead>
                <TableHead>Course</TableHead>
                <TableHead>Course Start</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead>Due Date</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="w-[60px]">Invoice</TableHead>
                {canMarkPaid && <TableHead className="text-right">Actions</TableHead>}
              </TableRow>
            </TableHeader>
            <TableBody>
              {activeInvoices.map((o) => {
                const dueDate = getSettlementDate(o.created_at);
                const overdue = isOverdue(o.created_at);
                const isPending = markPaidMutation.isPending && markPaidMutation.variables === o.id;
                return (
                  <TableRow key={o.id}>
                    <TableCell className="text-sm">{format(new Date(o.created_at), "dd MMM yyyy")}</TableCell>
                    <TableCell className="font-medium">{(o.course as any)?.title || "—"}</TableCell>
                    <TableCell>{o.start_date ? format(new Date(o.start_date), "dd MMM yyyy") : "Online"}</TableCell>
                    <TableCell>£{(grossCents(o.price_cents) / 100).toFixed(2)}</TableCell>
                    <TableCell>
                      <span className={overdue ? "text-destructive font-semibold" : ""}>
                        {format(dueDate, "dd MMM yyyy")}
                      </span>
                      {overdue && <Badge variant="destructive" className="ml-2 text-xs">Overdue</Badge>}
                    </TableCell>
                    <TableCell>
                      <Badge variant="secondary" className="capitalize">{o.status}</Badge>
                    </TableCell>
                    <TableCell>
                      <OrderInvoiceButton
                        order={o}
                        courseTitle={(o.course as any)?.title}
                        companyName={(o.training_companies as any)?.name}
                      />
                    </TableCell>
                    {canMarkPaid && (
                      <TableCell className="text-right">
                        <Button
                          size="sm"
                          variant="outline"
                          className="h-7 text-xs"
                          disabled={isPending}
                          onClick={() => markPaidMutation.mutate(o.id)}
                        >
                          <CheckCircle2 className="w-3.5 h-3.5 mr-1" />
                          {isPending ? "Marking…" : "Mark Paid"}
                        </Button>
                      </TableCell>
                    )}
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        )}
      </div>

      {/* Settled / Cancelled Invoices */}
      {settledInvoices.length > 0 && (
        <div className="bg-card border border-border rounded-xl overflow-hidden">
          <div className="px-4 py-3 border-b border-border">
            <h2 className="text-lg font-semibold text-muted-foreground">Cancelled / Refunded ({settledInvoices.length})</h2>
          </div>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Order Date</TableHead>
                <TableHead>Course</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead>Refunded</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="w-[60px]">Invoice</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {settledInvoices.map((o) => (
                <TableRow key={o.id} className="opacity-60">
                  <TableCell className="text-sm">{format(new Date(o.created_at), "dd MMM yyyy")}</TableCell>
                  <TableCell>{(o.course as any)?.title || "—"}</TableCell>
                  <TableCell>£{(grossCents(o.price_cents) / 100).toFixed(2)}</TableCell>
                  <TableCell>£{(grossCents(o.refund_cents || 0) / 100).toFixed(2)}</TableCell>
                  <TableCell><Badge variant="destructive" className="capitalize">{o.status}</Badge></TableCell>
                  <TableCell>
                    <OrderInvoiceButton
                      order={o}
                      courseTitle={(o.course as any)?.title}
                      companyName={(o.training_companies as any)?.name}
                    />
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}
    </div>
  );
};