import { JSX } from "preact";
import { useState } from "preact/hooks";

interface FormData {
  name: string;
  email: string;
  phone: string;
  role: "Farmácia" | "Laboratório";
  message: string;
}

const initialData: FormData = {
  name: "",
  email: "",
  phone: "",
  role: "Farmácia",
  message: "",
};

export default function LeadForm() {
  const [form, setForm] = useState<FormData>(initialData);
  const [sent, setSent] = useState(false);

  function handleChange(
    event: JSX.TargetedEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, Event>,
  ) {
    const { name, value } = event.currentTarget;
    setForm((prev) => ({ ...prev, [name]: value }));
  }

  function handleSubmit(event: JSX.TargetedEvent<HTMLFormElement, Event>) {
    event.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setForm(initialData);
  }

  return (
    <form class="form-card" onSubmit={handleSubmit}>
      <div class="section-header" style="margin-bottom: 1rem;">
        <span class="section-kicker">Contato rápido</span>
        <h3 class="section-title" style="font-size: 1.4rem;">
          Vamos desenhar seu go-live em conjunto
        </h3>
        <p class="section-description">
          Envie seus dados e retornaremos com um plano de integração para farmácias
          e laboratórios, com cronograma e custos claros.
        </p>
      </div>

      <div class="form-row">
        <label>
          Nome completo
          <input
            required
            name="name"
            value={form.name}
            onInput={handleChange}
            placeholder="Ex.: Ana Ribeiro"
          />
        </label>
        <label>
          E-mail corporativo
          <input
            required
            type="email"
            name="email"
            value={form.email}
            onInput={handleChange}
            placeholder="contato@empresa.com"
          />
        </label>
      </div>

      <div class="form-row">
        <label>
          Telefone / WhatsApp
          <input
            name="phone"
            value={form.phone}
            onInput={handleChange}
            placeholder="(11) 99999-0000"
          />
        </label>
        <label>
          Perfil
          <select name="role" value={form.role} onInput={handleChange}>
            <option value="Farmácia">Farmácia compradora</option>
            <option value="Laboratório">Laboratório vendedor</option>
          </select>
        </label>
      </div>

      <label>
        Detalhes da operação
        <textarea
          name="message"
          value={form.message}
          onInput={handleChange}
          placeholder="Volume mensal, estados atendidos, ERPs atuais, integrações desejadas..."
        />
      </label>

      {sent && <div class="notice">Recebemos seu contato! Nosso time responderá ainda hoje.</div>}

      <div class="actions" style="margin-top: 1rem;">
        <button type="submit" class="button-primary">Solicitar contato</button>
        <button type="button" class="button-secondary" onClick={() => setForm(initialData)}>
          Limpar dados
        </button>
      </div>
    </form>
  );
}