import { useStore } from "../store";
import { DofusIcon, GID_TO_ICON } from "./DofusIconWidget";

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", fontFamily: "'Cinzel Decorative', serif" }}>
          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 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} left={8} />

      <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>
  );
}