import type { InvitationResponse } from "@/lib/db/types"
import type { GuestDictionary } from "@/lib/i18n/dictionaries"

function dateValue(value: Date | string | null | undefined) {
  return value instanceof Date ? value.toISOString().slice(0, 10) : value ?? ""
}

export function RsvpTravelFields({
  response,
  dictionary,
  disabled,
}: {
  response: InvitationResponse | null
  dictionary: GuestDictionary
  disabled: boolean
}) {
  return (
    <fieldset className="grid gap-6 border-b border-wedding-line py-10 max-w-3xl mx-auto" disabled={disabled}>
      <legend className="sr-only">{dictionary.sections.travel}</legend>
      <p className="wedding-section-label">02</p>
      <div><h3 className="font-wedding-display text-wedding-medium">{dictionary.sections.travel}</h3></div>
      <div className="grid gap-6 wedding-md:grid-cols-2">
        <label className="font-wedding-ui text-sm"><span>{dictionary.form.arrivalDate}</span><input type="date" name="arrivalDate" defaultValue={dateValue(response?.arrival_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
        <label className="font-wedding-ui text-sm"><span>{dictionary.form.departureDate}</span><input type="date" name="departureDate" defaultValue={dateValue(response?.departure_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
        <label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.stayLocation}</span><input name="stayLocation" defaultValue={response?.stay_location ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
        <div className="wedding-md:col-span-2"><p className="font-wedding-ui text-sm">{dictionary.form.needsTransportHelp}</p><div className="mt-3 flex gap-6 font-wedding-ui text-sm"><label><input type="radio" name="needsTransportHelp" value="yes" defaultChecked={response?.needs_transport_help === true} /> {dictionary.form.yes}</label><label><input type="radio" name="needsTransportHelp" value="no" defaultChecked={response?.needs_transport_help === false} /> {dictionary.form.no}</label></div></div>
        <label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.messageToCouple}</span><textarea name="messageToCouple" defaultValue={response?.message_to_couple ?? ""} rows={4} className="mt-2 w-full border border-wedding-line bg-transparent p-3" /></label>
      </div>
    </fieldset>
  )
}