"use client";

import { useState, useEffect } from "react";
import useSWR from "swr";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
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 { toast } from "sonner";
import { formatCurrency } from "@/lib/format";
import type { Component } from "@/lib/types";

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

interface AddStockDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  component: Component | null;
  onSaved: () => void;
  onPrintLabel?: (partNumber: string, quantity: number) => void;
}

const transactionTypes = [
  { value: "purchase", label: "Purchase (New Stock)" },
  { value: "adjustment", label: "Adjustment (Correction)" },
  { value: "return", label: "Return (Supplier Return)" },
  { value: "consumption", label: "Consumption (Used/Removed)" },
];

export function AddStockDialog({
  open,
  onOpenChange,
  component,
  onSaved,
  onPrintLabel,
}: AddStockDialogProps) {
  const [loading, setLoading] = useState(false);
  const [form, setForm] = useState({
    transaction_type: "purchase",
    quantity: "",
    unit_cost: "",
    supplier: "",
    supplier_code: "",
    supplier_order_ref: "",
    notes: "",
  });

  // Fetch available supplier POs for dropdown
  const { data: supplierPos = [] } = useSWR<Array<{ id: number; po_number: string; supplier_name: string; status: string }>>(
    open ? "/api/supplier-pos" : null,
    fetcher
  );

  useEffect(() => {
    if (open && component) {
      setForm({
        transaction_type: "purchase",
        quantity: "",
        unit_cost: String(component.unit_price || ""),
        supplier: component.supplier || "",
        supplier_code: component.supplier_code || "",
        supplier_order_ref: "",
        notes: "",
      });
    }
  }, [open, component]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!component) return;
    if (!form.quantity || Number(form.quantity) <= 0) {
      toast.error("Quantity must be greater than 0");
      return;
    }

    setLoading(true);
    try {
      const res = await fetch("/api/stock", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          component_id: component.id,
          transaction_type: form.transaction_type,
          quantity: Number(form.quantity),
          unit_cost: form.unit_cost ? Number(form.unit_cost) : null,
          supplier: form.supplier || null,
          supplier_order_ref: form.supplier_order_ref || null,
          notes: form.notes || null,
        }),
      });

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

      const typeLabel = transactionTypes.find(
        (t) => t.value === form.transaction_type
      )?.label;
      toast.success(
        `Stock ${form.transaction_type === "consumption" ? "reduced" : "added"}: ${form.quantity} units (${typeLabel})`
      );
      const qty = Number(form.quantity);
      const partNum = component.part_number;
      onSaved();
      onOpenChange(false);
      // Prompt label printing for non-consumption transactions
      if (form.transaction_type !== "consumption" && onPrintLabel) {
        onPrintLabel(partNum, qty);
      }
    } catch (err) {
      toast.error(
        err instanceof Error ? err.message : "Failed to update stock"
      );
    } finally {
      setLoading(false);
    }
  }

  const totalCost =
    form.unit_cost && form.quantity
      ? (Number(form.unit_cost) * Number(form.quantity)).toFixed(2)
      : null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[480px]">
        <DialogHeader>
          <DialogTitle>
            {form.transaction_type === "consumption"
              ? "Remove Stock"
              : "Add Stock"}
          </DialogTitle>
          <DialogDescription>
            {component?.name} ({component?.part_number}) - Current stock:{" "}
            <strong>{component?.stock_quantity}</strong>
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="transaction_type">Transaction Type</Label>
            <Select
              value={form.transaction_type}
              onValueChange={(v) =>
                setForm({ ...form, transaction_type: v })
              }
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {transactionTypes.map((t) => (
                  <SelectItem key={t.value} value={t.value}>
                    {t.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="quantity">Quantity</Label>
              <Input
                id="quantity"
                type="number"
                min={1}
                step={1}
                value={form.quantity}
                onChange={(e) =>
                  setForm({ ...form, quantity: e.target.value })
                }
                placeholder="e.g. 100"
                required
              />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="unit_cost">Unit Cost (EUR)</Label>
              <Input
                id="unit_cost"
                type="number"
                min={0}
                step={0.0001}
                value={form.unit_cost}
                onChange={(e) =>
                  setForm({ ...form, unit_cost: e.target.value })
                }
                placeholder="0.0000"
              />
            </div>
          </div>

          {totalCost && (
            <div className="rounded-md bg-muted px-3 py-2 text-sm">
              Total cost:{" "}
              <span className="font-semibold font-mono">
                {formatCurrency(Number(totalCost))}
              </span>
            </div>
          )}

          {form.transaction_type !== "consumption" && (
            <>
              <div className="grid grid-cols-2 gap-4">
                <div className="flex flex-col gap-2">
                  <Label htmlFor="supplier">Supplier</Label>
                  <Input
                    id="supplier"
                    value={form.supplier}
                    onChange={(e) =>
                      setForm({ ...form, supplier: e.target.value })
                    }
                    placeholder="e.g. Digi-Key"
                  />
                </div>
                <div className="flex flex-col gap-2">
                  <Label htmlFor="supplier_code">Supplier Code</Label>
                  <Input
                    id="supplier_code"
                    value={form.supplier_code || ""}
                    onChange={(e) =>
                      setForm({ ...form, supplier_code: e.target.value })
                    }
                    placeholder="e.g. C245215"
                    className="font-mono"
                  />
                </div>
              </div>
              {form.transaction_type === "purchase" && (
                <div className="flex flex-col gap-2">
                  <Label htmlFor="supplier_order_ref">Purchase Order</Label>
                  <Select
                    value={form.supplier_order_ref}
                    onValueChange={(v) =>
                      setForm({ ...form, supplier_order_ref: v === "none" ? "" : v })
                    }
                  >
                    <SelectTrigger className="font-mono">
                      <SelectValue placeholder="Select PO (required for purchase)" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">No PO</SelectItem>
                      {supplierPos
                        .filter((po) => po.status === "pending" || po.status === "ordered" || po.status === "partial")
                        .map((po) => (
                          <SelectItem key={po.id} value={po.po_number}>
                            <span className="font-mono">{po.po_number}</span>
                            <span className="text-muted-foreground ml-2 text-xs">
                              ({po.supplier_name} - {po.status})
                            </span>
                          </SelectItem>
                        ))}
                    </SelectContent>
                  </Select>
                  <p className="text-xs text-muted-foreground">Only open POs (pending, ordered, partial) are shown</p>
                </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="Optional notes about this transaction..."
              rows={2}
            />
          </div>

          <div className="flex justify-end gap-2 pt-2">
            <Button
              type="button"
              variant="outline"
              onClick={() => onOpenChange(false)}
            >
              Cancel
            </Button>
            <Button
              type="submit"
              disabled={loading}
              variant={
                form.transaction_type === "consumption"
                  ? "destructive"
                  : "default"
              }
            >
              {loading
                ? "Saving..."
                : form.transaction_type === "consumption"
                  ? "Remove Stock"
                  : "Add Stock"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}