"use client"

import { useState } from "react"

import type { InvitationMember } from "@/lib/db/types"
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
import type { MealPreference } from "@/lib/validation/response"

const mealOptions: MealPreference[] = ["meat", "fish", "vegetarian", "vegan", "kids", "other"]

export function RsvpGuestResponse({
  member,
  index,
  dictionary,
  disabled,
}: {
  member: InvitationMember
  index: number
  dictionary: GuestDictionary
  disabled: boolean
}) {
  const [attending, setAttending] = useState(member.attending)

  return (
    <fieldset
      className="grid gap-6 border-b border-wedding-line py-10 disabled:opacity-60 max-w-3xl mx-auto"
      disabled={disabled}
    >
      <legend className="sr-only">{member.name}</legend>
      <p className="wedding-section-label">0{index + 1}</p>
      <div>
        <h3 className="font-wedding-display text-wedding-medium">{member.name}</h3>
        <p id={`attendance-label-${member.id}`} className="mt-2 font-wedding-ui text-sm">
          {dictionary.form.attending}
        </p>
      </div>
      <div className="grid gap-6 wedding-md:grid-cols-2">
        <div
          role="radiogroup"
          aria-labelledby={`attendance-label-${member.id}`}
          className="flex flex-wrap gap-3"
        >
          {[true, false].map((value) => (
            <label
              key={String(value)}
              className={`flex flex-1 items-center justify-center gap-2 border p-3 font-wedding-display text-lg focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-wedding-terracotta ${
                disabled ? "cursor-not-allowed" : "cursor-pointer"
              } ${
                attending === value
                  ? "border-wedding-terracotta bg-wedding-cream"
                  : "border-wedding-line"
              }`}
            >
              <input
                className="size-4 shrink-0 accent-wedding-terracotta"
                type="radio"
                name={`attending-${member.id}`}
                value={value ? "yes" : "no"}
                checked={attending === value}
                onChange={() => setAttending(value)}
                required
              />
              {value ? dictionary.form.yes : dictionary.form.no}
            </label>
          ))}
        </div>
        <label className="font-wedding-ui text-sm">
          <span>{dictionary.form.mealPreference}{attending === true ? " *" : ""}</span>
          <select
            name={`meal-${member.id}`}
            defaultValue={member.meal_preference ?? ""}
            required={attending === true}
            disabled={attending === false}
            className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3 disabled:opacity-50"
          >
            <option value="">{dictionary.form.mealPlaceholder}</option>
            {mealOptions.map((meal) => (
              <option key={meal} value={meal}>{dictionary.meals[meal]}</option>
            ))}
          </select>
        </label>
        <label className="font-wedding-ui text-sm wedding-md:col-span-2">
          <span>{dictionary.form.dietaryRestrictions}</span>
          <input
            name={`dietary-${member.id}`}
            defaultValue={member.dietary_restrictions ?? ""}
            placeholder={dictionary.form.noRestrictions}
            className="mt-2 w-full border-b border-wedding-line bg-transparent p-3"
          />
        </label>
      </div>
    </fieldset>
  )
}