import { useStore } from "../store";

// Mapping statique gid (Google Sheets ID) -> URL icône via api.dofusdb.fr
// Pattern URL : https://api.dofusdb.fr/img/items/{iconId}.png
const DOFUS_ICON_BASE = "https://api.dofusdb.fr/img/items";
const GID_TO_ICON: Record<string, string> = {
  "474870200":  `${DOFUS_ICON_BASE}/23009.png`, // Dofawa
  "743703882":  `${DOFUS_ICON_BASE}/23025.png`, // Dofus Argenté
  "103963898":  `${DOFUS_ICON_BASE}/23006.png`, // Dofus Cawotte
  "1075294690": `${DOFUS_ICON_BASE}/23022.png`, // Dokoko
  "1567240526": `${DOFUS_ICON_BASE}/23020.png`, // Dofus des Veilleurs
  "1011508069": `${DOFUS_ICON_BASE}/23002.png`, // Dofus Emeraude
  "2045137654": `${DOFUS_ICON_BASE}/23001.png`, // Dofus Pourpre
  "1967508888": `${DOFUS_ICON_BASE}/23032.png`, // Domakuro
  "1382359191": `${DOFUS_ICON_BASE}/23033.png`, // Dorigami
  "1413546794": `${DOFUS_ICON_BASE}/23003.png`, // Dofus Turquoise
  "1641656252": `${DOFUS_ICON_BASE}/23005.png`, // Dofus des Glaces
  "953522228":  `${DOFUS_ICON_BASE}/23023.png`, // Dofus Abyssal
  "818597042":  `${DOFUS_ICON_BASE}/23039.png`, // Dofoozbz
  "1021129660": `${DOFUS_ICON_BASE}/23016.png`, // Dofus Nébuleux
  "595670723":  `${DOFUS_ICON_BASE}/23004.png`, // Dofus Vulbis
  "544349966":  `${DOFUS_ICON_BASE}/23008.png`, // Dofus Tacheté
  "1150302145": `${DOFUS_ICON_BASE}/23024.png`, // Dofus Forgelave
  "882278553":  `${DOFUS_ICON_BASE}/23007.png`, // Dofus Ebène
  "200570588":  `${DOFUS_ICON_BASE}/23011.png`, // Dofus Ivoire
  "1209269839": `${DOFUS_ICON_BASE}/23012.png`, // Dofus Ocre
  "462784268":  `${DOFUS_ICON_BASE}/23027.png`, // Dofus Argenté Scintillant
  "1543573905": `${DOFUS_ICON_BASE}/23034.png`, // Dofus Cauchemar
  "1007491889": `${DOFUS_ICON_BASE}/23035.png`, // Dom de Pin
  "1047555165": `${DOFUS_ICON_BASE}/23036.png`, // Dofus Sylvestre
  "2105601828": `${DOFUS_ICON_BASE}/23029.png`, // Dofus Cacao
  "474510463":  `${DOFUS_ICON_BASE}/23017.png`, // Dokille
  "62476099":   `${DOFUS_ICON_BASE}/23018.png`, // Dolmanax
  "1873654554": `${DOFUS_ICON_BASE}/23019.png`, // Dotruche
  "360188709":  `${DOFUS_ICON_BASE}/23010.png`, // Dofus Kaliptus
};

