import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export interface ProductFormValues {
  name: string
  description: string
  price: number
  stock: number
  categoryId: string
  dropId: string | null
  editionSize: number | null
  active: boolean
  images: string[]
  sizes: string[]
  styles: string[]
  materials: string[]
}

export function ProductForm({
  action,
  categories,
  drops,
  defaultValues,
  submitLabel,
}: {
  action: (formData: FormData) => void
  categories: { id: string; name: string }[]
  drops: { id: string; name: string }[]
  defaultValues?: ProductFormValues
  submitLabel: string
}) {
  return (
    <form action={action} className="space-y-6 max-w-2xl">
      <Input label="Nom" name="name" required defaultValue={defaultValues?.name} />

      <Textarea
        label="Description"
        name="description"
        required
        rows={4}
        defaultValue={defaultValues?.description}
      />

      <div className="grid grid-cols-2 gap-4">
        <Input
          label="Prix (centimes)"
          name="price"
          type="number"
          min={0}
          required
          defaultValue={defaultValues?.price}
        />
        <Input
          label="Stock"
          name="stock"
          type="number"
          min={0}
          required
          defaultValue={defaultValues?.stock}
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <Select label="Catégorie" name="categoryId" required defaultValue={defaultValues?.categoryId}>
          <option value="" disabled>
            Choisir…
          </option>
          {categories.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </Select>
        <Select label="Drop (optionnel)" name="dropId" defaultValue={defaultValues?.dropId ?? ""}>
          <option value="">Aucun</option>
          {drops.map((d) => (
            <option key={d.id} value={d.id}>
              {d.name}
            </option>
          ))}
        </Select>
      </div>

      <Input
        label="Taille de l'édition (optionnel)"
        name="editionSize"
        type="number"
        min={1}
        defaultValue={defaultValues?.editionSize ?? undefined}
      />

      <Input
        label="Tailles (séparées par des virgules)"
        name="sizes"
        placeholder="S, M, L, XL"
        defaultValue={defaultValues?.sizes.join(", ")}
      />
      <Input
        label="Styles (slugs séparés par des virgules)"
        name="styles"
        placeholder="techwear, urbain, minimal"
        defaultValue={defaultValues?.styles.join(", ")}
      />
      <Input
        label="Matériaux (slugs séparés par des virgules)"
        name="materials"
        placeholder="neoprene, cordura"
        defaultValue={defaultValues?.materials.join(", ")}
      />
      <Input
        label="URLs des images (séparées par des virgules)"
        name="images"
        placeholder="https://…, https://…"
        defaultValue={defaultValues?.images.join(", ")}
      />

      <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
        <input
          type="checkbox"
          name="active"
          defaultChecked={defaultValues?.active ?? true}
          className="h-4 w-4 accent-[var(--accent)]"
        />
        Actif (visible en boutique)
      </label>

      <div className="flex gap-3 pt-2">
        <Button type="submit">{submitLabel}</Button>
        <Button asChild variant="outline">
          <Link href="/admin/products">Annuler</Link>
        </Button>
      </div>
    </form>
  )
}