app.gaertan.art/src/components/commissions/CommissionOrderForm.tsx

"use client"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma"
import { commissionOrderSchema } from "@/schemas/commissionOrder"
import { calculatePrice } from "@/utils/calculatePrice"
import { zodResolver } from "@hookform/resolvers/zod"
import { useMemo, useState } from "react"
import { useForm, useWatch } from "react-hook-form"
import * as z from "zod/v4"
import { FileDropzone } from "./FileDropzone"

type CommissionTypeWithRelations = CommissionType & {
  options: (CommissionTypeOption & { option: CommissionOption })[]
  extras: (CommissionTypeExtra & { extra: CommissionExtra })[]
}

type Props = {
  types: CommissionTypeWithRelations[]
}

export function CommissionOrderForm({ types }: Props) {
  const form = useForm<z.infer<typeof commissionOrderSchema>>({
    resolver: zodResolver(commissionOrderSchema),
    defaultValues: {
      typeId: "",
      optionId: "",
      extraIds: [],
      customerName: "",
      customerEmail: "",
      message: "",
    },
  })

  const [files, setFiles] = useState<File[]>([])

  const typeId = useWatch({ control: form.control, name: "typeId" })
  const optionId = useWatch({ control: form.control, name: "optionId" })
  const extraIds = useWatch({ control: form.control, name: "extraIds" })

  const selectedType = useMemo(
    () => types.find((t) => t.id === typeId),
    [types, typeId]
  )

  const selectedOption = useMemo(
    () => selectedType?.options.find((o) => o.optionId === optionId),
    [selectedType, optionId]
  )

  const selectedExtras = useMemo(
    () => selectedType?.extras.filter((e) => extraIds?.includes(e.extraId)) ?? [],
    [selectedType, extraIds]
  )

  const price = useMemo(() => {
    if (!selectedOption) return 0

    const base = calculatePrice(selectedOption, 0)
    const extrasSum = selectedExtras.reduce(
      (sum, ext) => sum + calculatePrice(ext, base),
      0
    )

    return base + extrasSum
  }, [selectedOption, selectedExtras])

  async function onSubmit(values: z.infer<typeof commissionOrderSchema>) {
    console.log("Submit:", { ...values, files })
    // TODO: send to server
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
        <FormField
          control={form.control}
          name="typeId"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Choose a commission type</FormLabel>
              <FormControl>
                <div className="flex flex-wrap gap-2">
                  {types.map((type) => (
                    <Button
                      key={type.id}
                      type="button"
                      variant={field.value === type.id ? "default" : "outline"}
                      onClick={() => field.onChange(type.id)}
                    >
                      {type.name}
                    </Button>
                  ))}
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        {selectedType && (
          <>
            <FormField
              control={form.control}
              name="optionId"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Base Option</FormLabel>
                  <FormControl>
                    <div className="space-y-1">
                      {selectedType.options.map((opt) => (
                        <label key={opt.id} className="flex items-center gap-2">
                          <input
                            type="radio"
                            checked={field.value === opt.optionId}
                            value={opt.optionId}
                            onChange={() => field.onChange(opt.optionId)}
                          />
                          {opt.option.name}
                        </label>
                      ))}
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="extraIds"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Extras</FormLabel>
                  <FormControl>
                    <div className="space-y-1">
                      {selectedType?.extras.map((ext) => (
                        <label key={ext.id} className="flex items-center gap-2">
                          <input
                            type="checkbox"
                            checked={field.value?.includes(ext.extraId) ?? false}
                            value={ext.extraId}
                            onChange={(e) => {
                              const checked = e.target.checked
                              const newSet = new Set(field.value ?? [])
                              if (checked) {
                                newSet.add(ext.extraId)
                              } else {
                                newSet.delete(ext.extraId)
                              }
                              field.onChange(Array.from(newSet))
                            }}
                          />
                          {ext.extra.name}
                        </label>
                      ))}
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="customerName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Your Name</FormLabel>
                <FormControl>
                  <Input placeholder="Jane Doe" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="customerEmail"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input placeholder="jane@example.com" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

        <FormField
          control={form.control}
          name="message"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Project Details</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Describe what you’d like drawn..."
                  rows={4}
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <div>
          <FormLabel>Reference Images</FormLabel>
          <FileDropzone onFilesSelected={(f: File[]) => setFiles(f)} />
        </div>

        <div className="text-xl font-semibold">
          Estimated Price: €{price.toFixed(2)}
        </div>

        <Button type="submit" disabled={!form.formState.isValid}>
          Submit Request
        </Button>
      </form>
    </Form>
  )
}