import { zodResolver } from '@hookform/resolvers/zod';
import { ProjectsSchema, type Projects } from '../../../content/schemas/projects';
import { FormShell } from '../FormShell';
import { Section } from '../Section';
import { TextField } from '../fields/TextField';
import { TextAreaField } from '../fields/TextAreaField';
import { SelectField } from '../fields/SelectField';
import { ToggleField } from '../fields/ToggleField';
import { ChipsField } from '../fields/ChipsField';
import { ImageUploadField } from '../fields/ImageUploadField';
import { ArrayEditor } from '../fields/ArrayEditor';

type Props = { defaultValues: Projects };

const CATEGORY_OPTIONS = [
  { value: 'web', label: 'Web' },
  { value: 'mobile', label: 'Mobile' },
  { value: 'bot', label: 'Bot' },
  { value: 'infra', label: 'Infra' },
  { value: 'other', label: 'Autre' },
];

const STATUS_OPTIONS = [
  { value: 'live', label: 'Live' },
  { value: 'archived', label: 'Archived' },
  { value: 'private', label: 'Private' },
  { value: 'wip', label: 'WIP' },
];

export function ProjectsForm({ defaultValues }: Props) {
  return (
    <FormShell<Projects>
      section="projects"
      defaultValues={defaultValues as never}
      resolver={zodResolver(ProjectsSchema) as never}
    >
      <Section title="Projets" subtitle="// crate">
        <ArrayEditor
          name="items"
          label="Projets"
          newItem={() =>
            ({
              id: '',
              title: '',
              description: '',
              category: 'web' as const,
              status: 'live' as const,
              stack: [],
              featured: false,
            }) as never
          }
          itemLabel={(i) => `skeud #${String(i + 1).padStart(2, '0')}`}
        >
          {({ namePrefix }) => (
            <>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
                <TextField name={`${namePrefix}.title`} label="Titre" />
              </div>
              <TextField name={`${namePrefix}.subtitle`} label="Sous-titre" />
              <TextAreaField name={`${namePrefix}.description`} label="Description" rows={3} />
              <ImageUploadField name={`${namePrefix}.image`} label="Pochette" folder="projet" />
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <SelectField name={`${namePrefix}.category`} label="Catégorie" options={CATEGORY_OPTIONS} />
                <SelectField name={`${namePrefix}.status`} label="Statut" options={STATUS_OPTIONS} />
                <ToggleField name={`${namePrefix}.featured`} label="Mis en avant" />
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <TextField name={`${namePrefix}.url`} label="URL live" type="url" />
                <TextField name={`${namePrefix}.repoUrl`} label="URL repo" type="url" />
              </div>
              <ChipsField name={`${namePrefix}.stack`} label="Stack" />
            </>
          )}
        </ArrayEditor>
      </Section>
    </FormShell>
  );
}
