"use client";

import React, { useState, useEffect, useCallback } from "react";
import { useParams } from "next/navigation";
import { Loader2, Target, BookOpen, Layers, GitBranch, Pencil, FileText, Check, Plus } from "lucide-react";
import ReactMarkdown from "react-markdown";

// Types mapping to our Postgres plan shape
type Plan = {
  vision?: string;
  brief?: string;
  tasks: Array<{ id: string; title: string; description?: string; status: string }>;
  decisions: Array<{ id: string; title: string; choice: string; why?: string }>;
};

type Tab = "objective" | "stories" | "features" | "architecture";

// Shared Theme Variables
const INK = {
  main: "#1a1918",
  muted: "#6b6560",
  faint: "#a09a90",
  border: "#e8e4dc",
  bg: "#ffffff",
  bgHover: "#f8f6f2",
};

export default function PlanPageV2() {
  const params = useParams();
  const projectId = (params?.projectId as string) || "";

  const [plan, setPlan] = useState<Plan | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<Tab>("objective");

  const load = useCallback(async () => {
    try {
      const res = await fetch(`/api/projects/${projectId}/plan`, { credentials: "include" });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();
      setPlan(data.plan);
      setError(null);
    } catch (e: any) {
      setError(e?.message ?? "Failed to load plan");
    } finally {
      setLoading(false);
    }
  }, [projectId]);

  useEffect(() => {
    load();
    // Safe polling interval
    const intervalId = setInterval(load, 15000);
    return () => clearInterval(intervalId);
  }, [load]);

  if (loading && !plan) {
    return (
      <div style={{ display: "flex", justifyContent: "center", padding: 100 }}>
        <Loader2 className="animate-spin" size={24} color={INK.muted} />
      </div>
    );
  }

  if (error || !plan) {
    return (
      <div style={{ padding: 40, color: "red", textAlign: "center" }}>
        {error || "Failed to load plan"}
      </div>
    );
  }

  return (
    <div style={{ maxWidth: 1000, margin: "0 auto", padding: "40px 20px" }}>
      
      {/* ── HEADER & TABS ── */}
      <div style={{ marginBottom: 32 }}>

        
        <div style={{ 
          display: "flex", 
          gap: 8, 
          borderBottom: `1px solid ${INK.border}`, 
          paddingBottom: 0 
        }}>
          <TabButton active={activeTab === "objective"} onClick={() => setActiveTab("objective")} icon={<Target size={14} />} label="Objective" />
          <TabButton active={activeTab === "stories"} onClick={() => setActiveTab("stories")} icon={<BookOpen size={14} />} label="User Stories" />
          <TabButton active={activeTab === "features"} onClick={() => setActiveTab("features")} icon={<Layers size={14} />} label="Features" />
          <TabButton active={activeTab === "architecture"} onClick={() => setActiveTab("architecture")} icon={<GitBranch size={14} />} label="Architecture" />
        </div>
      </div>

      {/* ── CONTENT AREA ── */}
      {/* 
        By rendering them all but toggling display: none, we fix the "always needs to load" 
        issue you mentioned. The DOM nodes stay mounted, preserving state and preventing jitter.
      */}
      <div style={{ display: activeTab === "objective" ? "block" : "none" }}>
        <ObjectiveView plan={plan} projectId={projectId} onChange={setPlan} />
      </div>
      
      <div style={{ display: activeTab === "stories" ? "block" : "none" }}>
        <UserStoriesView plan={plan} projectId={projectId} onChange={setPlan} />
      </div>

      <div style={{ display: activeTab === "features" ? "block" : "none" }}>
        <FeaturesView plan={plan} projectId={projectId} onChange={setPlan} />
      </div>

      <div style={{ display: activeTab === "architecture" ? "block" : "none" }}>
        <ArchitectureView plan={plan} projectId={projectId} onChange={setPlan} />
      </div>

    </div>
  );
}

