"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { jsPDF } from "jspdf";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

type OrderItem = {
  title: string;
  variantLabel?: string;
  quantity: number;
  unitPrice: number;
  shippingPerUnit?: number;
  lineSubtotal: number;
  lineShipping?: number;
};

type OrderRow = {
  _id: string;
  orderNumber: string;
  status: string;
  paymentMethod?: string;
  shippingFullName?: string;
  shippingPhone?: string;
  shippingEmail?: string;
  shippingAddress?: string;
  subtotal: number;
  shippingTotal: number;
  grandTotal: number;
  createdAt?: string;
  user?: { firstName?: string; lastName?: string; username?: string; email?: string } | null;
  items: OrderItem[];
};

function customerName(o: OrderRow): string {
  const direct = [o.user?.firstName, o.user?.lastName].filter(Boolean).join(" ");
  return direct || o.user?.username || o.shippingFullName || "—";
}

export default function ShopOrderDetailAdmin() {
  const ready = useRequireSuperAdmin();
  const params = useParams();
  const app = params.app as string;
  const orderId = params.orderId as string;

  const [loading, setLoading] = useState(true);
  const [order, setOrder] = useState<OrderRow | null>(null);

  const load = useCallback(async () => {
    try {
      const res = await DataService.get(`/admin/shop-orders/${orderId}`);
      setOrder(res.data?.data || null);
    } catch (e: unknown) {
      setOrder(null);
      toast.error(getApiErrorMessage(e, "Failed to load order"));
    } finally {
      setLoading(false);
    }
  }, [orderId]);

  useEffect(() => {
    if (ready && orderId) load();
  }, [ready, orderId, load]);

  const summary = useMemo(() => {
    if (!order) return { subtotal: 0, shipping: 0, grand: 0 };
    return {
      subtotal: Number(order.subtotal) || 0,
      shipping: Number(order.shippingTotal) || 0,
      grand: Number(order.grandTotal) || 0,
    };
  }, [order]);

  const downloadInvoice = () => {
    if (!order) return;
    const doc = new jsPDF({ unit: "pt", format: "a4" });
    const left = 40;
    const right = 555;
    const bottom = 800;
    let y = 40;
    const lineH = 18;

    const ensureSpace = (need = lineH) => {
      if (y + need > bottom) {
        doc.addPage();
        y = 40;
      }
    };

    const write = (text: string, x = left, size = 11, style: "normal" | "bold" = "normal") => {
      ensureSpace();
      doc.setFont("helvetica", style);
      doc.setFontSize(size);
      doc.text(text, x, y);
      y += lineH;
    };

    write(`Invoice - ${order.orderNumber}`, left, 16, "bold");
    write(`Date: ${order.createdAt ? new Date(order.createdAt).toLocaleString() : "—"}`);
    y += 4;
    write(`Customer: ${customerName(order)}`);
    write(`Email: ${order.shippingEmail || order.user?.email || "—"}`);
    write(`Phone: ${order.shippingPhone || "—"}`);
    write(`Address: ${order.shippingAddress || "—"}`);
    y += 8;

    ensureSpace(26);
    doc.setFont("helvetica", "bold");
    doc.setFontSize(11);
    doc.text("Item", left, y);
    doc.text("Qty", 330, y);
    doc.text("Unit", 380, y);
    doc.text("Line", 460, y);
    y += 8;
    doc.setDrawColor(180);
    doc.line(left, y, right, y);
    y += 12;

    doc.setFont("helvetica", "normal");
    for (const it of order.items || []) {
      ensureSpace(34);
      const title = `${it.title}${it.variantLabel ? ` (${it.variantLabel})` : ""}`;
      const wrapped = doc.splitTextToSize(title, 270);
      doc.text(wrapped, left, y);
      doc.text(String(it.quantity), 330, y);
      doc.text(Number(it.unitPrice).toFixed(2), 380, y);
      doc.text((Number(it.lineSubtotal || 0) + Number(it.lineShipping || 0)).toFixed(2), 460, y);
      y += Math.max(wrapped.length * 14, 20);
      doc.setDrawColor(235);
      doc.line(left, y, right, y);
      y += 12;
    }

    y += 4;
    write(`Subtotal: ${summary.subtotal.toFixed(2)}`, 360, 11, "bold");
    write(`Shipping: ${summary.shipping.toFixed(2)}`, 360, 11, "bold");
    write(`Grand Total: ${summary.grand.toFixed(2)}`, 360, 12, "bold");

    doc.save(`invoice-${order.orderNumber}.pdf`);
  };

  if (!ready || loading) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Loading…</div>;
  }
  if (!order) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Order not found.</div>;
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <MainTitle title={`Order ${order.orderNumber}`} />
        <div className="flex gap-2">
          <Button variant="outline" asChild>
            <Link href={`/${app}/admin/shop-orders`}>Back</Link>
          </Button>
          <Button type="button" onClick={downloadInvoice}>
            Download invoice
          </Button>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        <div className="rounded-md border bg-white p-4">
          <h3 className="font-semibold text-slate-900">Customer details</h3>
          <p className="mt-2 text-sm text-gray-700">
            <strong>Name:</strong> {customerName(order)}
          </p>
          <p className="text-sm text-gray-700">
            <strong>Email:</strong> {order.shippingEmail || order.user?.email || "—"}
          </p>
          <p className="text-sm text-gray-700">
            <strong>Phone:</strong> {order.shippingPhone || "—"}
          </p>
          <p className="text-sm text-gray-700">
            <strong>Address:</strong> {order.shippingAddress || "—"}
          </p>
        </div>
        <div className="rounded-md border bg-white p-4">
          <h3 className="font-semibold text-slate-900">Order summary</h3>
          <p className="mt-2 text-sm text-gray-700">
            <strong>Status:</strong> {order.status}
          </p>
          <p className="text-sm text-gray-700">
            <strong>Payment:</strong> {order.paymentMethod || "cod"}
          </p>
          <p className="text-sm text-gray-700">
            <strong>Date:</strong> {order.createdAt ? new Date(order.createdAt).toLocaleString() : "—"}
          </p>
          <p className="mt-2 text-sm text-gray-700">
            <strong>Subtotal:</strong> {summary.subtotal.toFixed(2)}
          </p>
          <p className="text-sm text-gray-700">
            <strong>Shipping:</strong> {summary.shipping.toFixed(2)}
          </p>
          <p className="text-sm font-semibold text-slate-900">
            <strong>Grand total:</strong> {summary.grand.toFixed(2)}
          </p>
        </div>
      </div>

      <div className="rounded-md border bg-white">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Item</TableHead>
              <TableHead>Variant</TableHead>
              <TableHead>Qty</TableHead>
              <TableHead>Unit</TableHead>
              <TableHead>Shipping/unit</TableHead>
              <TableHead>Line total</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {(order.items || []).map((it, idx) => (
              <TableRow key={idx}>
                <TableCell>{it.title}</TableCell>
                <TableCell>{it.variantLabel || "—"}</TableCell>
                <TableCell>{it.quantity}</TableCell>
                <TableCell>{Number(it.unitPrice).toFixed(2)}</TableCell>
                <TableCell>{Number(it.shippingPerUnit || 0).toFixed(2)}</TableCell>
                <TableCell>{(Number(it.lineSubtotal || 0) + Number(it.lineShipping || 0)).toFixed(2)}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}