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

type Theme = "dark" | "light";

interface HeaderProps {
  projects: Project[];
  sessions: Session[];
  selectedProject: Project | null;
  selectedSession: Session | null;
  onSelectProject: (project: Project | null) => void;
  onSelectSession: (session: Session | null) => void;
  onCreateProject: () => void;
  onCreateSession: () => void;
  onDeleteProject?: (id: string) => void;
  onDeleteSession?: (id: string) => void;
  theme: Theme;
  onToggleTheme: () => void;
}

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

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

export function Header({
  projects,
  sessions,
  selectedProject,
  selectedSession,
  onSelectProject,
  onSelectSession,
  onCreateProject,
  onCreateSession,
  onDeleteProject,
  onDeleteSession,
  theme,
  onToggleTheme,
}: HeaderProps) {
  const handleDeleteProject = () => {
    if (!selectedProject || !onDeleteProject) return;
    if (confirm(`Delete project "${selectedProject.name}"? This cannot be undone.`)) {
      onDeleteProject(selectedProject.id);
    }
  };

  const handleDeleteSession = () => {
    if (!selectedSession || !onDeleteSession) return;
    if (confirm(`Delete session "${selectedSession.name}"? This cannot be undone.`)) {
      onDeleteSession(selectedSession.id);
    }
  };

  return (
    <header className="header">
      <div className="header-left">
        {/* ── Wordmark ── */}
        <span className="app-wordmark">Claude Flow</span>

        <select
          value={selectedProject?.id || ""}
          onChange={(e) => {
            const project = projects.find((p) => p.id === e.target.value);
            onSelectProject(project || null);
            onSelectSession(null);
          }}
        >
          <option value="">Select Project...</option>
          {projects.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
            </option>
          ))}
        </select>
        <button onClick={onCreateProject}>+ Project</button>
        {selectedProject && onDeleteProject && (
          <button
            onClick={handleDeleteProject}
            className="btn-delete"
            title="Delete project"
          >
            🗑️
          </button>
        )}

        {selectedProject && (
          <>
            <select
              value={selectedSession?.id || ""}
              onChange={(e) => {
                const session = sessions.find((s) => s.id === e.target.value);
                onSelectSession(session || null);
              }}
            >
              <option value="">Select Session...</option>
              {sessions.map((s) => (
                <option key={s.id} value={s.id}>
                  {s.name}
                </option>
              ))}
            </select>
            <button onClick={onCreateSession}>+ Session</button>
            {selectedSession && onDeleteSession && (
              <button
                onClick={handleDeleteSession}
                className="btn-delete"
                title="Delete session"
              >
                🗑️
              </button>
            )}
          </>
        )}
      </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;

              return (
                <span
                  key={phase}
                  className={`phase-step ${isActive ? "active" : ""} ${
                    isComplete ? "complete" : ""
                  }`}
                >
                  {phaseLabels[phase]}
                </span>
              );
            })}
          </div>
        )}

        {/* ── Theme toggle ── */}
        <button className="theme-toggle" onClick={onToggleTheme}>
          {theme === "dark" ? "[light]" : "[dark]"}
        </button>
      </div>
    </header>
  );
}