// ──────────────────────────────────────────────────
// 1. OBJECTIVE VIEW
// The business case / 1-page summary
// ──────────────────────────────────────────────────
function ObjectiveView({ plan, projectId, onChange }: { plan: Plan, projectId: string, onChange: (p: Plan) => void }) {
  const [editing, setEditing] = useState(!plan.vision);
  const [draft, setDraft] = useState(plan.vision ?? "");
  const [saving, setSaving] = useState(false);

  const save = async () => {
    setSaving(true);
    try {
      const r = await fetch(`/api/projects/${projectId}/plan`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ kind: "vision", text: draft }),
      });
      const d = await r.json();
      if (d.plan) onChange(d.plan);
      setEditing(false);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="panel-container">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
        <div>
          
        </div>
        {!editing && (
          <button onClick={() => setEditing(true)} className="btn-ghost">
            <Pencil size={12} /> Edit
          </button>
        )}
      </div>

      {editing ? (
        <div style={{ border: `1px solid ${INK.border}`, borderRadius: 8, overflow: "hidden" }}>
          <textarea
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            style={{
              width: "100%", minHeight: 400, padding: 20, fontSize: "0.95rem", lineHeight: 1.6,
              border: "none", outline: "none", resize: "vertical", fontFamily: "var(--font-sans)",
            }}
            placeholder="Describe the business objective..."
          />
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, padding: "12px 20px", background: INK.bgHover, borderTop: `1px solid ${INK.border}` }}>
            <button onClick={() => setEditing(false)} className="btn-secondary">Cancel</button>
            <button onClick={save} disabled={saving} className="btn-primary">
              {saving ? "Saving..." : "Save Objective"}
            </button>
          </div>
        </div>
      ) : (
        <div className="markdown-prose" style={{ background: "#fff", border: `1px solid ${INK.border}`, padding: 32, borderRadius: 8, minHeight: 200 }}>
          {plan.vision ? (
            <ReactMarkdown>{plan.vision}</ReactMarkdown>
          ) : (
            <div style={{ color: INK.faint, fontStyle: "italic" }}>No objective defined yet. Switch to Architect mode and brainstorm with the AI.</div>
          )}
        </div>
      )}
    </div>
  );
}

// ──────────────────────────────────────────────────
// 2. USER STORIES VIEW
// ──────────────────────────────────────────────────
function UserStoriesView({ plan, projectId }: { plan: Plan, projectId: string, onChange: (p: Plan) => void }) {
  // In a full implementation, we'd parse spec.md or filter specific types of tasks.
  // For now, we mock the UI to show the intended architecture.
  return (
    <div className="panel-container">
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: "1.25rem", fontWeight: 600, margin: 0, color: INK.main }}>User Stories</h2>
        <p style={{ color: INK.muted, fontSize: "0.85rem", margin: "4px 0 0" }}>The prioritized journeys users will take through your application.</p>
      </div>
      
      <div style={{ border: `1px dashed ${INK.border}`, padding: 40, borderRadius: 8, textAlign: "center", color: INK.muted }}>
        <BookOpen size={24} style={{ margin: "0 auto 12px", opacity: 0.5 }} />
        <p style={{ fontWeight: 500 }}>User Stories are being built.</p>
        <p style={{ fontSize: "0.85rem", maxWidth: 400, margin: "8px auto 0" }}>
          This view will display specific user personas and their acceptance scenarios (e.g. "As a User, I want to log in so I can see my dashboard").
        </p>
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────
// 3. FEATURES VIEW (Replaces Tasks)
// ──────────────────────────────────────────────────
function FeaturesView({ plan, projectId }: { plan: Plan, projectId: string, onChange: (p: Plan) => void }) {
  const features = plan.tasks.filter(t => t.status !== "done"); // Simplification for prototype
  
  return (
    <div className="panel-container">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
        <div>
          <h2 style={{ fontSize: "1.25rem", fontWeight: 600, margin: 0, color: INK.main }}>Features Queue</h2>
          <p style={{ color: INK.muted, fontSize: "0.85rem", margin: "4px 0 0" }}>High-level capabilities to be delegated to the AI.</p>
        </div>
        <button className="btn-primary">
          <Plus size={14} /> New Feature
        </button>
      </div>

      <div style={{ display: "grid", gap: 12 }}>
        {features.length > 0 ? features.map(f => (
          <div key={f.id} style={{ 
            border: `1px solid ${INK.border}`, 
            borderRadius: 8, 
            padding: 16,
            background: "#fff",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: "0.95rem", color: INK.main }}>{f.title}</div>
              {f.description && <div style={{ fontSize: "0.8rem", color: INK.muted, marginTop: 4 }}>{f.description}</div>}
            </div>
            <button className="btn-secondary" style={{ background: INK.main, color: "#fff", borderColor: INK.main }}>
              Delegate
            </button>
          </div>
        )) : (
          <div style={{ padding: 40, textAlign: "center", border: `1px solid ${INK.border}`, borderRadius: 8, color: INK.muted }}>
            No features defined yet. Use Architect mode to brainstorm.
          </div>
        )}
      </div>
    </div>
  );
}

