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 DropFormValues {
  name: string
  description: string | null
  releaseDate: string
  status: "UPCOMING" | "LIVE" | "SOLD_OUT"
  coverImage: string | null
  workshopVideoUrl: string | null
  stylistId: string | null
  artistId: string | null
  aiAgentId: string | null
  electricianId: string | null
  isDraft: boolean
}

export function DropForm({
  action,
  collaborators,
  defaultValues,
  submitLabel,
}: {
  action: (formData: FormData) => void
  collaborators: { id: string; name: string; role: string }[]
  defaultValues?: DropFormValues
  submitLabel: string
}) {
  const stylists = collaborators.filter((c) => c.role === "Styliste")
  const artists = collaborators.filter((c) => c.role === "Artiste" || c.role === "Graphiste")
  const aiAgents = collaborators.filter((c) => c.role === "Agent IA")
  const electricians = collaborators.filter((c) => c.role === "Électronicien")

  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"
        rows={3}
        defaultValue={defaultValues?.description ?? ""}
      />

      <div className="grid grid-cols-2 gap-4">
        <Input
          label="Date de sortie"
          name="releaseDate"
          type="date"
          required
          defaultValue={defaultValues?.releaseDate}
        />
        <Select label="Statut" name="status" required defaultValue={defaultValues?.status ?? "UPCOMING"}>
          <option value="UPCOMING">Bientôt</option>
          <option value="LIVE">Live</option>
          <option value="SOLD_OUT">Sold Out</option>
        </Select>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <Select label="Styliste" name="stylistId" defaultValue={defaultValues?.stylistId ?? ""}>
          <option value="">Aucun</option>
          {stylists.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </Select>
        <Select label="Graphiste / Artiste" name="artistId" defaultValue={defaultValues?.artistId ?? ""}>
          <option value="">Aucun</option>
          {artists.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </Select>
      </div>

      <div className="grid grid-cols-2 gap-4">
        <Select label="Agent IA (conceptualisation)" name="aiAgentId" defaultValue={defaultValues?.aiAgentId ?? ""}>
          <option value="">Aucun</option>
          {aiAgents.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </Select>
        <Select
          label="Électronicien (intégration technique)"
          name="electricianId"
          defaultValue={defaultValues?.electricianId ?? ""}
        >
          <option value="">Aucun</option>
          {electricians.map((c) => (
            <option key={c.id} value={c.id}>
              {c.name}
            </option>
          ))}
        </Select>
      </div>

      <Input
        label="Image de couverture (URL)"
        name="coverImage"
        placeholder="https://…"
        defaultValue={defaultValues?.coverImage ?? ""}
      />
      <Input
        label="URL vidéo (embed YouTube)"
        name="workshopVideoUrl"
        placeholder="https://www.youtube.com/embed/…"
        defaultValue={defaultValues?.workshopVideoUrl ?? ""}
      />

      <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
        <input
          type="checkbox"
          name="isDraft"
          defaultChecked={defaultValues?.isDraft ?? true}
          className="h-4 w-4 accent-[var(--accent)]"
        />
        Brouillon (visible et modifiable uniquement en admin, masqué du site public)
      </label>

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