import { useState } from 'react'
import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import {
  productDetailOptions, productMutations, productKeys,
  unitListOptions, unitMutations, unitKeys,
  productSupplierListOptions, productSupplierMutations, productSupplierKeys,
  priceHistoryOptions, supplierListOptions,
  stockReceiptListOptions, stockReceiptMutations, stockReceiptKeys,
} from '@/api/inventory'
import { ProductForm } from '@/components/inventory/product-form'
import { InventoryUnitForm } from '@/components/inventory/inventory-unit-form'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Skeleton } from '@/components/ui/skeleton'
import { Checkbox } from '@/components/ui/checkbox'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { ArrowLeft, Plus, Pencil, Star, Trash2 } from 'lucide-react'
import { toast } from 'sonner'
import { cn } from '@/lib/utils'
import { useAuthStore } from '@/stores/auth.store'
import type { InventoryUnit, ProductSupplier, UnitCondition, UnitStatus } from '@/types/inventory'

const CONDITION_CLASSES: Record<UnitCondition, string> = {
  new: 'bg-blue-100 text-blue-800 border border-blue-300',
  excellent: 'bg-green-100 text-green-800 border border-green-300',
  good: 'bg-emerald-100 text-emerald-800 border border-emerald-300',
  fair: 'bg-yellow-100 text-yellow-800 border border-yellow-300',
  poor: 'bg-red-100 text-red-800 border border-red-300',
}

const STATUS_CLASSES: Record<UnitStatus, string> = {
  available: 'bg-green-100 text-green-800 border border-green-300',
  sold: 'bg-gray-100 text-gray-600 border border-gray-300',
  rented: 'bg-purple-100 text-purple-800 border border-purple-300',
  on_trial: 'bg-cyan-100 text-cyan-800 border border-cyan-300',
  in_repair: 'bg-orange-100 text-orange-800 border border-orange-300',
  layaway: 'bg-indigo-100 text-indigo-800 border border-indigo-300',
  lost: 'bg-red-100 text-red-800 border border-red-300',
  retired: 'bg-gray-100 text-gray-400 border border-gray-200',
}

const STATUS_LABELS: Record<UnitStatus, string> = {
  available: 'Available', sold: 'Sold', rented: 'Rented', on_trial: 'On Trial',
  in_repair: 'In Repair', layaway: 'Layaway', lost: 'Lost', retired: 'Retired',
}

export const Route = createFileRoute('/_authenticated/inventory/$productId')({
  validateSearch: (search: Record<string, unknown>) => ({
    tab: (search.tab as string) || 'details',
  }),
  component: ProductDetailPage,
})

