import { openUrl } from "@tauri-apps/plugin-opener";
import { useStore } from "../store";
import { SectionItem, QuestItem } from "../types";

export default function GuideView() {
  const { activeGuideData, completedQuests, toggleQuest } = useStore();

  if (!activeGuideData) return null;

  const { name, effect, recommended_level, resources, sections } = activeGuideData;

  const allQuests = collectAllQuests(sections);
  const completedCount = allQuests.filter(q => completedQuests.has(q)).length;
  const pct = allQuests.length > 0 ? Math.round((completedCount / allQuests.length) * 100) : 0;

  return (
    <div style={{ flex: 1, display: "flex", overflow: "hidden", minHeight: 0 }}>
      {/* Main quest list */}
      <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
        {/* Guide header */}
        <div style={{ marginBottom: "20px" }}>
          <h1 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040", marginBottom: "4px" }}>
            {name}
          </h1>
          <div style={{ display: "flex", gap: "16px", alignItems: "center", marginBottom: "10px" }}>
            {recommended_level && (
              <span style={{
                fontSize: "11px", background: "rgba(74,158,255,0.15)", color: "#4a9eff",
                border: "1px solid rgba(74,158,255,0.3)", borderRadius: "4px", padding: "2px 8px",
              }}>
                Niveau recommandé : {recommended_level}
              </span>
            )}
            <span style={{ fontSize: "11px", color: "#94a3b8" }}>
              {completedCount}/{allQuests.length} quêtes · {pct}%
            </span>
          </div>
          {/* Progress bar */}
          <div style={{ height: "4px", background: "#2d3748", borderRadius: "2px", overflow: "hidden" }}>
            <div style={{
              height: "100%", width: `${pct}%`,
              background: pct === 100 ? "#4ade80" : "linear-gradient(90deg, #4a9eff, #f0c040)",
              borderRadius: "2px", transition: "width 0.3s ease",
            }} />
          </div>
          {effect && (
            <div style={{
              marginTop: "10px", background: "rgba(240,192,64,0.05)",
              border: "1px solid rgba(240,192,64,0.2)", borderRadius: "6px",
              padding: "8px 12px", fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
            }}>
              <span style={{ color: "#f0c040", fontWeight: 600 }}>Effet : </span>
              {effect}
            </div>
          )}
        </div>

        {/* Sections */}
        {sections.map((section, si) => (
          <div key={si} style={{ marginBottom: "20px" }}>
            <h2 style={{
              fontSize: "11px", fontWeight: 600, color: "#4a5568",
              textTransform: "uppercase", letterSpacing: "0.1em",
              marginBottom: "8px", borderBottom: "1px solid #2d3748", paddingBottom: "4px",
            }}>
              {section.name}
            </h2>
            {section.items.map((item, ii) => (
              <SectionItemView key={ii} item={item} completedQuests={completedQuests} onToggle={toggleQuest} />
            ))}
          </div>
        ))}
      </div>

      {/* Resources panel */}
      {resources.length > 0 && (
        <div style={{
          width: "200px", flexShrink: 0, background: "#161b22",
          borderLeft: "1px solid #2d3748", overflowY: "auto", padding: "16px 14px",
        }}>
          <h3 style={{
            fontSize: "11px", fontWeight: 600, color: "#4a5568",
            textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: "10px",
          }}>
            Ressources
          </h3>
          {resources.map((r, i) => (
            <div key={i} style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "4px 0", borderBottom: "1px solid #1f2937",
              fontSize: "11px",
            }}>
              <span style={{ color: "#94a3b8", flex: 1, marginRight: "8px" }}>{r.name}</span>
              <span style={{ color: "#f0c040", fontWeight: 700, flexShrink: 0 }}>×{r.quantity}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function SectionItemView({ item, completedQuests, onToggle }: {
  item: SectionItem;
  completedQuests: Set<string>;
  onToggle: (name: string) => void;
}) {
  if (item.type === "Instruction") {
    if (item.text.startsWith("__ZONE__:")) {
      const zone = item.text.replace("__ZONE__:", "");
      return (
        <div style={{
          display: "flex", alignItems: "center", gap: "8px",
          padding: "8px 0 4px", marginBottom: "2px",
        }}>
          <div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
          <span style={{ fontSize: "11px", color: "#4a9eff", fontWeight: 600, flexShrink: 0 }}>{zone}</span>
          <div style={{ flex: 1, height: "1px", background: "#2d3748" }} />
        </div>
      );
    }
    return (
      <div style={{
        background: "rgba(74,158,255,0.05)", border: "1px solid rgba(74,158,255,0.15)",
        borderRadius: "6px", padding: "8px 12px", marginBottom: "4px",
        fontSize: "11px", color: "#94a3b8", lineHeight: 1.5,
      }}>
        ℹ️ {item.text}
      </div>
    );
  }

  if (item.type === "Group") {
    return (
      <div style={{
        background: "rgba(255,255,255,0.02)", border: "1px solid #2d3748",
        borderRadius: "6px", padding: "8px 10px", marginBottom: "6px",
      }}>
        {item.note && (
          <div style={{
            fontSize: "10px", color: "#4a9eff", marginBottom: "6px",
            fontStyle: "italic",
          }}>
            🔗 {item.note}
          </div>
        )}
        {item.quests.map((q, i) => (
          <QuestRow key={i} quest={q} indent completed={completedQuests.has(q.name)} onToggle={onToggle} />
        ))}
      </div>
    );
  }

  if (item.type === "Quest") {
    return <QuestRow quest={item} completed={completedQuests.has(item.name)} onToggle={onToggle} />;
  }

  return null;
}

function QuestRow({ quest, completed, onToggle, indent }: {
  quest: QuestItem;
  completed: boolean;
  onToggle: (name: string) => void;
  indent?: boolean;
}) {
  return (
    <div
      onClick={() => onToggle(quest.name)}
      style={{
        display: "flex", alignItems: "flex-start", gap: "8px",
        padding: indent ? "4px 0" : "5px 6px",
        borderRadius: "5px", cursor: "pointer",
        marginBottom: indent ? "2px" : "3px",
        opacity: completed ? 0.6 : 1,
        transition: "all 0.12s",
      }}
      onMouseEnter={e => {
        (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.04)";
      }}
      onMouseLeave={e => {
        (e.currentTarget as HTMLElement).style.background = "transparent";
      }}
    >
      <input
        type="checkbox"
        checked={completed}
        onChange={() => onToggle(quest.name)}
        onClick={e => e.stopPropagation()}
        style={{ marginTop: "2px", flexShrink: 0 }}
      />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: "5px", flexWrap: "wrap" }}>
          <span style={{
            fontSize: "12px", color: completed ? "#4a5568" : "#e2e8f0",
            textDecoration: completed ? "line-through" : "none",
            lineHeight: 1.4,
          }}>
            {quest.name}
          </span>
          {quest.url && (
            <span
              title="Voir sur Dofus Pour Les Noobs"
              onClick={e => { e.stopPropagation(); openUrl(quest.url!); }}
              style={{
                fontSize: "10px", color: "#4a9eff", cursor: "pointer",
                opacity: 0.7, flexShrink: 0, lineHeight: 1,
              }}
              onMouseEnter={e => (e.currentTarget as HTMLElement).style.opacity = "1"}
              onMouseLeave={e => (e.currentTarget as HTMLElement).style.opacity = "0.7"}
            >
              🔗
            </span>
          )}
        </div>
        {quest.combat_indicators.length > 0 && (
          <div style={{ display: "flex", flexWrap: "wrap", gap: "3px", marginTop: "3px" }}>
            {quest.combat_indicators.map((ci, i) => (
              <span key={i} style={{
                fontSize: "9px", padding: "1px 5px",
                background: "rgba(74,158,255,0.15)", color: "#4a9eff",
                border: "1px solid rgba(74,158,255,0.25)", borderRadius: "3px",
              }}>
                {ci.combat_type} {ci.count}
              </span>
            ))}
          </div>
        )}
        {quest.note && (
          <div style={{ fontSize: "10px", color: "#94a3b8", marginTop: "2px", fontStyle: "italic" }}>
            → {quest.note}
          </div>
        )}
      </div>
    </div>
  );
}

function collectAllQuests(sections: import("../types").Section[] | undefined): string[] {
  if (!sections) return [];
  const names: string[] = [];
  for (const section of sections) {
    for (const item of section.items) {
      if (item.type === "Quest") names.push(item.name);
      else if (item.type === "Group") item.quests.forEach((q: import("../types").QuestItem) => names.push(q.name));
    }
  }
  return names;
}