// ──────────────────────────────────────────────────
// 4. ARCHITECTURE VIEW
// ──────────────────────────────────────────────────
function ArchitectureView({ plan, projectId }: { plan: Plan, projectId: string, onChange: (p: Plan) => void }) {
  return (
    <div className="panel-container">
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: "1.25rem", fontWeight: 600, margin: 0, color: INK.main }}>Technical Architecture</h2>
        <p style={{ color: INK.muted, fontSize: "0.85rem", margin: "4px 0 0" }}>Decisions made regarding the tech stack, database, and integrations.</p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {plan.decisions.length > 0 ? plan.decisions.map(d => (
          <div key={d.id} style={{ border: `1px solid ${INK.border}`, borderRadius: 8, padding: 20, background: "#fff" }}>
            <div style={{ fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em", color: INK.faint, marginBottom: 4 }}>
              {d.title}
            </div>
            <div style={{ fontSize: "1.1rem", fontWeight: 600, color: INK.main, marginBottom: 8 }}>
              {d.choice}
            </div>
            {d.why && (
              <div style={{ fontSize: "0.85rem", color: INK.muted, lineHeight: 1.5 }}>
                {d.why}
              </div>
            )}
          </div>
        )) : (
          <div style={{ gridColumn: "span 2", padding: 40, textAlign: "center", border: `1px dashed ${INK.border}`, borderRadius: 8, color: INK.muted }}>
            No technical decisions logged yet.
          </div>
        )}
      </div>
    </div>
  );
}


// ── Shared UI Components ──────────────────────────────────────────────────────

function TabButton({ active, onClick, icon, label }: { active: boolean, onClick: () => void, icon: React.ReactNode, label: string }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: "flex", alignItems: "center", gap: 6,
        padding: "10px 16px",
        background: "transparent",
        border: "none",
        borderBottom: active ? `2px solid ${INK.main}` : "2px solid transparent",
        color: active ? INK.main : INK.muted,
        fontWeight: active ? 600 : 500,
        fontSize: "0.9rem",
        cursor: "pointer",
        transition: "all 0.15s ease",
        marginBottom: -1 // Overlap the container's bottom border
      }}
    >
      {icon}
      {label}
    </button>
  );
}

// Global styles injected here for the prototype so it renders cleanly
const styleTag = `
  .btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s ease; border: 1px solid transparent;
  }
  .btn-primary { background: #1a1918; color: white; }
  .btn-primary:hover { background: #333; }
  .btn-secondary { background: #fff; border-color: #e8e4dc; color: #1a1918; }
  .btn-secondary:hover { background: #f8f6f2; }
  .btn-ghost { background: transparent; color: #6b6560; }
  .btn-ghost:hover { background: #f8f6f2; color: #1a1918; }
  
  .markdown-prose h1 { font-size: 1.5rem; font-weight: 700; margin-top: 0; }
  .markdown-prose h2 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; }
  .markdown-prose p { margin-top: 0.5rem; margin-bottom: 1rem; line-height: 1.6; }
  .markdown-prose ul { padding-left: 1.5rem; margin-bottom: 1rem; }
  .markdown-prose li { margin-bottom: 0.25rem; }
`;

if (typeof document !== "undefined" && !document.getElementById("plan-v2-styles")) {
  const style = document.createElement("style");
  style.id = "plan-v2-styles";
  style.innerHTML = styleTag;
  document.head.appendChild(style);
}