import React, { useState, useRef, useEffect } from "react";

// PoliceDossierEditor - Single-file React component (finished)
// Usage: paste into a Create React App / Vite project (src/App.jsx)
// Optional styling: Tailwind CSS. If you don't use Tailwind, the component still works — classes are conservative.
// Required libs for PDF export: html2canvas, jspdf
// Install: npm i html2canvas jspdf

export default function App() {
  // Simple auth: demo credentials (you can replace with real backend)
  const DEMO_USER = { username: "admin", password: "demo123" };

  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem("pd_user");
    return saved ? JSON.parse(saved) : null;
  });
  const [cred, setCred] = useState({ username: "", password: "" });

  // Document state - everything editable
  const defaultDoc = {
    title: "Dossier de Recrue",
    entryDate: "20/07/2025",
    rpName: "MAYET",
    rpFirst: "TOMMY",
    discord: "tommy.mayet2025",
    rpAge: "35 ans",
    birthDate: "10/02/1990",
    nationality: "Francais",
    gender: "Homme",
    parcours: [
      "Fiche d'inscription reçue",
      "Acceptation officielle",
      "Présentation faite",
      "A attribué rôle Communication",
      "Sécurité Armés / Tir",
      "Ethique & Déontologie",
    ],
    progress: {
      Droit: "20/20",
      Procedure: "20/20",
      Technique: "20/20",
      Psychologie: "20/20",
      Securite: "20/20",
    },
    comments: "",
    signature: "Mayet Tommy",
    logoDataUrl: null,
  };

  const [doc, setDoc] = useState(() => {
    const saved = localStorage.getItem("pd_doc");
    return saved ? JSON.parse(saved) : defaultDoc;
  });

  // Edit mode toggles which UI is edit vs preview
  const [editMode, setEditMode] = useState(true);
  const previewRef = useRef();

  useEffect(() => {
    localStorage.setItem("pd_doc", JSON.stringify(doc));
  }, [doc]);

  useEffect(() => {
    localStorage.setItem("pd_user", JSON.stringify(user));
  }, [user]);

  function login(e) {
    e.preventDefault();
    if (cred.username === DEMO_USER.username && cred.password === DEMO_USER.password) {
      setUser({ username: cred.username });
      setCred({ username: "", password: "" });
    } else {
      alert("Identifiants incorrects — utilisez admin / demo123 pour la démo");
    }
  }

  function logout() {
    setUser(null);
  }

  // Generic field updater (path supports nested keys with dot notation)
  function updateField(path, value) {
    setDoc((d) => {
      const copy = JSON.parse(JSON.stringify(d));
      const keys = path.split(".");
      let cur = copy;
      for (let i = 0; i < keys.length - 1; i++) cur = cur[keys[i]];
      cur[keys[keys.length - 1]] = value;
      return copy;
    });
  }

  // Logo upload
  function handleLogo(e) {
    const f = e.target.files[0];
    if (!f) return;
    const reader = new FileReader();
    reader.onload = () => updateField("logoDataUrl", reader.result);
    reader.readAsDataURL(f);
  }

  // Download as PDF using html2canvas + jsPDF
  async function downloadPdf() {
    try {
      const html2canvas = (await import("html2canvas")).default;
      const { jsPDF } = await import("jspdf");
      const node = previewRef.current;
      if (!node) return;
      // html2canvas renders the node to a canvas
      const canvas = await html2canvas(node, { scale: 2, useCORS: true });
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
      pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
      const filename = (doc.rpName || 'dossier').split(' ').join('_') + '.pdf';
      pdf.save(filename);
    } catch (err) {
      console.error(err);
      alert("Erreur lors de la génération PDF — ouvrez la console pour plus de détails.");
    }
  }

  // Export / Import JSON for full editability
  function exportJson() {
    const blob = new Blob([JSON.stringify(doc, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "dossier.json";
    a.click();
    URL.revokeObjectURL(url);
  }

  function importJson(e) {
    const f = e.target.files[0];
    if (!f) return;
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const data = JSON.parse(reader.result);
        setDoc(data);
        alert("Fichier importé avec succès");
      } catch (err) {
        alert("Fichier JSON invalide");
      }
    };
    reader.readAsText(f);
  }

  // Reset template
  function resetTemplate() {
    if (confirm("Remplacer le document par le modèle par défaut ?")) {
      setDoc(defaultDoc);
    }
  }

  // Helper: pretty button classes (works whether or not you have Tailwind)
  const btnClass = "inline-block px-3 py-1 rounded bg-sky-600 text-white hover:opacity-95 text-sm";

  return (
    <div className="min-h-screen bg-slate-50 p-6 font-sans">
      <header className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold">Police Dossier Editor</h1>
        <div className="space-x-2">
          {user ? (
            <>
              <span className="text-sm mr-2">Connecté: {user.username}</span>
              <button className={btnClass} onClick={logout}>
                Se déconnecter
              </button>
            </>
          ) : (
            <form onSubmit={login} className="flex items-center gap-2">
              <input
                aria-label="username"
                placeholder="Utilisateur"
                value={cred.username}
                onChange={(e) => setCred((c) => ({ ...c, username: e.target.value }))}
                className="border px-2 py-1 rounded"
              />
              <input
                type="password"
                placeholder="Mot de passe"
                value={cred.password}
                onChange={(e) => setCred((c) => ({ ...c, password: e.target.value }))}
                className="border px-2 py-1 rounded"
              />
              <button className={btnClass}>Connexion</button>
            </form>
          )}
        </div>
      </header>

      <main className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <section className="md:col-span-1 space-y-4">
          <div className="p-4 bg-white rounded shadow">
            <h2 className="font-semibold mb-2">Actions</h2>
            <div className="flex flex-col gap-2">
              <button onClick={() => setEditMode((v) => !v)} className={btnClass}>
                {editMode ? "Basculer en aperçu" : "Activer édition"}
              </button>
              <button onClick={downloadPdf} className={btnClass}>Télécharger PDF</button>
              <button onClick={exportJson} className={btnClass}>Exporter JSON</button>
              <label className={`${btnClass} cursor-pointer inline-flex items-center justify-center`}>
                Importer JSON
                <input onChange={importJson} type="file" accept="application/json" className="hidden" />
              </label>
              <label className={`${btnClass} cursor-pointer inline-flex items-center justify-center`}>
                Changer logo
                <input onChange={handleLogo} type="file" accept="image/*" className="hidden" />
              </label>
              <button onClick={resetTemplate} className={btnClass}>Restaurer modèle</button>
            </div>
          </div>

          <div className="p-4 bg-white rounded shadow space-y-2">
            <h3 className="font-semibold">Paramètres</h3>
            <div>
              <label className="block text-sm">Titre</label>
              <input
                value={doc.title}
                onChange={(e) => updateField("title", e.target.value)}
                className="w-full border px-2 py-1 rounded"
              />
            </div>
            <div>
              <label className="block text-sm">Date d'entrée</label>
              <input
                value={doc.entryDate}
                onChange={(e) => updateField("entryDate", e.target.value)}
                className="w-full border px-2 py-1 rounded"
              />
            </div>

            <div>
              <label className="block text-sm">Signature</label>
              <input
                value={doc.signature}
                onChange={(e) => updateField("signature", e.target.value)}
                className="w-full border px-2 py-1 rounded"
              />
            </div>

            <div>
              <label className="block text-sm">Commentaires</label>
              <textarea
                value={doc.comments}
                onChange={(e) => updateField("comments", e.target.value)}
                className="w-full border px-2 py-1 rounded"
              />
            </div>
          </div>

          <div className="p-4 bg-white rounded shadow">
            <h3 className="font-semibold">Sauvegarde & utilisateurs</h3>
            <p className="text-sm">Démo: login <code>admin</code> / mot de passe <code>demo123</code></p>
            <p className="text-sm">Les données sont stockées localement (localStorage). Remplacez par un backend si besoin.</p>
          </div>
        </section>

        <section className="md:col-span-2">
          <div className="bg-white rounded shadow p-6" ref={previewRef} id="preview-area">
            {/* Document preview — fully built from `doc` state */}
            <div className="flex items-center justify-between border-b pb-4 mb-4">
              <div className="flex items-center gap-4">
                <div className="w-20 h-20 bg-slate-100 rounded flex items-center justify-center overflow-hidden">
                  {doc.logoDataUrl ? (
                    <img src={doc.logoDataUrl} alt="logo" className="w-full h-full object-contain" />
                  ) : (
                    <div className="text-xs text-slate-400">Logo</div>
                  )}
                </div>
                <div>
                  <h2 className="text-3xl font-bold">{doc.title}</h2>
                  <div className="text-sm text-slate-600">Date d'entrée : {doc.entryDate}</div>
                </div>
              </div>
              <div className="text-right">
                <div className="text-sm text-slate-600">Signature :</div>
                <div className="font-medium">{doc.signature}</div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="font-semibold mb-2">Informations générales</h3>
                <div className="space-y-1">
                  <Field label="Nom RP" value={doc.rpName} onChange={(v) => updateField("rpName", v)} editable={editMode && user} />
                  <Field label="Prénom" value={doc.rpFirst} onChange={(v) => updateField("rpFirst", v)} editable={editMode && user} />
                  <Field label="Pseudo Discord" value={doc.discord} onChange={(v) => updateField("discord", v)} editable={editMode && user} />
                  <Field label="Âge RP" value={doc.rpAge} onChange={(v) => updateField("rpAge", v)} editable={editMode && user} />
                  <Field label="Date de naissance RP" value={doc.birthDate} onChange={(v) => updateField("birthDate", v)} editable={editMode && user} />
                  <Field label="Nationalité" value={doc.nationality} onChange={(v) => updateField("nationality", v)} editable={editMode && user} />
                  <Field label="Genre" value={doc.gender} onChange={(v) => updateField("gender", v)} editable={editMode && user} />
                </div>
              </div>

              <div>
                <h3 className="font-semibold mb-2">Progression pédagogique</h3>
                <div className="space-y-2">
                  {Object.entries(doc.progress).map(([k, v]) => (
                    <div key={k} className="flex justify-between items-center">
                      <div className="font-medium">{k}</div>
                      <div>
                        {editMode && user ? (
                          <input
                            value={v}
                            onChange={(e) => updateField(`progress.${k}`, e.target.value)}
                            className="border px-2 py-1 rounded w-24 text-right"
                          />
                        ) : (
                          <span>{v}</span>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="mt-6">
              <h3 className="font-semibold mb-2">Parcours d'inscription</h3>
              <ul className="list-disc pl-5 space-y-1">
                {doc.parcours.map((p, idx) => (
                  <li key={idx} className="flex items-center gap-2">
                    {editMode && user ? (
                      <input value={p} onChange={(e) => {
                        const arr = [...doc.parcours];
                        arr[idx] = e.target.value;
                        updateField("parcours", arr);
                      }} className="border px-2 py-1 rounded w-full" />
                    ) : (
                      <span>{p}</span>
                    )}
                  </li>
                ))}
              </ul>
              {editMode && user && (
                <div className="mt-2 flex gap-2">
                  <button
                    onClick={() => updateField("parcours", [...doc.parcours, "Nouvel élément"])}
                    className={btnClass}
                  >
                    Ajouter
                  </button>
                  <button
                    onClick={() => updateField("parcours", doc.parcours.slice(0, -1))}
                    className={btnClass}
                  >
                    Supprimer dernier
                  </button>
                </div>
              )}
            </div>

            <div className="mt-6 flex justify-between items-start">
              <div>
                <h3 className="font-semibold">Commentaires</h3>
                <div>
                  {editMode && user ? (
                    <textarea value={doc.comments} onChange={(e) => updateField("comments", e.target.value)} className="w-full border p-2 rounded" />
                  ) : (
                    <p>{doc.comments || "-"}</p>
                  )}
                </div>
              </div>

              <div className="w-48">
                <h3 className="font-semibold">Signature</h3>
                <div className="mt-6 text-right">{doc.signature}</div>
              </div>
            </div>

            <div className="mt-6 text-center text-sm text-slate-400">ÉCOLE DE POLICE NATIONALE — FRANCE</div>
          </div>
        </section>
      </main>

      <footer className="mt-6 text-center text-xs text-slate-500">Prototype — remplacez auth/localStorage par un backend pour production</footer>
    </div>
  );
}


// Small presentational Field component
function Field({ label, value, onChange, editable }) {
  return (
    <div>
      <div className="text-sm text-slate-500">{label}</div>
      {editable ? (
        <input value={value} onChange={(e) => onChange(e.target.value)} className="w-full border px-2 py-1 rounded" />
      ) : (
        <div className="text-base">{value}</div>
      )}
    </div>
  );
}