import React, { useState, useEffect } from "react";
import type { Session, Phase } from "../types";

const api = window.api;

interface HeaderProps {
  selectedSession: Session | null;
  gitBranch: string | null;
  onOpenSettings: () => void;
  viewPhase: Phase;
  onViewPhase: (phase: Phase) => void;
}

const phaseLabels: Record<Phase, string> = {
  research: "Research",
  plan: "Plan",
  implement: "Implement",
};

const phases: Phase[] = ["research", "plan", "implement"];

export function Header({
  selectedSession,
  gitBranch,
  onOpenSettings,
  viewPhase,
  onViewPhase,
}: HeaderProps) {
  // ── Maximize ─────────────────────────────────────────────────
  const [isMaximized, setIsMaximized] = useState(false);

  useEffect(() => {
    return api.onWindowMaximized(setIsMaximized);
  }, []);

  // ── Branch copy ──────────────────────────────────────────────
  const [copied, setCopied] = useState(false);

  const handleCopyBranch = () => {
    if (!gitBranch) return;
    navigator.clipboard.writeText(gitBranch);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <header className="header">
      <div className="header-left">
        <span className="app-wordmark">Claude Flow</span>
      </div>

      <div className="header-right">
        {selectedSession && (
          <div className="phase-indicator">
            {phases.map((phase) => {
              const phaseIndex = phases.indexOf(phase);
              const currentIndex = phases.indexOf(selectedSession.phase);
              const isComplete = phaseIndex < currentIndex;
              const isActive = phase === selectedSession.phase;
              const isReachable = phaseIndex <= currentIndex;
              const isViewing = phase === viewPhase && !isActive;

              return isReachable ? (
                <button
                  key={phase}
                  className={`phase-step ${isActive ? "active" : ""} ${
                    isComplete ? "complete" : ""
                  } ${isViewing ? "viewing" : ""}`}
                  onClick={() => onViewPhase(phase)}
                  title={
                    isActive
                      ? `Viewing ${phaseLabels[phase]} (current)`
                      : `View ${phaseLabels[phase]} artifact`
                  }
                >
                  {phaseLabels[phase]}
                </button>
              ) : (
                <span key={phase} className="phase-step">
                  {phaseLabels[phase]}
                </span>
              );
            })}
          </div>
        )}

        {/* ── Branch badge ── */}
        {selectedSession && gitBranch && (
          <button
            className={["branch-badge", copied ? "branch-copied" : ""]
              .filter(Boolean)
              .join(" ")}
            onClick={handleCopyBranch}
            title={copied ? "Copied!" : `Click to copy: ${gitBranch}`}
          >
            ⎇ {gitBranch}
          </button>
        )}

        {/* ── Maximize toggle ── */}
        <button
          className="maximize-btn"
          onClick={() => api.toggleMaximize()}
          title={isMaximized ? "Restore window" : "Maximize window"}
        >
          {isMaximized ? "⊡" : "□"}
        </button>

        {/* ── Settings button ── */}
        <button className="settings-btn" onClick={onOpenSettings} title="Settings">
          &#9881;
        </button>
      </div>
    </header>
  );
}