"use client";

import { useEffect, useState } from "react";
import { AtlasChat } from "@/components/AtlasChat";
import { useRouter, useParams } from "next/navigation";

const DISCOVERY_PHASES = [
  "big_picture",
  "users_personas",
  "features_scope",
  "business_model",
  "screens_data",
  "risks_questions",
];

interface FreshIdeaMainProps {
  projectId: string;
  projectName: string;
}

export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
  const router = useRouter();
  const params = useParams();
  const workspace = params?.workspace as string;

  const [savedPhaseIds, setSavedPhaseIds] = useState<Set<string>>(new Set());
  const [allDone, setAllDone] = useState(false);
  const [prdLoading, setPrdLoading] = useState(false);
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    const poll = () => {
      fetch(`/api/projects/${projectId}/save-phase`)
        .then(r => r.json())
        .then(d => {
          const ids = new Set<string>((d.phases ?? []).map((p: { phase: string }) => p.phase));
          setSavedPhaseIds(ids);
          const done = DISCOVERY_PHASES.every(id => ids.has(id));
          setAllDone(done);
        })
        .catch(() => {});
    };
    poll();
    const interval = setInterval(poll, 8_000);
    return () => clearInterval(interval);
  }, [projectId]);

  const handleGeneratePRD = async () => {
    if (prdLoading) return;
    setPrdLoading(true);
    try {
      router.push(`/${workspace}/project/${projectId}/prd`);
    } finally {
      setPrdLoading(false);
    }
  };

  const handleMVP = () => {
    router.push(`/${workspace}/project/${projectId}/build`);
  };

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", position: "relative" }}>
      {/* Decision banner — shown when all 6 phases are saved */}
      {allDone && !dismissed && (
        <div style={{
          background: "linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)",
          padding: "18px 28px",
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 16, flexShrink: 0, flexWrap: "wrap",
          borderBottom: "1px solid #333",
        }}>
          <div>
            <div style={{ fontSize: "0.88rem", fontWeight: 700, color: "#fff", fontFamily: "Outfit, sans-serif", marginBottom: 3 }}>
              ✦ Discovery complete — what's next?
            </div>
            <div style={{ fontSize: "0.75rem", color: "#a09a90", fontFamily: "Outfit, sans-serif" }}>
              Atlas has captured all 6 discovery phases. Choose your next step.
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, flexShrink: 0 }}>
            <button
              onClick={handleGeneratePRD}
              disabled={prdLoading}
              style={{
                padding: "10px 20px", borderRadius: 8, border: "none",
                background: "#fff", color: "#1a1a1a",
                fontSize: "0.84rem", fontWeight: 700,
                fontFamily: "Outfit, sans-serif", cursor: "pointer",
                transition: "opacity 0.12s",
              }}
              onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
              onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
            >
              {prdLoading ? "Navigating…" : "Generate PRD →"}
            </button>
            <button
              onClick={handleMVP}
              style={{
                padding: "10px 20px", borderRadius: 8,
                border: "1px solid rgba(255,255,255,0.2)",
                background: "transparent", color: "#fff",
                fontSize: "0.84rem", fontWeight: 600,
                fontFamily: "Outfit, sans-serif", cursor: "pointer",
                transition: "background 0.12s",
              }}
              onMouseEnter={e => (e.currentTarget.style.background = "rgba(255,255,255,0.08)")}
              onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
            >
              Plan MVP Test →
            </button>
            <button
              onClick={() => setDismissed(true)}
              style={{
                background: "none", border: "none", cursor: "pointer",
                color: "#666", fontSize: "1rem", padding: "4px 6px",
                fontFamily: "Outfit, sans-serif",
              }}
              title="Dismiss"
            >
              ×
            </button>
          </div>
        </div>
      )}

      <AtlasChat
        projectId={projectId}
        projectName={projectName}
      />
    </div>
  );
}