import React, { useState } from 'react';
import {
  Button,
  Input,
  Label,
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
  Checkbox,
} from 'xertica-ui/ui';
import { useTranslation } from 'react-i18next';

interface FormValues {
  fullName: string;
  email: string;
  notify: boolean;
}

interface FormErrors {
  fullName?: string;
  email?: string;
}

export function FormTemplate() {
  const { t } = useTranslation();
  const [values, setValues] = useState<FormValues>({ fullName: '', email: '', notify: false });
  const [errors, setErrors] = useState<FormErrors>({});
  const [submitted, setSubmitted] = useState(false);

  const validate = (v: FormValues): FormErrors => {
    const errs: FormErrors = {};
    if (v.fullName.trim().length < 3) errs.fullName = t('formTemplate.errors.fullNameRequired');
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email))
      errs.email = t('formTemplate.errors.emailInvalid');
    return errs;
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const errs = validate(values);
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSubmitted(true);
      console.log('Form submitted:', values);
    }
  };

  const handleReset = () => {
    setValues({ fullName: '', email: '', notify: false });
    setErrors({});
    setSubmitted(false);
  };

  return (
    <div className="p-6">
      <Card className="mx-auto w-full max-w-2xl">
        <CardHeader>
          <CardTitle>{t('formTemplate.title')}</CardTitle>
          <p className="text-sm text-muted-foreground">{t('formTemplate.description')}</p>
        </CardHeader>

        <form onSubmit={handleSubmit}>
          <CardContent className="grid gap-6 md:grid-cols-2">
            <div className="col-span-full space-y-2">
              <Label htmlFor="fullName">{t('formTemplate.fullNameLabel')}</Label>
              <Input
                id="fullName"
                placeholder={t('formTemplate.fullNamePlaceholder')}
                value={values.fullName}
                onChange={e => setValues(v => ({ ...v, fullName: e.target.value }))}
              />
              {errors.fullName && <p className="text-sm text-destructive">{errors.fullName}</p>}
            </div>

            <div className="col-span-full space-y-2">
              <Label htmlFor="email">{t('formTemplate.emailLabel')}</Label>
              <Input
                id="email"
                type="email"
                placeholder={t('formTemplate.emailPlaceholder')}
                value={values.email}
                onChange={e => setValues(v => ({ ...v, email: e.target.value }))}
              />
              {errors.email && <p className="text-sm text-destructive">{errors.email}</p>}
            </div>

            <div className="col-span-full flex items-center space-x-2">
              <Checkbox
                id="notify"
                checked={values.notify}
                onCheckedChange={checked => setValues(v => ({ ...v, notify: checked === true }))}
              />
              <Label htmlFor="notify" className="font-normal cursor-pointer text-sm">
                {t('formTemplate.notifyLabel')}
              </Label>
            </div>

            {submitted && (
              <div className="col-span-full rounded-[var(--radius)] bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 p-3">
                <p className="text-sm text-[var(--chart-2)]">{t('formTemplate.successMessage')}</p>
              </div>
            )}
          </CardContent>

          <CardFooter className="flex justify-end gap-2 border-t pt-6 bg-muted/20">
            <Button type="button" variant="ghost" onClick={handleReset}>
              {t('formTemplate.cancel')}
            </Button>
            <Button type="submit">{t('formTemplate.save')}</Button>
          </CardFooter>
        </form>
      </Card>
    </div>
  );
}