website-secure/components/bom-item-dialog.tsx

"use client";

import React from "react"

import { useEffect, useState } from "react";
import useSWR from "swr";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} 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 { Search, Check, ChevronsUpDown } from "lucide-react";
import type { BomItem, Component } from "@/lib/types";

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

interface BomItemDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  bomItem: BomItem | null;
  productId: number;
  onSave: (data: Partial<BomItem>) => Promise<void>;
}

export function BomItemDialog({
  open,
  onOpenChange,
  bomItem,
  onSave,
}: BomItemDialogProps) {
  const [loading, setLoading] = useState(false);
  const [componentSearch, setComponentSearch] = useState("");
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const { data: components = [] } = useSWR<Component[]>(
    "/api/components",
    fetcher
  );

  const filteredComponents = components.filter((comp) => {
    if (!componentSearch.trim()) return true;
    const q = componentSearch.toLowerCase();
    return (
      comp.part_number.toLowerCase().includes(q) ||
      comp.name.toLowerCase().includes(q)
    );
  });

  const [form, setForm] = useState({
    component_id: "",
    quantity: "1",
    reference_designator: "",
    notes: "",
  });

  useEffect(() => {
    if (bomItem) {
      setForm({
        component_id: String(bomItem.component_id),
        quantity: String(bomItem.quantity),
        reference_designator: bomItem.reference_designator || "",
        notes: bomItem.notes || "",
      });
    } else {
      setForm({
        component_id: "",
        quantity: "1",
        reference_designator: "",
        notes: "",
      });
    }
    setComponentSearch("");
    setDropdownOpen(false);
  }, [bomItem, open]);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    try {
      await onSave({
        component_id: Number(form.component_id),
        quantity: Number(form.quantity),
        reference_designator: form.reference_designator || null,
        notes: form.notes || null,
      });
      onOpenChange(false);
    } finally {
      setLoading(false);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>
            {bomItem ? "Edit BOM Item" : "Add Component to BOM"}
          </DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="flex flex-col gap-4 pt-2">
          <div className="flex flex-col gap-2">
            <Label htmlFor="bom_component">Component *</Label>
            <div className="relative">
              <Button
                type="button"
                variant="outline"
                className="w-full justify-between font-normal"
                onClick={() => setDropdownOpen(!dropdownOpen)}
              >
                {form.component_id ? (
                  <span className="truncate">
                    <span className="font-mono text-xs mr-2">
                      {components.find((c) => String(c.id) === form.component_id)?.part_number}
                    </span>
                    {components.find((c) => String(c.id) === form.component_id)?.name}
                  </span>
                ) : (
                  <span className="text-muted-foreground">Select a component</span>
                )}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>

              {dropdownOpen && (
                <div className="absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-lg">
                  <div className="flex items-center gap-2 border-b px-3 py-2">
                    <Search className="h-4 w-4 text-muted-foreground shrink-0" />
                    <input
                      type="text"
                      className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
                      placeholder="Search by part number or name..."
                      value={componentSearch}
                      onChange={(e) => setComponentSearch(e.target.value)}
                      autoFocus
                    />
                  </div>
                  <div className="max-h-[200px] overflow-y-auto p-1">
                    {filteredComponents.length === 0 ? (
                      <div className="py-4 text-center text-sm text-muted-foreground">
                        No components found
                      </div>
                    ) : (
                      filteredComponents.map((comp) => (
                        <button
                          key={comp.id}
                          type="button"
                          className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent/50 cursor-pointer"
                          onClick={() => {
                            setForm({ ...form, component_id: String(comp.id) });
                            setDropdownOpen(false);
                            setComponentSearch("");
                          }}
                        >
                          {form.component_id === String(comp.id) ? (
                            <Check className="h-3.5 w-3.5 text-primary shrink-0" />
                          ) : (
                            <span className="w-3.5 shrink-0" />
                          )}
                          <span className="font-mono text-xs text-muted-foreground min-w-[80px]">
                            {comp.part_number}
                          </span>
                          <span className="truncate">{comp.name}</span>
                        </button>
                      ))
                    )}
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="flex flex-col gap-2">
              <Label htmlFor="bom_qty">Quantity *</Label>
              <Input
                id="bom_qty"
                type="number"
                min="1"
                value={form.quantity}
                onChange={(e) => setForm({ ...form, quantity: e.target.value })}
                required
              />
            </div>
            <div className="flex flex-col gap-2">
              <Label htmlFor="ref_des">Reference Designator</Label>
              <Input
                id="ref_des"
                value={form.reference_designator}
                onChange={(e) =>
                  setForm({ ...form, reference_designator: e.target.value })
                }
                placeholder="e.g. R1, C4, U2"
                className="font-mono"
              />
            </div>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="bom_notes">Notes</Label>
            <Textarea
              id="bom_notes"
              value={form.notes}
              onChange={(e) => setForm({ ...form, notes: e.target.value })}
              placeholder="Additional notes..."
              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 || !form.component_id}>
              {loading ? "Saving..." : bomItem ? "Update" : "Add to BOM"}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}