'use client';

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { extractApiError } from '@/lib/api-client';
import { sendContactMessage } from '@/lib/services/contact-messages';

const SUBJECTS = [
  'Dúvida sobre tratamento',
  'Valores e orçamento',
  'Convênios',
  'Agendamento',
  'Outro assunto',
];

const schema = z.object({
  name: z.string().trim().min(3, 'Informe o seu nome').max(180),
  email: z.string().trim().email('Informe um e-mail válido').max(255),
  phone: z.string().trim().max(20, 'Telefone muito longo').optional(),
  subject: z.string().min(1, 'Escolha o assunto'),
  message: z
    .string()
    .trim()
    .min(10, 'Escreva ao menos 10 caracteres')
    .max(5000, 'A mensagem pode ter até 5000 caracteres'),
  consent: z.literal(true, {
    message: 'É necessário aceitar o tratamento de dados',
  }),
  website: z.string().optional(),
});

type FormValues = z.infer<typeof schema>;

const EMPTY: Partial<FormValues> = {
  name: '',
  email: '',
  phone: '',
  subject: '',
  message: '',
  website: '',
};

export default function ContactForm() {
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    reset,
    watch,
    formState: { errors, isSubmitting },
  } = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: EMPTY,
  });

  const messageLength = watch('message')?.length ?? 0;

  async function onSubmit(values: FormValues) {
    setError(null);
    try {
      await sendContactMessage({
        ...values,
        phone: values.phone || undefined,
        website: values.website || undefined,
      });
      reset(EMPTY);
      setSent(true);
    } catch (err) {
      setError(extractApiError(err));
    }
  }

  if (sent) {
    return (
      <div className="card border-0 shadow-sm h-100">
        <div className="card-body p-5 text-center" role="status">
          <i className="bi bi-check-circle-fill display-4 text-success" aria-hidden="true" />
          <h2 className="h4 fw-bold mt-3">Mensagem enviada!</h2>
          <p className="text-muted mb-4">
            Obrigado pelo contato. Vamos responder no e-mail informado em até um
            dia útil.
          </p>
          <button
            type="button"
            className="btn btn-outline-primary"
            onClick={() => setSent(false)}
          >
            Enviar outra mensagem
          </button>
        </div>
      </div>
    );
  }

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      noValidate
      className="card border-0 shadow-sm"
      aria-labelledby="contact-form-title"
    >
      <div className="card-body p-4">
        <h2 id="contact-form-title" className="h5 fw-bold mb-1">
          Envie uma mensagem
        </h2>
        <p className="text-muted small mb-4">Campos com * são obrigatórios.</p>

        {error && (
          <div className="alert alert-danger" role="alert">
            {error}
          </div>
        )}

        <div className="row g-3">
          <div className="col-12">
            <label htmlFor="contact-name" className="form-label">
              Nome *
            </label>
            <input
              id="contact-name"
              autoComplete="name"
              className={`form-control ${errors.name ? 'is-invalid' : ''}`}
              {...register('name')}
            />
            {errors.name && (
              <div className="invalid-feedback">{errors.name.message}</div>
            )}
          </div>

          <div className="col-12 col-md-7">
            <label htmlFor="contact-email" className="form-label">
              E-mail *
            </label>
            <input
              id="contact-email"
              type="email"
              autoComplete="email"
              className={`form-control ${errors.email ? 'is-invalid' : ''}`}
              {...register('email')}
            />
            {errors.email && (
              <div className="invalid-feedback">{errors.email.message}</div>
            )}
          </div>

          <div className="col-12 col-md-5">
            <label htmlFor="contact-phone" className="form-label">
              Telefone / WhatsApp
            </label>
            <input
              id="contact-phone"
              type="tel"
              autoComplete="tel"
              placeholder="(11) 99999-0000"
              className={`form-control ${errors.phone ? 'is-invalid' : ''}`}
              {...register('phone')}
            />
            {errors.phone && (
              <div className="invalid-feedback">{errors.phone.message}</div>
            )}
          </div>

          <div className="col-12">
            <label htmlFor="contact-subject" className="form-label">
              Assunto *
            </label>
            <select
              id="contact-subject"
              className={`form-select ${errors.subject ? 'is-invalid' : ''}`}
              {...register('subject')}
            >
              <option value="">Selecione…</option>
              {SUBJECTS.map((subject) => (
                <option key={subject} value={subject}>
                  {subject}
                </option>
              ))}
            </select>
            {errors.subject && (
              <div className="invalid-feedback">{errors.subject.message}</div>
            )}
          </div>

          <div className="col-12">
            <label htmlFor="contact-message" className="form-label">
              Mensagem *
            </label>
            <textarea
              id="contact-message"
              rows={6}
              maxLength={5000}
              className={`form-control ${errors.message ? 'is-invalid' : ''}`}
              aria-describedby="contact-message-count"
              {...register('message')}
            />
            {errors.message && (
              <div className="invalid-feedback">{errors.message.message}</div>
            )}
            <div id="contact-message-count" className="form-text text-end">
              {messageLength}/5000
            </div>
          </div>

          {/* Campo-isca anti-spam: fora da tela e fora da navegação por teclado */}
          <div aria-hidden="true" style={{ position: 'absolute', left: '-10000px' }}>
            <label htmlFor="contact-website">Não preencha este campo</label>
            <input
              id="contact-website"
              tabIndex={-1}
              autoComplete="off"
              {...register('website')}
            />
          </div>

          <div className="col-12">
            <div className="form-check">
              <input
                id="contact-consent"
                type="checkbox"
                className={`form-check-input ${errors.consent ? 'is-invalid' : ''}`}
                {...register('consent')}
              />
              <label htmlFor="contact-consent" className="form-check-label small">
                Autorizo a DentalFlow a usar meus dados para responder a esta
                mensagem, conforme a LGPD. *
              </label>
              {errors.consent && (
                <div className="invalid-feedback">{errors.consent.message}</div>
              )}
            </div>
          </div>

          <div className="col-12">
            <button
              type="submit"
              className="btn btn-primary btn-lg px-4"
              disabled={isSubmitting}
            >
              {isSubmitting ? (
                <span className="spinner-border spinner-border-sm me-2" />
              ) : (
                <i className="bi bi-send me-2" aria-hidden="true" />
              )}
              Enviar mensagem
            </button>
          </div>
        </div>
      </div>
    </form>
  );
}