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

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

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,
}: HeaderProps) {
  return (
    <header className="header">
      <div className="header-left">
        <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 && (
          <>
            <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>
          </>
        )}
      </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>
        )}
      </div>
    </header>
  );
}