"use client";

import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import useSWR from "swr";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { ArrowLeft, Plus, Trash2, Package, Save } from "lucide-react";
import { toast } from "sonner";
import { formatCurrency } from "@/lib/format";
import type { Customer, Product } from "@/lib/types";

const fetcher = (url: string) => fetch(url).then((r) => r.json());

interface OrderLineItem {
  product_id: string;
  quantity: string;
  unit_price: string;
  notes: string;
}

export default function NewOrderPage() {
  const params = useParams();
  const router = useRouter();
  const customerId = params.id as string;

  const [loading, setLoading] = useState(false);
  const [form, setForm] = useState({
    po_number: "",
    customer_ref: "",
    status: "draft",
    order_date: new Date().toISOString().slice(0, 10),
    due_date: "",
    notes: "",
  });

  const [items, setItems] = useState<OrderLineItem[]>([
    { product_id: "", quantity: "1", unit_price: "", notes: "" },
  ]);

  const { data: customer } = useSWR<Customer>(
    `/api/customers/${customerId}`,
    fetcher
  );
  const { data: products = [] } = useSWR<Product[]>("/api/products", fetcher);

  function addLine() {
    setItems([
      ...items,
      { product_id: "", quantity: "1", unit_price: "", notes: "" },
    ]);
  }

  function removeLine(index: number) {
    if (items.length <= 1) return;
    setItems(items.filter((_, i) => i !== index));
  }

  function updateLine(index: number, field: keyof OrderLineItem, value: string) {
    const updated = [...items];
    updated[index] = { ...updated[index], [field]: value };
    setItems(updated);
  }

  function getLineTotal(item: OrderLineItem) {
    const qty = Number(item.quantity) || 0;
    const price = Number(item.unit_price) || 0;
    return qty * price;
  }

  const orderTotal = items.reduce((sum, item) => sum + getLineTotal(item), 0);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!form.po_number) {
      toast.error("PO Number is required");
      return;
    }

    const validItems = items.filter((item) => item.product_id);
    if (validItems.length === 0) {
      toast.error("Add at least one product line item");
      return;
    }

    setLoading(true);
    try {
      const res = await fetch("/api/orders", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          customer_id: Number(customerId),
          ...form,
          due_date: form.due_date || null,
          items: validItems.map((item) => ({
            product_id: Number(item.product_id),
            quantity: Number(item.quantity) || 1,
            unit_price: Number(item.unit_price) || 0,
            notes: item.notes || null,
          })),
        }),
      });

      if (!res.ok) {
        const err = await res.json();
        throw new Error(err.error || "Failed to create order");
      }

      toast.success("Purchase order created");
      router.push(`/customers/${customerId}`);
    } catch (err) {
      toast.error(
        err instanceof Error ? err.message : "Failed to create order"
      );
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="flex flex-col gap-6 p-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button
          variant="ghost"
          size="icon"
          onClick={() => router.push(`/customers/${customerId}`)}
        >
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-foreground">
            New Purchase Order
          </h1>
          <p className="text-sm text-muted-foreground">
            {customer
              ? `Creating order for ${customer.name} (${customer.code})`
              : "Loading..."}
          </p>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
        {/* Order Details */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Order Details</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
              <div className="flex flex-col gap-2">
                <Label htmlFor="po_number">
                  PO Number <span className="text-destructive">*</span>
                </Label>
                <Input
                  id="po_number"
                  value={form.po_number}
                  onChange={(e) =>
                    setForm({ ...form, po_number: e.target.value })
                  }
                  placeholder="PO-2026-001"
                  className="font-mono"
                  required
                />
              </div>
              <div className="flex flex-col gap-2">
                <Label htmlFor="customer_ref">Customer Reference</Label>
                <Input
                  id="customer_ref"
                  value={form.customer_ref}
                  onChange={(e) =>
                    setForm({ ...form, customer_ref: e.target.value })
                  }
                  placeholder="Their internal ref"
                />
              </div>
              <div className="flex flex-col gap-2">
                <Label htmlFor="status">Status</Label>
                <Select
                  value={form.status}
                  onValueChange={(v) => setForm({ ...form, status: v })}
                >
                  <SelectTrigger id="status">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="draft">Draft</SelectItem>
                    <SelectItem value="confirmed">Confirmed</SelectItem>
                    <SelectItem value="in_production">In Production</SelectItem>
                    <SelectItem value="shipped">Shipped</SelectItem>
                    <SelectItem value="completed">Completed</SelectItem>
                    <SelectItem value="cancelled">Cancelled</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
              <div className="flex flex-col gap-2">
                <Label htmlFor="order_date">Order Date</Label>
                <Input
                  id="order_date"
                  type="date"
                  value={form.order_date}
                  onChange={(e) =>
                    setForm({ ...form, order_date: e.target.value })
                  }
                />
              </div>
              <div className="flex flex-col gap-2">
                <Label htmlFor="due_date">Due Date</Label>
                <Input
                  id="due_date"
                  type="date"
                  value={form.due_date}
                  onChange={(e) =>
                    setForm({ ...form, due_date: e.target.value })
                  }
                />
              </div>
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="notes">Notes</Label>
              <Textarea
                id="notes"
                value={form.notes}
                onChange={(e) => setForm({ ...form, notes: e.target.value })}
                placeholder="Internal notes about this order..."
                rows={2}
              />
            </div>
          </CardContent>
        </Card>

        {/* Line Items */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle className="flex items-center gap-2 text-base">
              <Package className="h-4 w-4 text-primary" />
              Line Items
            </CardTitle>
            <Button type="button" variant="outline" size="sm" onClick={addLine}>
              <Plus className="mr-2 h-3.5 w-3.5" />
              Add Line
            </Button>
          </CardHeader>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[40px]">#</TableHead>
                    <TableHead>Product</TableHead>
                    <TableHead className="w-[120px]">Quantity</TableHead>
                    <TableHead className="w-[140px]">Unit Price</TableHead>
                    <TableHead className="w-[140px] text-right">
                      Line Total
                    </TableHead>
                    <TableHead>Notes</TableHead>
                    <TableHead className="w-[50px]" />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {items.map((item, index) => (
                    <TableRow key={index}>
                      <TableCell className="text-center text-xs text-muted-foreground">
                        {index + 1}
                      </TableCell>
                      <TableCell>
                        <Select
                          value={item.product_id}
                          onValueChange={(v) =>
                            updateLine(index, "product_id", v)
                          }
                        >
                          <SelectTrigger className="h-9">
                            <SelectValue placeholder="Select product..." />
                          </SelectTrigger>
                          <SelectContent>
                            {products.map((p) => (
                              <SelectItem key={p.id} value={String(p.id)}>
                                <span className="font-mono text-xs text-muted-foreground mr-2">
                                  {p.sku}
                                </span>
                                {p.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </TableCell>
                      <TableCell>
                        <Input
                          type="number"
                          min="1"
                          value={item.quantity}
                          onChange={(e) =>
                            updateLine(index, "quantity", e.target.value)
                          }
                          className="h-9 font-mono"
                        />
                      </TableCell>
                      <TableCell>
                        <div className="relative">
                          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
                            {'€'}
                          </span>
                          <Input
                            type="number"
                            step="0.01"
                            min="0"
                            value={item.unit_price}
                            onChange={(e) =>
                              updateLine(index, "unit_price", e.target.value)
                            }
                            className="h-9 pl-7 font-mono"
                          />
                        </div>
                      </TableCell>
                      <TableCell className="text-right font-mono text-sm font-semibold">
                        {formatCurrency(getLineTotal(item))}
                      </TableCell>
                      <TableCell>
                        <Input
                          value={item.notes}
                          onChange={(e) =>
                            updateLine(index, "notes", e.target.value)
                          }
                          placeholder="Optional"
                          className="h-9 text-xs"
                        />
                      </TableCell>
                      <TableCell>
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-destructive hover:text-destructive"
                          onClick={() => removeLine(index)}
                          disabled={items.length <= 1}
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                  <TableRow className="bg-muted/50">
                    <TableCell colSpan={4} className="text-right font-semibold">
                      Order Total
                    </TableCell>
                    <TableCell className="text-right font-mono text-base font-bold text-primary">
                      {formatCurrency(orderTotal)}
                    </TableCell>
                    <TableCell colSpan={2} />
                  </TableRow>
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>

        {/* Actions */}
        <div className="flex justify-end gap-3">
          <Button
            type="button"
            variant="outline"
            onClick={() => router.push(`/customers/${customerId}`)}
          >
            Cancel
          </Button>
          <Button type="submit" disabled={loading}>
            <Save className="mr-2 h-4 w-4" />
            {loading ? "Creating..." : "Create Purchase Order"}
          </Button>
        </div>
      </form>
    </div>
  );
}