import { zodResolver } from '@hookform/resolvers/zod';
import { SiteSchema, type Site } from '../../../content/schemas/site';
import { FormShell } from '../FormShell';
import { Section } from '../Section';
import { TextField } from '../fields/TextField';
import { TextAreaField } from '../fields/TextAreaField';
import { ToggleField } from '../fields/ToggleField';
import { ChipsField } from '../fields/ChipsField';
import { ImageUploadField } from '../fields/ImageUploadField';

type Props = { defaultValues: Site };

export function SiteForm({ defaultValues }: Props) {
  return (
    <FormShell<Site>
      section="site"
      defaultValues={defaultValues as never}
      resolver={zodResolver(SiteSchema) as never}
    >
      <Section title="Méta" subtitle="// SEO">
        <TextField name="title" label="Titre du site" />
        <TextAreaField name="description" label="Description" rows={3} />
        <TextField name="url" label="URL canonique" type="url" />
        <ChipsField name="keywords" label="Keywords" hint="Mots-clés SEO" />
        <ImageUploadField name="ogImage" label="OG image" folder="" hint="Affichée lors d'un partage social" />
        <TextField name="twitter" label="Handle Twitter / X" placeholder="@johanleroy" />
      </Section>

      <Section title="Features" subtitle="// flags">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <ToggleField name="features.hero3D" label="Hero 3D" />
          <ToggleField name="features.smoothScroll" label="Smooth scroll (Lenis)" />
          <ToggleField name="features.customCursor" label="Curseur custom" />
          <ToggleField name="features.partyMode" label="Party mode (Konami)" />
        </div>
      </Section>
    </FormShell>
  );
}
