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

interface NewSessionModalProps {
  onConfirm: (phase: Phase) => void;
  onCancel: () => void;
}

const phaseOptions: { phase: Phase; label: string; description: string }[] = [
  { phase: "research",  label: "Research",  description: "Understand the codebase and requirements" },
  { phase: "plan",      label: "Plan",      description: "Create a detailed implementation strategy" },
  { phase: "implement", label: "Implement", description: "Execute the implementation plan" },
];

export function NewSessionModal({ onConfirm, onCancel }: NewSessionModalProps) {
  const [selected, setSelected] = useState<Phase>("research");

  // Close on Escape
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onCancel(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onCancel]);

  return (
    <div className="modal-backdrop" onClick={onCancel}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>

        <div className="modal-header">
          <span className="modal-title">New Session</span>
          <button className="modal-close" onClick={onCancel}>×</button>
        </div>

        <div className="modal-body">
          <p className="modal-prompt">Choose where to start</p>
          <div className="phase-cards">
            {phaseOptions.map(({ phase, label, description }) => (
              <button
                key={phase}
                className={`phase-card${selected === phase ? " selected" : ""}`}
                onClick={() => setSelected(phase)}
              >
                <span className="phase-card-label">{label}</span>
                <span className="phase-card-desc">{description}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="modal-footer">
          <button className="modal-btn-secondary" onClick={onCancel}>Cancel</button>
          <button className="modal-btn-primary" onClick={() => onConfirm(selected)}>
            Create
          </button>
        </div>

      </div>
    </div>
  );
}