Extrudex/frontend/src/components/FilamentForm.tsx

import { useState, useEffect, useMemo } from 'react'
import { X, Save, AlertCircle } from 'lucide-react'
import ColorSwatch from './ColorSwatch'
import { createFilament, updateFilament, fetchMaterialBases, fetchMaterialFinishes, fetchMaterialModifiers } from '../services/filamentService'
import type { FilamentSpool, MaterialBase, MaterialFinish, MaterialModifier } from '../types/filament'
import { useQuery } from '@tanstack/react-query'

interface FilamentFormProps {
  mode: 'create' | 'edit'
  initialData?: FilamentSpool | null
  onClose: () => void
  onSuccess: () => void
}

interface FormErrors {
  [key: string]: string
}

export default function FilamentForm({ mode, initialData, onClose, onSuccess }: FilamentFormProps) {
  const [name, setName] = useState('')
  const [materialBaseId, setMaterialBaseId] = useState('')
  const [materialFinishId, setMaterialFinishId] = useState('1')
  const [materialModifierId, setMaterialModifierId] = useState('')
  const [colorHex, setColorHex] = useState('#3B82F6')
  const [brand, setBrand] = useState('')
  const [diameterMm, setDiameterMm] = useState('1.75')
  const [initialGrams, setInitialGrams] = useState('')
  const [remainingGrams, setRemainingGrams] = useState('')
  const [costUsd, setCostUsd] = useState('')
  const [lowStockThreshold, setLowStockThreshold] = useState('50')
  const [notes, setNotes] = useState('')
  const [barcode, setBarcode] = useState('')
  const [errors, setErrors] = useState<FormErrors>({})
  const [submitting, setSubmitting] = useState(false)
  const [submitError, setSubmitError] = useState<string | null>(null)

  const { data: materials } = useQuery({
    queryKey: ['materials'],
    queryFn: fetchMaterialBases,
    staleTime: Infinity,
  })
  const { data: finishes } = useQuery({
    queryKey: ['finishes'],
    queryFn: fetchMaterialFinishes,
    staleTime: Infinity,
  })
  const { data: modifiers } = useQuery({
    queryKey: ['modifiers'],
    queryFn: fetchMaterialModifiers,
    staleTime: Infinity,
  })

  useEffect(() => {
    if (mode === 'edit' && initialData) {
      setName(initialData.name ?? '')
      setMaterialBaseId(String(initialData.material_base_id ?? ''))
      setMaterialFinishId(String(initialData.material_finish_id ?? '1'))
      setMaterialModifierId(initialData.material_modifier_id ? String(initialData.material_modifier_id) : '')
      setColorHex(initialData.color_hex ?? '#3B82F6')
      setBrand(initialData.brand ?? '')
      setDiameterMm(String(initialData.diameter_mm ?? 1.75))
      setInitialGrams(String(initialData.initial_grams ?? ''))
      setRemainingGrams(String(initialData.remaining_grams ?? ''))
      setCostUsd(initialData.cost_usd != null ? String(initialData.cost_usd) : '')
      setLowStockThreshold(String(initialData.low_stock_threshold_grams ?? 50))
      setNotes(initialData.notes ?? '')
      setBarcode(initialData.barcode ?? '')
    }
  }, [mode, initialData])

  const colorHexValid = useMemo(() => {
    return /^#[0-9A-Fa-f]{6}$/.test(colorHex)
  }, [colorHex])

  function validate(): FormErrors {
    const e: FormErrors = {}
    if (!name.trim()) e.name = 'Name is required'
    if (!materialBaseId) e.material_base_id = 'Material Base is required'
    if (!materialFinishId) e.material_finish_id = 'Material Finish is required'
    if (!colorHexValid) e.color_hex = 'Enter a valid hex color (e.g., #FF0000)'
    if (!initialGrams || Number(initialGrams) <= 0) e.initial_grams = 'Must be > 0'
    if (remainingGrams === '' || Number(remainingGrams) < 0) e.remaining_grams = 'Must be >= 0'
    if (Number(remainingGrams) > Number(initialGrams)) e.remaining_grams = 'Cannot exceed Initial Grams'
    if (costUsd && Number(costUsd) < 0) e.cost_usd = 'Must be >= 0'
    if (!diameterMm || Number(diameterMm) <= 0) e.diameter_mm = 'Must be > 0'
    if (!lowStockThreshold || Number(lowStockThreshold) < 0) e.low_stock_threshold_grams = 'Must be >= 0'
    return e
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSubmitError(null)
    const validation = validate()
    if (Object.keys(validation).length > 0) {
      setErrors(validation)
      return
    }
    setErrors({})
    setSubmitting(true)

    const payload: Record<string, unknown> = {
      name: name.trim(),
      material_base_id: Number(materialBaseId),
      material_finish_id: Number(materialFinishId),
      color_hex: colorHex,
      initial_grams: Number(initialGrams),
      remaining_grams: Number(remainingGrams),
      diameter_mm: Number(diameterMm),
      low_stock_threshold_grams: Number(lowStockThreshold),
    }

    if (materialModifierId) payload.material_modifier_id = Number(materialModifierId)
    if (brand.trim()) payload.brand = brand.trim()
    if (costUsd) payload.cost_usd = Number(costUsd)
    if (notes.trim()) payload.notes = notes.trim()
    if (barcode.trim()) payload.barcode = barcode.trim()

    try {
      if (mode === 'edit' && initialData) {
        await updateFilament(initialData.id, payload)
      } else {
        await createFilament(payload)
      }
      onSuccess()
      onClose()
    } catch (err: any) {
      setSubmitError(err?.response?.data?.error || 'Failed to save spool. Please try again.')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center sm:items-center bg-black/60 backdrop-blur-sm p-4 overflow-y-auto">
      <div className="w-full max-w-2xl rounded-xl bg-slate-800 border border-slate-700 shadow-2xl overflow-hidden my-4">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-700">
          <h3 className="text-lg font-semibold text-slate-100">
            {mode === 'edit' ? 'Edit Filament Spool' : 'Add Filament Spool'}
          </h3>
          <button
            onClick={onClose}
            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-100 hover:bg-slate-700 transition-colors"
            type="button"
            aria-label="Close"
          >
            <X size={18} />
          </button>
        </div>

        {/* Error banner */}
        {submitError && (
          <div className="mx-6 mt-4 flex items-start gap-2 rounded-lg bg-red-900/30 border border-red-700 px-4 py-3 text-sm text-red-300">
            <AlertCircle size={16} className="shrink-0 mt-0.5" />
            <span>{submitError}</span>
          </div>
        )}

        {/* Form */}
        <form onSubmit={handleSubmit} className="px-6 py-4 space-y-5">
          {/* Row 1: Name + Brand */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Name <span className="text-red-400">*</span></label>
              <input
                type="text"
                value={name}
                onChange={e => setName(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.name ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
                placeholder="e.g. Sunlu PLA Silk Red"
              />
              {errors.name && <p className="mt-1 text-xs text-red-400">{errors.name}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Brand</label>
              <input
                type="text"
                value={brand}
                onChange={e => setBrand(e.target.value)}
                className="w-full rounded-lg bg-slate-900 border border-slate-600 px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                placeholder="e.g. Hatchbox"
              />
            </div>
          </div>

          {/* Row 2: Material Base + Finish + Modifier */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Material Base <span className="text-red-400">*</span></label>
              <select
                value={materialBaseId}
                onChange={e => setMaterialBaseId(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.material_base_id ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
              >
                <option value="">Select…</option>
                {materials?.map((m: MaterialBase) => (
                  <option key={m.id} value={m.id}>{m.name}</option>
                ))}
              </select>
              {errors.material_base_id && <p className="mt-1 text-xs text-red-400">{errors.material_base_id}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Finish <span className="text-red-400">*</span></label>
              <select
                value={materialFinishId}
                onChange={e => setMaterialFinishId(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.material_finish_id ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
              >
                {finishes?.map((f: MaterialFinish) => (
                  <option key={f.id} value={f.id}>{f.name}</option>
                ))}
              </select>
              {errors.material_finish_id && <p className="mt-1 text-xs text-red-400">{errors.material_finish_id}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Modifier</label>
              <select
                value={materialModifierId}
                onChange={e => setMaterialModifierId(e.target.value)}
                className="w-full rounded-lg bg-slate-900 border border-slate-600 px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
                <option value="">None</option>
                {modifiers?.map((m: MaterialModifier) => (
                  <option key={m.id} value={m.id}>{m.name}</option>
                ))}
              </select>
            </div>
          </div>

          {/* Row 3: Color + Diameter */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Color <span className="text-red-400">*</span></label>
              <div className="flex items-center gap-3">
                <input
                  type="color"
                  value={colorHex}
                  onChange={e => setColorHex(e.target.value)}
                  className="h-10 w-14 rounded border border-slate-600 bg-slate-900 cursor-pointer"
                />
                <div className="flex-1">
                  <input
                    type="text"
                    value={colorHex}
                    onChange={e => setColorHex(e.target.value)}
                    className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 font-mono uppercase focus:outline-none focus:ring-2 ${errors.color_hex ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
                    placeholder="#FF0000"
                    maxLength={7}
                  />
                </div>
                <ColorSwatch colorHex={colorHex} size={32} />
              </div>
              {errors.color_hex && <p className="mt-1 text-xs text-red-400">{errors.color_hex}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Diameter (mm) <span className="text-red-400">*</span></label>
              <input
                type="number"
                step="0.01"
                value={diameterMm}
                onChange={e => setDiameterMm(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.diameter_mm ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
              />
              {errors.diameter_mm && <p className="mt-1 text-xs text-red-400">{errors.diameter_mm}</p>}
            </div>
          </div>

          {/* Row 4: Grams */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Initial Grams <span className="text-red-400">*</span></label>
              <input
                type="number"
                value={initialGrams}
                onChange={e => setInitialGrams(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.initial_grams ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
              />
              {errors.initial_grams && <p className="mt-1 text-xs text-red-400">{errors.initial_grams}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Remaining Grams <span className="text-red-400">*</span></label>
              <input
                type="number"
                value={remainingGrams}
                onChange={e => setRemainingGrams(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.remaining_grams ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
              />
              {errors.remaining_grams && <p className="mt-1 text-xs text-red-400">{errors.remaining_grams}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Cost (USD)</label>
              <input
                type="number"
                step="0.01"
                value={costUsd}
                onChange={e => setCostUsd(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.cost_usd ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
              />
            </div>
          </div>

          {/* Row 5: Threshold + Barcode */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Low Stock Threshold (g) <span className="text-red-400">*</span></label>
              <input
                type="number"
                value={lowStockThreshold}
                onChange={e => setLowStockThreshold(e.target.value)}
                className={`w-full rounded-lg bg-slate-900 border px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 ${errors.low_stock_threshold_grams ? 'border-red-500 focus:ring-red-500' : 'border-slate-600 focus:ring-emerald-500'}`}
              />
              {errors.low_stock_threshold_grams && <p className="mt-1 text-xs text-red-400">{errors.low_stock_threshold_grams}</p>}
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-300 mb-1">Barcode</label>
              <input
                type="text"
                value={barcode}
                onChange={e => setBarcode(e.target.value)}
                className="w-full rounded-lg bg-slate-900 border border-slate-600 px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                placeholder="e.g. 123456789012"
              />
            </div>
          </div>

          {/* Notes */}
          <div>
            <label className="block text-sm font-medium text-slate-300 mb-1">Notes</label>
            <textarea
              rows={3}
              value={notes}
              onChange={e => setNotes(e.target.value)}
              className="w-full rounded-lg bg-slate-900 border border-slate-600 px-3 py-2.5 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 resize-y"
              placeholder="Print temperature tips, storage notes, etc."
            />
          </div>

          {/* Footer actions */}
          <div className="flex justify-end gap-3 pt-2">
            <button
              type="button"
              onClick={onClose}
              className="rounded-lg bg-slate-700 px-4 py-2.5 text-sm font-medium text-slate-200 hover:bg-slate-600 transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={submitting}
              className="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-emerald-500 active:bg-emerald-700 disabled:opacity-50 transition-colors"
            >
              <Save size={16} />
              {submitting ? 'Saving…' : mode === 'edit' ? 'Update Spool' : 'Create Spool'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}