"use client";

import { useState, useEffect } from "react";

interface Tab {
  id: string;
  name: string;
  icon: string;
  color: string;
  projectPath?: string;
  status?: "inactive" | "starting" | "active";
  sessionKey?: string;
}

const TABS_STORAGE_KEY = "mc_claude_tabs";

export default function ClaudePage() {
  const [tabs, setTabs] = useState<Tab[]>([
    { id: "main", name: "Claude Code", icon: "🤖", color: "#ff6154", status: "inactive" },
  ]);
  const [activeTab, setActiveTab] = useState("main");
  const [showSettings, setShowSettings] = useState(false);
  const [apiKey, setApiKey] = useState("");
  const [message, setMessage] = useState("");

  useEffect(() => {
    const saved = localStorage.getItem(TABS_STORAGE_KEY);
    if (saved) {
      try {
        setTabs(JSON.parse(saved));
      } catch (e) {}
    }
    
    const savedKey = localStorage.getItem("anthropic_api_key") || "";
    setApiKey(savedKey);
  }, []);

  const saveTabs = (newTabs: Tab[]) => {
    localStorage.setItem(TABS_STORAGE_KEY, JSON.stringify(newTabs));
    setTabs(newTabs);
  };

  const spawnSession = async (tabId: string) => {
    const tab = tabs.find(t => t.id === tabId);
    if (!tab) return;

    // Update status to starting
    const newTabs = tabs.map(t => 
      t.id === tabId ? { ...t, status: "starting" as const } : t
    );
    saveTabs(newTabs);

    try {
      const response = await fetch("/api/claude/spawn", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tabId, tabName: tab.name, apiKey }),
      });
      
      const data = await response.json();
      
      if (data.success) {
        // Update with session info
        const finalTabs = tabs.map(t => 
          t.id === tabId 
            ? { ...t, status: "active" as const, sessionKey: data.sessionKey }
            : t
        );
        saveTabs(finalTabs);
        setMessage(`Session spawned! Ask Horus to connect.`);
      } else {
        setMessage(`Error: ${data.error}`);
      }
    } catch (e) {
      setMessage(`Connection failed. Try asking Horus directly.`);
    }
  };

  const addTab = () => {
    const name = prompt("Project name:");
    if (!name) return;
    
    const colors = ["#ff6154", "#3b82f6", "#22c55e", "#f59e0b", "#8b5cf6", "#ec4899"];
    const newTab: Tab = {
      id: `tab-${Date.now()}`,
      name,
      icon: "📁",
      color: colors[Math.floor(Math.random() * colors.length)],
      status: "inactive",
    };
    
    saveTabs([...tabs, newTab]);
    setActiveTab(newTab.id);
  };

  const removeTab = (tabId: string) => {
    if (tabs.length <= 1) return;
    const newTabs = tabs.filter(t => t.id !== tabId);
    saveTabs(newTabs);
    if (activeTab === tabId) {
      setActiveTab(newTabs[0].id);
    }
  };

  const activeTabData = tabs.find(t => t.id === activeTab);

  return (
    <div className="min-h-screen bg-slate-950 flex flex-col">
      {/* Header */}
      <div className="bg-slate-900 border-b border-slate-800 px-6 py-4 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">🤖 Claude Code Sessions</h1>
          <p className="text-slate-400 text-sm">Spawn coding agents powered by Claude</p>
        </div>
        <button
          onClick={() => setShowSettings(true)}
          className="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm"
        >
          ⚙️ Settings
        </button>
      </div>

      {/* Tabs Bar */}
      <div className="bg-slate-900/50 border-b border-slate-800 px-4 py-2 flex items-center gap-2 overflow-x-auto">
        {tabs.map((tab) => (
          <div
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`
              flex items-center gap-2 px-4 py-2 rounded-lg cursor-pointer transition-all text-sm font-medium whitespace-nowrap
              ${activeTab === tab.id 
                ? "bg-slate-800 text-white border border-slate-600" 
                : "bg-slate-800/50 text-slate-400 border border-transparent hover:bg-slate-800 hover:text-white"
              }
            `}
          >
            <span>{tab.icon}</span>
            <span>{tab.name}</span>
            {tab.status === "active" && (
              <span className="w-2 h-2 rounded-full bg-green-500" title="Active" />
            )}
            {tab.status === "starting" && (
              <span className="w-2 h-2 rounded-full bg-yellow-500 animate-pulse" title="Starting..." />
            )}
            {tabs.length > 1 && (
              <button
                onClick={(e) => { e.stopPropagation(); removeTab(tab.id); }}
                className="ml-1 text-slate-500 hover:text-red-400 text-xs"
              >
                ✕
              </button>
            )}
          </div>
        ))}
        <button
          onClick={addTab}
          className="bg-slate-800/50 hover:bg-slate-800 text-slate-400 hover:text-white px-3 py-2 rounded-lg text-sm border border-dashed border-slate-600"
        >
          + Add Project
        </button>
      </div>

      {/* Content */}
      <div className="flex-1 flex items-center justify-center p-8">
        <div className="text-center max-w-lg">
          {activeTabData?.status === "inactive" && (
            <>
              <div className="text-6xl mb-6" style={{ color: activeTabData.color }}>
                {activeTabData.icon}
              </div>
              <h2 className="text-2xl font-bold text-white mb-2">{activeTabData.name}</h2>
              <p className="text-slate-400 mb-6">
                Start a Claude Code session for this project
              </p>
              <button
                onClick={() => spawnSession(activeTab)}
                className="bg-[#ff6154] hover:bg-[#ff4f3a] text-white px-8 py-4 rounded-xl font-bold text-lg transition-all transform hover:scale-105 shadow-lg"
                style={{ boxShadow: "0 4px 20px rgba(255, 97, 84, 0.4)" }}
              >
                🚀 Start Claude Session
              </button>
            </>
          )}

          {activeTabData?.status === "starting" && (
            <>
              <div className="text-6xl mb-6 animate-pulse">⏳</div>
              <h2 className="text-2xl font-bold text-white mb-2">Starting Session...</h2>
              <p className="text-slate-400">Connecting to Claude Code</p>
            </>
          )}

          {activeTabData?.status === "active" && (
            <>
              <div className="text-6xl mb-6">✅</div>
              <h2 className="text-2xl font-bold text-white mb-2">Session Active!</h2>
              <p className="text-slate-400 mb-4">
                Session ID: <code className="text-amber-400">{activeTabData.sessionKey?.slice(0, 12)}...</code>
              </p>
              <div className="bg-slate-800 rounded-lg p-4 text-left text-sm">
                <p className="text-slate-300 mb-2">
                  💡 <strong>To use this session:</strong>
                </p>
                <p className="text-slate-400">
                  Ask Horus to connect to this session for coding tasks.
                </p>
              </div>
              <button
                onClick={() => spawnSession(activeTab)}
                className="mt-4 bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm"
              >
                Restart Session
              </button>
            </>
          )}

          {message && (
            <div className="mt-6 bg-slate-800 rounded-lg p-4 text-left">
              <p className="text-slate-300 text-sm">{message}</p>
            </div>
          )}
        </div>
      </div>

      {/* Instructions */}
      <div className="bg-slate-900/50 border-t border-slate-800 px-6 py-4">
        <div className="flex items-center justify-between text-sm">
          <div className="text-slate-500">
            💡 Claude Code sessions run as separate agents. Ask Horus to delegate coding tasks to them.
          </div>
          <div className="flex items-center gap-2">
            {tabs.filter(t => t.status === "active").length > 0 && (
              <span className="text-green-400">
                ● {tabs.filter(t => t.status === "active").length} active
              </span>
            )}
          </div>
        </div>
      </div>

      {/* Settings Modal */}
      {showSettings && (
        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
          <div className="bg-slate-800 rounded-xl p-6 w-96 border border-slate-700">
            <h3 className="text-white font-bold text-lg mb-4">⚙️ Settings</h3>
            
            <div className="mb-4">
              <label className="block text-slate-400 text-sm mb-2">Anthropic API Key</label>
              <input
                type="password"
                value={apiKey}
                onChange={(e) => setApiKey(e.target.value)}
                placeholder="sk-ant-..."
                className="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm"
              />
              <p className="text-slate-500 text-xs mt-1">
                Get key from console.anthropic.com
              </p>
            </div>

            <div className="flex gap-2 justify-end">
              <button
                onClick={() => setShowSettings(false)}
                className="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600"
              >
                Cancel
              </button>
              <button
                onClick={() => {
                  localStorage.setItem("anthropic_api_key", apiKey);
                  setShowSettings(false);
                }}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-500"
              >
                Save
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}