function ProductDetailPage() {
  const { productId } = useParams({ from: '/_authenticated/inventory/$productId' })
  const search = Route.useSearch()
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const hasPermission = useAuthStore((s) => s.hasPermission)
  const tab = search.tab ?? 'details'
  const [addUnitOpen, setAddUnitOpen] = useState(false)
  const [editUnit, setEditUnit] = useState<InventoryUnit | null>(null)
  const [qtyEdit, setQtyEdit] = useState<string>('')
  const [addSupplierOpen, setAddSupplierOpen] = useState(false)
  const [editSupplier, setEditSupplier] = useState<ProductSupplier | null>(null)
  const [addReceiptOpen, setAddReceiptOpen] = useState(false)

  const { data: product, isLoading } = useQuery(productDetailOptions(productId))
  const { data: unitsData } = useQuery({ ...unitListOptions(productId), enabled: tab === 'units' })
  const units = unitsData?.data ?? []

  const { data: suppliersData } = useQuery({ ...productSupplierListOptions(productId), enabled: tab === 'suppliers' })
  const linkedSuppliers = suppliersData?.data ?? []

  const { data: priceHistoryData } = useQuery({ ...priceHistoryOptions(productId), enabled: tab === 'price-history' })
  const priceHistoryRows = priceHistoryData?.data ?? []

  const { data: stockReceiptsData } = useQuery({ ...stockReceiptListOptions(productId), enabled: tab === 'stock-receipts' })
  const stockReceiptRows = stockReceiptsData?.data ?? []


  const updateMutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => productMutations.update(productId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: productKeys.detail(productId) })
      queryClient.invalidateQueries({ queryKey: productKeys.all })
      toast.success('Product updated')
    },
    onError: (err) => toast.error(err instanceof Error ? err.message : 'Update failed'),
  })

  const createUnitMutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => unitMutations.create(productId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: unitKeys.byProduct(productId) })
      toast.success('Unit added')
      setAddUnitOpen(false)
    },
    onError: (err) => toast.error(err.message),
  })

  const updateUnitMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
      unitMutations.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: unitKeys.byProduct(productId) })
      toast.success('Unit updated')
      setEditUnit(null)
    },
    onError: (err) => toast.error(err.message),
  })

  const addSupplierMutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => productSupplierMutations.create(productId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: productSupplierKeys.byProduct(productId) })
      toast.success('Supplier linked')
      setAddSupplierOpen(false)
    },
    onError: (err) => toast.error(err instanceof Error ? err.message : 'Failed'),
  })

  const updateSupplierMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: Record<string, unknown> }) =>
      productSupplierMutations.update(productId, id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: productSupplierKeys.byProduct(productId) })
      toast.success('Supplier updated')
      setEditSupplier(null)
    },
    onError: (err) => toast.error(err instanceof Error ? err.message : 'Failed'),
  })

  const removeSupplierMutation = useMutation({
    mutationFn: (id: string) => productSupplierMutations.delete(productId, id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: productSupplierKeys.byProduct(productId) })
      toast.success('Supplier removed')
      setEditSupplier(null)
    },
    onError: (err) => toast.error(err instanceof Error ? err.message : 'Failed'),
  })

  const createReceiptMutation = useMutation({
    mutationFn: (data: Record<string, unknown>) => stockReceiptMutations.create(productId, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: stockReceiptKeys.byProduct(productId) })
      queryClient.invalidateQueries({ queryKey: productKeys.detail(productId) })
      toast.success('Stock receipt recorded')
      setAddReceiptOpen(false)
    },
    onError: (err) => toast.error(err instanceof Error ? err.message : 'Failed'),
  })

  function setTab(t: string) {
    navigate({ to: '/inventory/$productId', params: { productId }, search: { tab: t } })
  }

  function handleQtySave() {
    const qty = parseInt(qtyEdit, 10)
    if (isNaN(qty) || qty < 0) return
    updateMutation.mutate({ qtyOnHand: qty })
  }

  if (isLoading) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-10 w-full" />
        <Skeleton className="h-64 w-full max-w-lg" />
      </div>
    )
  }

  if (!product) return <p className="text-muted-foreground">Product not found</p>

  const tabs = [
    { key: 'details', label: 'Details' },
    { key: 'units', label: product.isSerialized ? 'Units' : 'Quantity' },
    { key: 'suppliers', label: 'Suppliers' },
    { key: 'stock-receipts', label: 'Stock Receipts' },
    { key: 'price-history', label: 'Price History' },
  ]

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-3">
        <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/inventory', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const, categoryId: undefined, isActive: undefined, type: undefined, lowStock: undefined } })}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div className="min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <h1 className="text-2xl font-bold">{product.name}</h1>
            {product.sku && <span className="font-mono text-sm text-muted-foreground bg-muted px-2 py-0.5 rounded">{product.sku}</span>}
            {product.isActive ? <Badge>Active</Badge> : <Badge variant="secondary">Inactive</Badge>}
          </div>
          <p className="text-sm text-muted-foreground mt-0.5">
            {[product.brand, product.model].filter(Boolean).join(' · ') || 'No brand/model'}
          </p>
        </div>
      </div>

      {/* Tabs */}
      <nav className="flex gap-1 border-b">
        {tabs.map((t) => (
          <button
            key={t.key}
            onClick={() => setTab(t.key)}
            className={cn(
              'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
              tab === t.key
                ? 'border-primary text-foreground'
                : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border',
            )}
          >
            {t.label}
          </button>
        ))}
      </nav>

      {/* Details tab */}
      {tab === 'details' && (
        <div className="max-w-lg">
          <ProductForm
            defaultValues={product}
            onSubmit={updateMutation.mutate}
            loading={updateMutation.isPending}
          />
        </div>
      )}

      {/* Units / Quantity tab */}
      {tab === 'units' && (
        <div className="space-y-4">
          {product.isSerialized ? (
            <>
              <div className="flex items-center justify-between">
                <p className="text-sm text-muted-foreground">{units.length} unit(s) on file</p>
                {hasPermission('inventory.edit') && (
                  <Dialog open={addUnitOpen} onOpenChange={setAddUnitOpen}>
                    <DialogTrigger asChild>
                      <Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Unit</Button>
                    </DialogTrigger>
                    <DialogContent>
                      <DialogHeader><DialogTitle>Add Unit</DialogTitle></DialogHeader>
                      <InventoryUnitForm
                        onSubmit={createUnitMutation.mutate}
                        loading={createUnitMutation.isPending}
                      />
                    </DialogContent>
                  </Dialog>
                )}
              </div>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Serial #</TableHead>
                      <TableHead>Condition</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Purchased</TableHead>
                      <TableHead>Cost</TableHead>
                      <TableHead>Notes</TableHead>
                      {hasPermission('inventory.edit') && <TableHead className="w-10" />}
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {units.length === 0 ? (
                      <TableRow>
                        <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
                          No units yet — add the first unit above
                        </TableCell>
                      </TableRow>
                    ) : (
                      units.map((u) => (
                        <TableRow key={u.id}>
                          <TableCell className="font-mono text-sm">{u.serialNumber ?? '—'}</TableCell>
                          <TableCell>
                            <span className={cn('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', CONDITION_CLASSES[u.condition])}>
                              {u.condition}
                            </span>
                          </TableCell>
                          <TableCell>
                            <span className={cn('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', STATUS_CLASSES[u.status])}>
                              {STATUS_LABELS[u.status]}
                            </span>
                          </TableCell>
                          <TableCell className="text-sm text-muted-foreground">
                            {u.purchaseDate ? new Date(u.purchaseDate + 'T00:00:00').toLocaleDateString() : '—'}
                          </TableCell>
                          <TableCell className="text-sm">
                            {u.purchaseCost ? `$${Number(u.purchaseCost).toFixed(2)}` : '—'}
                          </TableCell>
                          <TableCell className="text-sm text-muted-foreground max-w-[200px] truncate">
                            {u.notes ?? '—'}
                          </TableCell>
                          {hasPermission('inventory.edit') && (
                            <TableCell>
                              <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setEditUnit(u)}>
                                <Pencil className="h-3 w-3" />
                              </Button>
                            </TableCell>
                          )}
                        </TableRow>
                      ))
                    )}
                  </TableBody>
                </Table>
              </div>
            </>
          ) : (
            <div className="max-w-xs space-y-4">
              <p className="text-sm text-muted-foreground">
                This product is not serialized — track quantity as a single number.
              </p>
              <div className="space-y-2">
                <Label htmlFor="qty-edit">Quantity On Hand</Label>
                <div className="flex gap-2">
                  <Input
                    id="qty-edit"
                    type="number"
                    min={0}
                    defaultValue={product.qtyOnHand}
                    onChange={(e) => setQtyEdit(e.target.value)}
                    className="w-32"
                  />
                  <Button onClick={handleQtySave} disabled={updateMutation.isPending}>
                    {updateMutation.isPending ? 'Saving...' : 'Save'}
                  </Button>
                </div>
              </div>
              {product.qtyReorderPoint !== null && (
                <p className="text-xs text-muted-foreground">Reorder point: {product.qtyReorderPoint}</p>
              )}
            </div>
          )}
        </div>
      )}

      {/* Suppliers tab */}
      {tab === 'suppliers' && (
        <SuppliersTab
          productId={productId}
          linkedSuppliers={linkedSuppliers}
          addOpen={addSupplierOpen}
          setAddOpen={setAddSupplierOpen}
          editTarget={editSupplier}
          setEditTarget={setEditSupplier}
          addMutation={addSupplierMutation}
          updateMutation={updateSupplierMutation}
          removeMutation={removeSupplierMutation}
          canEdit={hasPermission('inventory.edit')}
        />
      )}

      {/* Stock Receipts tab */}
      {tab === 'stock-receipts' && (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <p className="text-sm text-muted-foreground">{stockReceiptRows.length} receipt(s) on record</p>
            {hasPermission('inventory.edit') && (
              <Dialog open={addReceiptOpen} onOpenChange={setAddReceiptOpen}>
                <DialogTrigger asChild>
                  <Button size="sm"><Plus className="h-4 w-4 mr-1" />Receive Stock</Button>
                </DialogTrigger>
                <DialogContent>
                  <DialogHeader><DialogTitle>Receive Stock</DialogTitle></DialogHeader>
                  <StockReceiptForm
                    linkedSuppliers={linkedSuppliers}
                    loading={createReceiptMutation.isPending}
                    onSubmit={(data) => createReceiptMutation.mutate(data)}
                  />
                </DialogContent>
              </Dialog>
            )}
          </div>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Date</TableHead>
                  <TableHead>Supplier</TableHead>
                  <TableHead>Invoice #</TableHead>
                  <TableHead className="text-right">Qty</TableHead>
                  <TableHead className="text-right">Cost / Unit</TableHead>
                  <TableHead className="text-right">Total Cost</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {stockReceiptRows.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                      No stock receipts yet
                    </TableCell>
                  </TableRow>
                ) : (
                  stockReceiptRows.map((r) => (
                    <TableRow key={r.id}>
                      <TableCell className="text-sm text-muted-foreground">
                        {new Date(r.receivedDate + 'T12:00:00').toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}
                      </TableCell>
                      <TableCell className="text-sm">{r.supplierName ?? <span className="text-muted-foreground">—</span>}</TableCell>
                      <TableCell className="text-sm font-mono">{r.invoiceNumber ?? <span className="text-muted-foreground">—</span>}</TableCell>
                      <TableCell className="text-sm text-right">{r.qty}</TableCell>
                      <TableCell className="text-sm text-right">${Number(r.costPerUnit).toFixed(2)}</TableCell>
                      <TableCell className="text-sm text-right font-medium">${Number(r.totalCost).toFixed(2)}</TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
          {stockReceiptRows.length > 0 && (
            <p className="text-xs text-muted-foreground text-right">
              Total invested: ${stockReceiptRows.reduce((sum, r) => sum + Number(r.totalCost), 0).toFixed(2)}
            </p>
          )}
        </div>
      )}

      {/* Price History tab */}
      {tab === 'price-history' && (
        <div className="space-y-4">
          <p className="text-sm text-muted-foreground">{priceHistoryRows.length} price change(s) on record</p>
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Date</TableHead>
                  <TableHead>Previous Price</TableHead>
                  <TableHead>New Price</TableHead>
                  <TableHead>Previous Min</TableHead>
                  <TableHead>New Min</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {priceHistoryRows.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
                      No price changes recorded yet
                    </TableCell>
                  </TableRow>
                ) : (
                  priceHistoryRows.map((h) => (
                    <TableRow key={h.id}>
                      <TableCell className="text-sm text-muted-foreground">
                        {new Date(h.createdAt).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}
                      </TableCell>
                      <TableCell className="text-sm">
                        {h.previousPrice ? `$${Number(h.previousPrice).toFixed(2)}` : '—'}
                      </TableCell>
                      <TableCell className="text-sm font-medium">
                        ${Number(h.newPrice).toFixed(2)}
                      </TableCell>
                      <TableCell className="text-sm">
                        {h.previousMinPrice ? `$${Number(h.previousMinPrice).toFixed(2)}` : '—'}
                      </TableCell>
                      <TableCell className="text-sm">
                        {h.newMinPrice ? `$${Number(h.newMinPrice).toFixed(2)}` : '—'}
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </div>
      )}

      {/* Edit unit dialog */}
      <Dialog open={!!editUnit} onOpenChange={(o) => !o && setEditUnit(null)}>
        <DialogContent>
          <DialogHeader><DialogTitle>Edit Unit</DialogTitle></DialogHeader>
          {editUnit && (
            <InventoryUnitForm
              defaultValues={editUnit}
              onSubmit={(data) => updateUnitMutation.mutate({ id: editUnit.id, data })}
              loading={updateUnitMutation.isPending}
            />
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}

// ── Suppliers tab ─────────────────────────────────────────────────────────────

function SuppliersTab({
  productId: _productId,
  linkedSuppliers,
  addOpen, setAddOpen,
  editTarget, setEditTarget,
  addMutation, updateMutation, removeMutation,
  canEdit,
}: {
  productId: string
  linkedSuppliers: ProductSupplier[]
  addOpen: boolean
  setAddOpen: (v: boolean) => void
  editTarget: ProductSupplier | null
  setEditTarget: (v: ProductSupplier | null) => void
  addMutation: { mutate: (data: Record<string, unknown>) => void; isPending: boolean }
  updateMutation: { mutate: (args: { id: string; data: Record<string, unknown> }) => void; isPending: boolean }
  removeMutation: { mutate: (id: string) => void; isPending: boolean }
  canEdit: boolean
}) {
  const { data: allSuppliersData } = useQuery(supplierListOptions({ page: 1, limit: 500, order: 'asc', sort: 'name' }))
  const allSuppliers = allSuppliersData?.data ?? []
  const linkedIds = new Set(linkedSuppliers.map((s) => s.supplierId))
  const availableSuppliers = allSuppliers.filter((s) => !linkedIds.has(s.id))

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">{linkedSuppliers.length} supplier(s) linked</p>
        {canEdit && availableSuppliers.length > 0 && (
          <Dialog open={addOpen} onOpenChange={setAddOpen}>
            <DialogTrigger asChild>
              <Button size="sm"><Plus className="mr-2 h-4 w-4" />Link Supplier</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Link Supplier</DialogTitle></DialogHeader>
              <SupplierLinkForm
                suppliers={availableSuppliers}
                onSubmit={addMutation.mutate}
                loading={addMutation.isPending}
                hasExisting={linkedSuppliers.length > 0}
              />
            </DialogContent>
          </Dialog>
        )}
      </div>

      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Supplier</TableHead>
              <TableHead>Their SKU</TableHead>
              <TableHead>Contact</TableHead>
              <TableHead>Terms</TableHead>
              <TableHead>Preferred</TableHead>
              {canEdit && <TableHead className="w-10" />}
            </TableRow>
          </TableHeader>
          <TableBody>
            {linkedSuppliers.length === 0 ? (
              <TableRow>
                <TableCell colSpan={6} className="text-center py-8 text-muted-foreground">
                  No suppliers linked — add the first supplier above
                </TableCell>
              </TableRow>
            ) : (
              linkedSuppliers.map((s) => (
                <TableRow key={s.id}>
                  <TableCell>
                    <div>
                      <p className="font-medium text-sm">{s.supplierName}</p>
                      {s.supplierEmail && (
                        <a href={`mailto:${s.supplierEmail}`} className="text-xs text-muted-foreground hover:underline" onClick={(e) => e.stopPropagation()}>
                          {s.supplierEmail}
                        </a>
                      )}
                    </div>
                  </TableCell>
                  <TableCell className="font-mono text-sm">{s.supplierSku ?? <span className="text-muted-foreground">—</span>}</TableCell>
                  <TableCell className="text-sm text-muted-foreground">{s.supplierContactName ?? '—'}</TableCell>
                  <TableCell className="text-sm text-muted-foreground">{s.supplierPaymentTerms ?? '—'}</TableCell>
                  <TableCell>
                    {s.isPreferred && (
                      <span className="inline-flex items-center gap-1 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded">
                        <Star className="h-3 w-3 fill-amber-500 text-amber-500" />Preferred
                      </span>
                    )}
                  </TableCell>
                  {canEdit && (
                    <TableCell>
                      <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setEditTarget(s)}>
                        <Pencil className="h-3 w-3" />
                      </Button>
                    </TableCell>
                  )}
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* Edit/remove supplier link dialog */}
      <Dialog open={!!editTarget} onOpenChange={(o) => !o && setEditTarget(null)}>
        <DialogContent>
          <DialogHeader><DialogTitle>Edit Supplier Link</DialogTitle></DialogHeader>
          {editTarget && (
            <div className="space-y-4">
              <p className="text-sm font-medium">{editTarget.supplierName}</p>
              <SupplierLinkEditForm
                defaultValues={editTarget}
                onSubmit={(data) => updateMutation.mutate({ id: editTarget.id, data })}
                loading={updateMutation.isPending}
              />
              <div className="border-t pt-4">
                <AlertDialog>
                  <AlertDialogTrigger asChild>
                    <Button variant="destructive" size="sm" disabled={removeMutation.isPending}>
                      <Trash2 className="h-4 w-4 mr-2" />Remove Supplier
                    </Button>
                  </AlertDialogTrigger>
                  <AlertDialogContent>
                    <AlertDialogHeader>
                      <AlertDialogTitle>Remove supplier?</AlertDialogTitle>
                      <AlertDialogDescription>
                        This will unlink {editTarget.supplierName} from this product. You can re-add it later.
                      </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                      <AlertDialogCancel>Cancel</AlertDialogCancel>
                      <AlertDialogAction onClick={() => removeMutation.mutate(editTarget.id)}>Remove</AlertDialogAction>
                    </AlertDialogFooter>
                  </AlertDialogContent>
                </AlertDialog>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}

function SupplierLinkForm({
  suppliers, onSubmit, loading, hasExisting,
}: {
  suppliers: { id: string; name: string }[]
  onSubmit: (data: Record<string, unknown>) => void
  loading: boolean
  hasExisting: boolean
}) {
  const [supplierId, setSupplierId] = useState('')
  const [supplierSku, setSupplierSku] = useState('')
  const [isPreferred, setIsPreferred] = useState(!hasExisting)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!supplierId) return
    onSubmit({ supplierId, supplierSku: supplierSku || undefined, isPreferred })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label>Supplier</Label>
        <Select value={supplierId} onValueChange={setSupplierId}>
          <SelectTrigger><SelectValue placeholder="Select supplier…" /></SelectTrigger>
          <SelectContent>
            {suppliers.map((s) => <SelectItem key={s.id} value={s.id}>{s.name}</SelectItem>)}
          </SelectContent>
        </Select>
      </div>
      <div className="space-y-2">
        <Label htmlFor="supplier-sku">Their SKU / Part #</Label>
        <Input id="supplier-sku" value={supplierSku} onChange={(e) => setSupplierSku(e.target.value)} placeholder="e.g. VLN-44-EA" />
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="is-preferred" checked={isPreferred} onCheckedChange={(v: boolean | 'indeterminate') => setIsPreferred(!!v)} />
        <Label htmlFor="is-preferred">Preferred supplier for this product</Label>
      </div>
      <Button type="submit" disabled={!supplierId || loading}>{loading ? 'Linking…' : 'Link Supplier'}</Button>
    </form>
  )
}

function StockReceiptForm({
  linkedSuppliers, onSubmit, loading,
}: {
  linkedSuppliers: ProductSupplier[]
  onSubmit: (data: Record<string, unknown>) => void
  loading: boolean
}) {
  const today = new Date().toISOString().split('T')[0]
  const [supplierId, setSupplierId] = useState('')
  const [qty, setQty] = useState('1')
  const [costPerUnit, setCostPerUnit] = useState('')
  const [receivedDate, setReceivedDate] = useState(today)
  const [invoiceNumber, setInvoiceNumber] = useState('')
  const [notes, setNotes] = useState('')

  const total = (parseFloat(qty) || 0) * (parseFloat(costPerUnit) || 0)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    onSubmit({
      supplierId: supplierId || undefined,
      qty: parseInt(qty, 10),
      costPerUnit: parseFloat(costPerUnit),
      receivedDate,
      invoiceNumber: invoiceNumber || undefined,
      notes: notes || undefined,
    })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label>Supplier</Label>
        <Select value={supplierId || 'none'} onValueChange={(v) => setSupplierId(v === 'none' ? '' : v)}>
          <SelectTrigger><SelectValue placeholder="Select supplier…" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="none">No supplier</SelectItem>
            {linkedSuppliers.map((s) => (
              <SelectItem key={s.supplierId} value={s.supplierId}>{s.supplierName}</SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="rcpt-qty">Qty Received *</Label>
          <Input id="rcpt-qty" type="number" min="1" value={qty} onChange={(e) => setQty(e.target.value)} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="rcpt-cost">Cost / Unit *</Label>
          <Input id="rcpt-cost" type="number" step="0.01" min="0" value={costPerUnit} onChange={(e) => setCostPerUnit(e.target.value)} placeholder="0.00" required />
        </div>
      </div>
      {costPerUnit && qty && (
        <p className="text-sm text-muted-foreground">Total cost: <span className="font-medium text-foreground">${total.toFixed(2)}</span></p>
      )}
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="rcpt-date">Received Date *</Label>
          <Input id="rcpt-date" type="date" value={receivedDate} onChange={(e) => setReceivedDate(e.target.value)} required />
        </div>
        <div className="space-y-2">
          <Label htmlFor="rcpt-inv">Invoice #</Label>
          <Input id="rcpt-inv" value={invoiceNumber} onChange={(e) => setInvoiceNumber(e.target.value)} placeholder="INV-001" />
        </div>
      </div>
      <div className="space-y-2">
        <Label htmlFor="rcpt-notes">Notes</Label>
        <Input id="rcpt-notes" value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Optional notes" />
      </div>
      <Button type="submit" disabled={loading || !costPerUnit || !qty} className="w-full">
        {loading ? 'Recording…' : 'Record Receipt'}
      </Button>
    </form>
  )
}

function SupplierLinkEditForm({
  defaultValues, onSubmit, loading,
}: {
  defaultValues: ProductSupplier
  onSubmit: (data: Record<string, unknown>) => void
  loading: boolean
}) {
  const [supplierSku, setSupplierSku] = useState(defaultValues.supplierSku ?? '')
  const [isPreferred, setIsPreferred] = useState(defaultValues.isPreferred)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    onSubmit({ supplierSku: supplierSku || undefined, isPreferred })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="edit-sku">Their SKU / Part #</Label>
        <Input id="edit-sku" value={supplierSku} onChange={(e) => setSupplierSku(e.target.value)} placeholder="e.g. VLN-44-EA" />
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="edit-preferred" checked={isPreferred} onCheckedChange={(v: boolean | 'indeterminate') => setIsPreferred(!!v)} />
        <Label htmlFor="edit-preferred">Preferred supplier for this product</Label>
      </div>
      <Button type="submit" disabled={loading}>{loading ? 'Saving…' : 'Save Changes'}</Button>
    </form>
  )
}
