"use client";

import { useState } from "react";
import { X, Plus, Upload } from "lucide-react";

const INIT_GLOSSARY = [
  { term: "Mode circulaire", def: "Système de production et consommation qui minimise les déchets" },
  { term: "Cuir vegan", def: "Cuir d'origine végétale ou synthétique sans produit animal" },
  { term: "Traçabilité", def: "Capacité à suivre chaque étape de la chaîne de production" },
  { term: "Upcycling", def: "Transformation de matières usagées en produits de valeur supérieure" },
];

const INIT_BANNED = ["pas cher", "incroyable", "révolutionnaire"];

export function TabMarque() {
  const [glossary, setGlossary] = useState(INIT_GLOSSARY);
  const [banned, setBanned] = useState(INIT_BANNED);
  const [vouvoiement, setVouvoiement] = useState(false);
  const [activeTone, setActiveTone] = useState<string>("expert");

  function removeBanned(term: string) {
    setBanned((prev) => prev.filter((t) => t !== term));
  }

  function removeGlossary(i: number) {
    setGlossary((prev) => prev.filter((_, idx) => idx !== i));
  }

  return (
    <div className="space-y-5 max-w-2xl">
      {/* Infos marque */}
      <div className="bg-bg-card border border-border rounded-xl p-5 space-y-4">
        <div className="text-[13px] font-semibold text-text">Identité de la marque</div>
        <div>
          <label className="block text-[12px] font-medium text-text-dim mb-1.5">Nom de la marque</label>
          <input
            type="text"
            defaultValue="Atelier Verdun"
            className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright"
          />
        </div>
        <div>
          <label className="block text-[12px] font-medium text-text-dim mb-1.5">Industrie</label>
          <input
            type="text"
            defaultValue="E-commerce mode éthique"
            className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright"
          />
        </div>
      </div>

      {/* Ton */}
      <div className="bg-bg-card border border-border rounded-xl p-5 space-y-4">
        <div className="text-[13px] font-semibold text-text">Ton éditorial</div>
        <div className="flex items-center gap-2">
          {["formel", "chaleureux", "expert"].map((t) => (
            <button
              key={t}
              onClick={() => setActiveTone(t)}
              className={`px-3 py-1.5 rounded-full text-[12px] font-medium border transition-colors capitalize ${
                activeTone === t
                  ? "bg-accent/15 border-accent/30 text-accent-light"
                  : "border-border text-text-dim hover:bg-bg-card-hover"
              }`}
            >
              {t}
            </button>
          ))}
        </div>
        <div>
          <label className="block text-[12px] font-medium text-text-dim mb-1.5">
            Description du ton (instructions IA)
          </label>
          <textarea
            defaultValue="Adopte un ton expert et bienveillant. Valorise la durabilité sans moraliser. Parle à un lecteur engagé mais pas militant. Évite le jargon marketing creux."
            rows={3}
            className="w-full bg-bg border border-border rounded-lg px-3 py-2 text-[13px] text-text focus:outline-none focus:border-border-bright resize-none"
          />
        </div>
        {/* Tutoiement / vouvoiement */}
        <div className="flex items-center justify-between">
          <div>
            <div className="text-[13px] text-text">Vouvoiement</div>
            <div className="text-[11px] text-text-dim mt-0.5">Par défaut : tutoiement actif</div>
          </div>
          <button
            onClick={() => setVouvoiement((v) => !v)}
            className={`relative w-11 h-6 rounded-full transition-colors ${
              vouvoiement ? "bg-accent" : "bg-bg"
            } border border-border`}
          >
            <span
              className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white transition-transform ${
                vouvoiement ? "translate-x-5" : "translate-x-0"
              }`}
            />
          </button>
        </div>
      </div>

      {/* Glossaire */}
      <div className="bg-bg-card border border-border rounded-xl p-5 space-y-3">
        <div className="flex items-center justify-between">
          <div className="text-[13px] font-semibold text-text">Glossaire métier</div>
          <button
            onClick={() =>
              setGlossary((prev) => [
                ...prev,
                { term: "Nouveau terme", def: "Définition" },
              ])
            }
            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[12px] border border-border hover:bg-bg-card-hover text-text-dim transition-colors"
          >
            <Plus className="w-3.5 h-3.5" />
            Ajouter terme
          </button>
        </div>
        <div className="space-y-2">
          {glossary.map((g, i) => (
            <div key={i} className="flex items-start gap-3 p-3 rounded-lg bg-bg border border-border group">
              <div className="flex-1 min-w-0">
                <div className="text-[13px] font-medium text-text">{g.term}</div>
                <div className="text-[12px] text-text-dim mt-0.5">{g.def}</div>
              </div>
              <button
                onClick={() => removeGlossary(i)}
                className="p-1 rounded hover:bg-bg-card-hover text-text-dimmer hover:text-text-dim opacity-0 group-hover:opacity-100 transition-all"
              >
                <X className="w-3.5 h-3.5" />
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* Termes bannis */}
      <div className="bg-bg-card border border-border rounded-xl p-5 space-y-3">
        <div className="text-[13px] font-semibold text-text">Termes à bannir</div>
        <div className="flex flex-wrap gap-2">
          {banned.map((t) => (
            <span
              key={t}
              className="flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[12px] border border-red-500/25 text-red-400 bg-red-500/10"
            >
              {t}
              <button onClick={() => removeBanned(t)} className="hover:text-red-300 transition-colors">
                <X className="w-3 h-3" />
              </button>
            </span>
          ))}
          <button className="flex items-center gap-1 px-2.5 py-1 rounded-full text-[12px] border border-dashed border-border text-text-dimmer hover:border-border-bright hover:text-text-dim transition-colors">
            <Plus className="w-3 h-3" />
            Ajouter
          </button>
        </div>
      </div>

      {/* Exemples de référence */}
      <div className="bg-bg-card border border-border rounded-xl p-5 space-y-3">
        <div className="text-[13px] font-semibold text-text">Contenus de référence</div>
        <p className="text-[12px] text-text-dim">
          L'IA utilisera ces exemples pour calibrer son style et son niveau.
        </p>
        <div className="border-2 border-dashed border-border rounded-xl p-6 flex flex-col items-center gap-2 hover:border-border-bright transition-colors cursor-pointer group">
          <Upload className="w-5 h-5 text-text-dimmer group-hover:text-text-dim transition-colors" />
          <span className="text-[12.5px] text-text-dim text-center">
            Glisse des PDF ou colle des URLs ici
          </span>
          <span className="text-[11px] text-text-dimmer">PDF, DOCX, ou URL · max 5 fichiers</span>
        </div>
      </div>

      <button className="px-5 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity">
        Sauvegarder la mémoire
      </button>
    </div>
  );
}