import React, { useState } from "react";

// Prototype UI - Comparateur d'assurance (maquette single-file React + Tailwind)
// Usage: coller dans un projet Next.js ou CodeSandbox (Tailwind doit être configuré)

export default function PrototypeComparateur() {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    produit: "auto",
    codePostal: "75001",
    dateNaissance: "1990-01-01",
    usage: "personnel",
    bonus: "0.50",
  });

  const [results, setResults] = useState(sampleResults);
  const [queryLoading, setQueryLoading] = useState(false);

  function handleChange(e) {
    const { name, value } = e.target;
    setForm((s) => ({ ...s, [name]: value }));
  }

  function submitStep1(e) {
    e.preventDefault();
    // Simuler transition - dans une version réelle on enverrait la requête
    setStep(2);
    // Optionnel: trigger fetch results
  }

  function simulateSearch() {
    setQueryLoading(true);
    setTimeout(() => {
      setResults(sampleResults.map((r) => ({ ...r, price: (Math.random() * 400 + 150).toFixed(0) })));
      setQueryLoading(false);
    }, 900);
  }

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800">
      <header className="bg-white shadow">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-lg bg-indigo-600 flex items-center justify-center text-white font-bold">CA</div>
            <div>
              <h1 className="text-lg font-semibold">Comparateur Assurance</h1>
              <p className="text-xs text-gray-500">Comparez rapidement — économie & garanties</p>
            </div>
          </div>
          <nav className="hidden md:flex gap-6 text-sm text-gray-600">
            <a className="hover:text-indigo-600">Accueil</a>
            <a className="hover:text-indigo-600">Comment ça marche</a>
            <a className="hover:text-indigo-600">Assureurs</a>
            <a className="hover:text-indigo-600">Contact</a>
          </nav>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 py-8">
        {/* Hero */}
        <section className="grid md:grid-cols-2 gap-8 items-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-extrabold leading-tight">
              Trouve l'assurance adaptée en quelques minutes
            </h2>
            <p className="mt-4 text-gray-600">Comparaison transparente — affiche les garanties et le prix estimé.</p>

            {/* Quick form (card) */}
            <div className="mt-6 bg-white shadow rounded-lg p-4">
              <form onSubmit={submitStep1} className="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div className="col-span-1 md:col-span-2">
                  <label className="text-xs font-medium text-gray-600">Produit</label>
                  <select name="produit" value={form.produit} onChange={handleChange} className="mt-1 block w-full border-gray-200 rounded-md p-2">
                    <option value="auto">Assurance Auto</option>
                    <option value="habitation">Assurance Habitation</option>
                    <option value="sante">Mutuelle / Santé</option>
                  </select>
                </div>

                <div>
                  <label className="text-xs font-medium text-gray-600">Code postal</label>
                  <input name="codePostal" value={form.codePostal} onChange={handleChange} className="mt-1 block w-full border-gray-200 rounded-md p-2" />
                </div>

                <div>
                  <label className="text-xs font-medium text-gray-600">Date de naissance</label>
                  <input type="date" name="dateNaissance" value={form.dateNaissance} onChange={handleChange} className="mt-1 block w-full border-gray-200 rounded-md p-2" />
                </div>

                <div>
                  <label className="text-xs font-medium text-gray-600">Usage</label>
                  <select name="usage" value={form.usage} onChange={handleChange} className="mt-1 block w-full border-gray-200 rounded-md p-2">
                    <option value="personnel">Personnel</option>
                    <option value="pro">Professionnel</option>
                  </select>
                </div>

                <div className="md:col-span-2 flex justify-between items-center gap-3">
                  <button type="submit" className="bg-indigo-600 text-white px-4 py-2 rounded-md font-medium">Comparer</button>
                  <button type="button" onClick={() => { setStep(1); setResults(sampleResults); }} className="text-sm text-gray-600">Réinitialiser</button>
                </div>
              </form>
            </div>

            <div className="mt-4 text-sm text-gray-500">
              <strong>Transparence :</strong> Méthodologie visible — affichage des assureurs comparés.
            </div>
          </div>

          <div className="order-first md:order-last">
            <div className="bg-gradient-to-br from-indigo-50 to-white p-6 rounded-lg shadow">
              <h3 className="text-xl font-semibold">Pourquoi comparer ?</h3>
              <ul className="mt-3 space-y-2 text-gray-600">
                <li>Économisez en moyenne jusqu'à 30%</li>
                <li>Comparez garanties & franchises côte-à-côte</li>
                <li>Recevez des offres personnalisées en 2 minutes</li>
              </ul>

              <div className="mt-4">
                <button onClick={simulateSearch} className="px-4 py-2 rounded-md border border-indigo-600 text-indigo-600">Simuler une recherche</button>
              </div>
            </div>
          </div>
        </section>

        {/* Résultats / Step 2 */}
        <section className="mt-10">
          {step === 1 ? (
            <div className="text-sm text-gray-500">Remplis le formulaire pour afficher des offres.</div>
          ) : (
            <div>
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-semibold">Offres recommandées</h3>
                <div className="text-sm text-gray-500">{queryLoading ? 'Chargement...' : `${results.length} assureurs`}</div>
              </div>

              <div className="mt-4 grid gap-4 md:grid-cols-2">
                {results.map((r) => (
                  <article key={r.id} className="bg-white rounded-lg shadow p-4 flex flex-col md:flex-row gap-4">
                    <div className="flex-0 w-24 h-24 bg-gray-100 rounded-md flex items-center justify-center text-gray-500">Logo</div>
                    <div className="flex-1">
                      <div className="flex items-start justify-between">
                        <div>
                          <h4 className="font-semibold text-lg">{r.name}</h4>
                          <div className="text-sm text-gray-500">{r.tagline}</div>
                        </div>
                        <div className="text-right">
                          <div className="text-2xl font-bold">{r.price} €</div>
                          <div className="text-xs text-gray-500">par an (est.)</div>
                        </div>
                      </div>

                      <div className="mt-3 text-sm text-gray-600 grid grid-cols-2 gap-2">
                        <div>Franchise: {r.franchise} €</div>
                        <div>Assistance: {r.assistance}</div>
                        <div>Remboursement: {r.remb}</div>
                        <div className="text-right">Note: {r.score}/5</div>
                      </div>

                      <div className="mt-4 flex gap-3">
                        <button className="px-3 py-2 rounded-md bg-indigo-600 text-white text-sm">Voir détails</button>
                        <button className="px-3 py-2 rounded-md border text-sm">Envoyer mes coordonnées</button>
                      </div>
                    </div>
                  </article>
                ))}
              </div>
            </div>
          )}
        </section>

        {/* Footer / méthodologie */}
        <section className="mt-12 bg-white rounded-lg p-6 shadow">
          <h4 className="font-semibold">Méthodologie (exemple)</h4>
          <p className="mt-2 text-sm text-gray-600">Nous comparons les offres en nous basant sur le prix estimé, les garanties principales, la franchise et la note client. Dans une version production, nous afficherons la liste complète des partenaires et le type de rémunération (lead/vente).</p>
        </section>
      </main>

      <footer className="mt-12 py-6 bg-white border-t">
        <div className="max-w-6xl mx-auto px-4 text-sm text-gray-600">© {new Date().getFullYear()} Comparateur Assurance — Prototype UI</div>
      </footer>
    </div>
  );
}

// ----- Sample data used by the prototype -----
const sampleResults = [
  {
    id: 1,
    name: "AssurExpress",
    tagline: "Formule économique",
    price: 240,
    franchise: 300,
    assistance: "24/7",
    remb: "80%",
    score: 4.1,
  },
  {
    id: 2,
    name: "ProtecPlus",
    tagline: "Bon équilibre garanties/prix",
    price: 360,
    franchise: 250,
    assistance: "Europe",
    remb: "90%",
    score: 4.4,
  },
  {
    id: 3,
    name: "ZenAssure",
    tagline: "Service premium",
    price: 520,
    franchise: 200,
    assistance: "Mondial",
    remb: "100%",
    score: 4.7,
  },
];