export default function HomeView({ needsSync, onSync }: { needsSync?: boolean; onSync?: () => void }) {
  const { guides, openGuide, profiles, activeProfileId, syncing } = useStore();

  const activeProfile = profiles.find(p => p.id === activeProfileId);
  const totalQuests = guides.reduce((s, g) => s + g.total_quests, 0);
  const totalCompleted = guides.reduce((s, g) => s + g.completed_quests, 0);
  const globalPct = totalQuests > 0 ? Math.round((totalCompleted / totalQuests) * 100) : 0;
  const completedGuides = guides.filter(g => g.total_quests > 0 && g.completed_quests === g.total_quests);
  const inProgressGuides = guides.filter(g => g.completed_quests > 0 && g.completed_quests < g.total_quests);

  return (
    <div className="with-scrollbar" style={{ flex: 1, overflowY: "auto", padding: "20px 24px", minHeight: 0 }}>
      {/* Header */}
      <div style={{ marginBottom: "20px" }}>
        <h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "2px" }}>
          Tougli — Guide Dofus
        </h1>
        {activeProfile && (
          <p style={{ fontSize: "13px", color: "#94a3b8" }}>
            Profil actif : <span style={{ color: "#e2e8f0", fontWeight: 600 }}>{activeProfile.name}</span>
          </p>
        )}
      </div>

      {/* First-time sync CTA */}
      {needsSync && (
        <div style={{
          background: "rgba(240,192,64,0.06)", border: "1px solid rgba(240,192,64,0.35)",
          borderRadius: "10px", padding: "20px 24px", marginBottom: "24px",
          display: "flex", flexDirection: "column", alignItems: "center", gap: "12px",
          textAlign: "center",
        }}>
          <div style={{ fontSize: "11px", fontWeight: 600, color: "#f0c040", textTransform: "uppercase", letterSpacing: "0.1em" }}>
            Première utilisation
          </div>
          <p style={{ fontSize: "13px", color: "#94a3b8", lineHeight: 1.6, margin: 0 }}>
            Aucun guide chargé. Synchronisez pour récupérer les données depuis Google Sheets.
          </p>
          <button
            onClick={onSync}
            disabled={!onSync || syncing}
            style={{
              background: "#f0c040", color: "#0d1117", border: "none",
              padding: "9px 24px", borderRadius: "8px", fontWeight: 700,
              fontSize: "13px", cursor: onSync && !syncing ? "pointer" : "default",
              display: "flex", alignItems: "center", gap: "8px",
              opacity: onSync && !syncing ? 1 : 0.5,
            }}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
            </svg>
            Synchroniser les guides
          </button>
        </div>
      )}

      {/* Global progress */}
      {guides.length > 0 && (
        <div style={{
          background: "#161b22", border: "1px solid #2d3748", borderRadius: "10px",
          padding: "16px 20px", marginBottom: "24px",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" }}>
            <span style={{ fontSize: "13px", color: "#94a3b8" }}>Progression globale</span>
            <span style={{ fontSize: "13px", fontWeight: 700, color: "#f0c040" }}>
              {totalCompleted} / {totalQuests} quêtes ({globalPct}%)
            </span>
          </div>
          <div style={{ height: "6px", background: "#2d3748", borderRadius: "3px", overflow: "hidden" }}>
            <div style={{
              height: "100%", width: `${globalPct}%`,
              background: "linear-gradient(90deg, #4a9eff, #f0c040)",
              borderRadius: "3px", transition: "width 0.4s ease",
            }} />
          </div>
          <div style={{ marginTop: "10px", display: "flex", gap: "20px" }}>
            <Stat label="Complétés" value={completedGuides.length} color="#4ade80" />
            <Stat label="En cours" value={inProgressGuides.length} color="#f0c040" />
            <Stat label="Total" value={guides.length} color="#94a3b8" />
          </div>
        </div>
      )}

      {/* En cours */}
      {inProgressGuides.length > 0 && (
        <Section title="En cours" guides={inProgressGuides} onOpen={openGuide} />
      )}

      {/* Tous les guides */}
      <Section title="Tous les guides" guides={guides} onOpen={openGuide} />
    </div>
  );
}

function Stat({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div>
      <span style={{ fontSize: "16px", fontWeight: 700, color }}>{value}</span>
      <span style={{ fontSize: "11px", color: "#4a5568", marginLeft: "4px" }}>{label}</span>
    </div>
  );
}

function Section({ title, guides, onOpen }: {
  title: string;
  guides: import("../types").GuideListItem[];
  onOpen: (gid: string) => void;
}) {
  return (
    <div style={{ marginBottom: "24px" }}>
      <h2 style={{
        fontSize: "11px", fontWeight: 600, color: "#4a5568",
        textTransform: "uppercase", letterSpacing: "0.1em",
        marginBottom: "10px", borderBottom: "1px solid #2d3748", paddingBottom: "4px",
      }}>
        {title}
      </h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(210px, 1fr))", gap: "8px", paddingTop: "20px" }}>
        {guides.map(g => <GuideCard key={g.gid} guide={g} onOpen={onOpen} />)}
      </div>
    </div>
  );
}

function DofusIcon({ gid, pct, size = 44 }: { gid: string; pct: number; size?: number }) {
  const iconUrl = GID_TO_ICON[gid] ?? null;
  if (!iconUrl) return null;

  // L'icône colorée est clippée du bas vers le haut selon pct.
  // clipPath: inset(top right bottom left) — on réduit depuis le haut.
  const filledClip = `inset(${100 - pct}% 0 0 0)`;

  return (
    <div style={{
      position: "absolute",
      top: 0,
      left: 8,
      width: size,
      height: size,
      filter: "drop-shadow(0 2px 6px rgba(0,0,0,0.6))",
      zIndex: 2,
      flexShrink: 0,
    }}>
      {/* Calque grisé (base) */}
      <img
        src={iconUrl}
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "contain",
          filter: "grayscale(1) brightness(0.45)",
          userSelect: "none",
          pointerEvents: "none",
        }}
      />
      {/* Calque coloré, progressivement révélé du bas vers le haut */}
      {pct > 0 && (
        <img
          src={iconUrl}
          alt=""
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "contain",
            clipPath: filledClip,
            userSelect: "none",
            pointerEvents: "none",
          }}
        />
      )}
    </div>
  );
}

function GuideCard({ guide, onOpen }: {
  guide: import("../types").GuideListItem;
  onOpen: (gid: string) => void;
}) {
  const pct = guide.total_quests > 0 ? Math.round((guide.completed_quests / guide.total_quests) * 100) : 0;
  const isDone = pct === 100 && guide.total_quests > 0;
  const inProgress = guide.completed_quests > 0 && !isDone;
  const hasIcon = GID_TO_ICON[guide.gid] != null;

  const accentColor = isDone ? "#4ade80" : inProgress ? "#f0c040" : "#4a9eff";
  const borderColor = isDone ? "rgba(74,222,128,0.25)" : "#2d3748";

  return (
    // Wrapper pour permettre à l'icône de déborder vers le haut
    <div style={{ position: "relative", paddingTop: hasIcon ? "18px" : "0" }}>
      <DofusIcon gid={guide.gid} pct={pct} size={44} />

      <button
        onClick={() => onOpen(guide.gid)}
        style={{
          width: "100%",
          background: "#161b22",
          border: `1px solid ${borderColor}`,
          borderRadius: "8px",
          padding: "10px 12px",
          cursor: "pointer",
          textAlign: "left",
          transition: "border-color 0.15s, background 0.15s",
          position: "relative",
          overflow: "hidden",
        }}
        onMouseEnter={e => {
          (e.currentTarget as HTMLElement).style.borderColor = accentColor;
          (e.currentTarget as HTMLElement).style.background = "#1a2233";
        }}
        onMouseLeave={e => {
          (e.currentTarget as HTMLElement).style.borderColor = borderColor;
          (e.currentTarget as HTMLElement).style.background = "#161b22";
        }}
      >
        {/* Nom + checkmark */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: "8px",
          paddingLeft: hasIcon ? "46px" : "0",
          minWidth: 0,
        }}>
          <span style={{
            fontSize: "12px", fontWeight: 600, lineHeight: 1.3,
            color: isDone ? "#4ade80" : "#e2e8f0",
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
            minWidth: 0,
          }}>
            {guide.name}
          </span>
          {isDone && <span style={{ fontSize: "12px", flexShrink: 0 }}>✓</span>}
        </div>

        {/* Barre de progression */}
        <div style={{ height: "3px", background: "#2d3748", borderRadius: "2px", overflow: "hidden", marginBottom: "6px" }}>
          <div style={{
            height: "100%", width: `${pct}%`,
            background: accentColor,
            borderRadius: "2px", transition: "width 0.3s ease",
          }} />
        </div>

        {/* Compteur */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontSize: "10px", color: "#4a5568" }}>
            {guide.completed_quests}/{guide.total_quests} quêtes
          </span>
          <span style={{ fontSize: "10px", fontWeight: 700, color: accentColor }}>
            {pct}%
          </span>
        </div>
      </button>
    </div>
  );
}