import { useState, useEffect, useCallback, useRef, useMemo } from "react";
import { 
  Bot, Heart, Activity, Pause, Play, Square, Trash2, RefreshCw, 
  Settings, FileText, ActivitySquare, X, Copy, 
  ExternalLink, CheckCircle, XCircle, Loader2
} from "lucide-react";
import type { AgentDetail, AgentState, AgentHeartbeatRun } from "../api";
import { fetchAgent, updateAgentState, deleteAgent, fetchAgentLogs } from "../api";
import type { AgentLogEntry } from "@fusion/core";

/**
 * Simple className utility - joins class names conditionally
 */
function cn(...classes: (string | boolean | undefined | null)[]): string {
  return classes.filter(Boolean).join(" ");
}

/**
 * Format an ISO timestamp to a relative time string.
 */
function relativeTime(iso: string): string {
  const now = Date.now();
  const then = new Date(iso).getTime();
  const diffMs = now - then;

  // Future
  if (diffMs < 0) {
    const absDiff = Math.abs(diffMs);
    if (absDiff < 60_000) return "in a moment";
    if (absDiff < 3_600_000) return `in ${Math.floor(absDiff / 60_000)}m`;
    if (absDiff < 86_400_000) return `in ${Math.floor(absDiff / 3_600_000)}h`;
    return `in ${Math.floor(absDiff / 86_400_000)}d`;
  }

  // Past
  if (diffMs < 60_000) return "just now";
  if (diffMs < 3_600_000) return `${Math.floor(diffMs / 60_000)}m ago`;
  if (diffMs < 86_400_000) return `${Math.floor(diffMs / 3_600_000)}h ago`;
  return `${Math.floor(diffMs / 86_400_000)}d ago`;
}

interface AgentDetailViewProps {
  agentId: string;
  projectId?: string;
  onClose: () => void;
  addToast: (message: string, type?: "success" | "error") => void;
}

type TabId = "dashboard" | "logs" | "config" | "runs";

const TABS: { id: TabId; label: string; icon: typeof Activity }[] = [
  { id: "dashboard", label: "Dashboard", icon: ActivitySquare },
  { id: "logs", label: "Logs", icon: FileText },
  { id: "runs", label: "Runs", icon: Activity },
  { id: "config", label: "Settings", icon: Settings },
];

const STATE_COLORS: Record<AgentState, { bg: string; text: string; border: string }> = {
  idle: { bg: "rgba(139, 148, 158, 0.15)", text: "#8b949e", border: "#8b949e" },
  active: { bg: "rgba(46, 160, 67, 0.15)", text: "#3fb950", border: "#3fb950" },
  paused: { bg: "rgba(227, 179, 65, 0.15)", text: "#e3b541", border: "#e3b541" },
  terminated: { bg: "rgba(248, 81, 73, 0.15)", text: "#f85149", border: "#f85149" },
};

const RUN_STATUS_ICONS: Record<string, { icon: typeof CheckCircle; color: string }> = {
  completed: { icon: CheckCircle, color: "text-green-500" },
  failed: { icon: XCircle, color: "text-red-500" },
  active: { icon: Loader2, color: "text-cyan-500 animate-spin" },
  terminated: { icon: Square, color: "text-gray-500" },
};

export function AgentDetailView({ agentId, projectId, onClose, addToast }: AgentDetailViewProps) {
  const [agent, setAgent] = useState<AgentDetail | null>(null);
  const [logs, setLogs] = useState<AgentLogEntry[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [activeTab, setActiveTab] = useState<TabId>("dashboard");
  const [isStreaming, setIsStreaming] = useState(false);
  const logContainerRef = useRef<HTMLDivElement>(null);

  const loadAgent = useCallback(async () => {
    setIsLoading(true);
    try {
      const data = await fetchAgent(agentId, projectId);
      setAgent(data);
    } catch (err: any) {
      addToast(`Failed to load agent: ${err.message}`, "error");
      onClose();
    } finally {
      setIsLoading(false);
    }
  }, [agentId, addToast, onClose, projectId]);

  const loadLogs = useCallback(async () => {
    // Agent logs are tied to tasks, not agents directly.
    // If the agent has a current task, we could show those logs.
    // For now, we'll show heartbeat runs as the "activity" for the agent.
    // If the agent is working on a task, we could show task logs.
    if (agent?.taskId) {
      try {
        const data = await fetchAgentLogs(agent.taskId, projectId);
        setLogs(data);
      } catch (err: any) {
        console.error("Failed to load task logs:", err);
      }
    }
  }, [agent?.taskId, projectId]);

  useEffect(() => {
    void loadAgent();
  }, [loadAgent]);

  useEffect(() => {
    if (agent?.taskId) {
      void loadLogs();
    }
  }, [agent?.taskId, loadLogs]);

  // Set up SSE for live log streaming when viewing logs tab with a task
  useEffect(() => {
    if (activeTab !== "logs" || !agent?.taskId) {
      setIsStreaming(false);
      return;
    }

    const query = projectId ? `?projectId=${encodeURIComponent(projectId)}` : "";
    const es = new EventSource(`/api/tasks/${encodeURIComponent(agent.taskId)}/logs/stream${query}`);

    const handleAgentLog = (e: MessageEvent) => {
      try {
        const entry: AgentLogEntry = JSON.parse(e.data);
        setLogs(prev => [entry, ...prev]);
        
        // Auto-scroll to top for new entries
        const container = logContainerRef.current;
        if (container && container.scrollTop < 50) {
          container.scrollTop = 0;
        }
      } catch {
        // Ignore parse errors
      }
    };

    es.addEventListener("agent:log", handleAgentLog as EventListener);

    es.onerror = () => {
      setIsStreaming(false);
    };

    es.onopen = () => {
      setIsStreaming(true);
    };

    return () => {
      es.removeEventListener("agent:log", handleAgentLog as EventListener);
      es.close();
      setIsStreaming(false);
    };
  }, [agent?.taskId, activeTab, projectId]);

  const handleStateChange = async (newState: AgentState) => {
    try {
      await updateAgentState(agentId, newState, projectId);
      addToast(`Agent state updated to ${newState}`, "success");
      void loadAgent();
    } catch (err: any) {
      addToast(`Failed to update state: ${err.message}`, "error");
    }
  };

  const handleDelete = async () => {
    if (!agent || !confirm(`Delete agent "${agent.name}"? This cannot be undone.`)) return;
    try {
      await deleteAgent(agentId, projectId);
      addToast(`Agent "${agent.name}" deleted`, "success");
      onClose();
    } catch (err: any) {
      addToast(`Failed to delete agent: ${err.message}`, "error");
    }
  };

  const getHealthStatus = () => {
    if (!agent) return { label: "Unknown", color: "#888" };
    if (agent.state === "terminated") {
      return { label: "Terminated", color: "#f85149" };
    }
    if (agent.state === "paused") {
      return { label: "Paused", color: "#e3b541" };
    }
    if (!agent.lastHeartbeatAt) {
      return { label: agent.state === "active" ? "Starting..." : "Idle", color: "#8b949e" };
    }
    const lastHeartbeat = new Date(agent.lastHeartbeatAt).getTime();
    const elapsed = Date.now() - lastHeartbeat;
    const timeoutMs = 60000;
    if (elapsed > timeoutMs) {
      return { label: "Unresponsive", color: "#f85149" };
    }
    return { label: "Healthy", color: "#3fb950" };
  };

  const copyAgentId = () => {
    if (agent) {
      navigator.clipboard.writeText(agent.id);
      addToast("Agent ID copied to clipboard", "success");
    }
  };

  if (isLoading) {
    return (
      <div className="agent-detail-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
        <div className="agent-detail-modal">
          <div className="agent-detail-loading">
            <Loader2 className="animate-spin" size={24} />
            <span>Loading agent...</span>
          </div>
        </div>
      </div>
    );
  }

  if (!agent) {
    return null;
  }

  const stateStyle = STATE_COLORS[agent.state];
  const health = getHealthStatus();
  const runs = (agent as any).completedRuns || [];
  const activeRun = (agent as any).activeRun;

  return (
    <div className="agent-detail-overlay" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="agent-detail-modal">
        {/* Header */}
        <div className="agent-detail-header">
          <div className="agent-detail-title">
            <div className="agent-detail-icon">
              <Bot size={24} />
            </div>
            <div className="agent-detail-info">
              <h2>{agent.name}</h2>
              <div className="agent-detail-badges">
                <span 
                  className="badge"
                  style={{ background: stateStyle.bg, color: stateStyle.text, border: `1px solid ${stateStyle.border}` }}
                >
                  {agent.state}
                </span>
                <span className="badge" style={{ color: health.color }}>
                  {health.label === "Healthy" && <Heart size={12} />}
                  {health.label === "Unresponsive" && <Activity size={12} />}
                  {health.label}
                </span>
              </div>
            </div>
          </div>
          
          <div className="agent-detail-actions">
            {/* State-dependent action buttons */}
            {agent.state === "idle" && (
              <button className="btn btn--primary" onClick={() => void handleStateChange("active")}>
                <Play size={16} />
                Start
              </button>
            )}
            {agent.state === "active" && (
              <>
                <button className="btn" onClick={() => void handleStateChange("paused")}>
                  <Pause size={16} />
                  Pause
                </button>
                <button className="btn btn--danger" onClick={() => void handleStateChange("terminated")}>
                  <Square size={16} />
                  Stop
                </button>
              </>
            )}
            {agent.state === "paused" && (
              <>
                <button className="btn btn--primary" onClick={() => void handleStateChange("active")}>
                  <Play size={16} />
                  Resume
                </button>
                <button className="btn btn--danger" onClick={() => void handleStateChange("terminated")}>
                  <Square size={16} />
                  Stop
                </button>
              </>
            )}
            {agent.state === "terminated" && (
              <button className="btn btn--danger" onClick={handleDelete}>
                <Trash2 size={16} />
                Delete
              </button>
            )}
            
            <button className="btn-icon" onClick={() => void loadAgent()} title="Refresh">
              <RefreshCw size={16} />
            </button>
            <button className="btn-icon" onClick={onClose} title="Close">
              <X size={20} />
            </button>
          </div>
        </div>

        {/* Tabs */}
        <div className="agent-detail-tabs">
          {TABS.map(tab => (
            <button
              key={tab.id}
              className={cn("agent-detail-tab", activeTab === tab.id && "active")}
              onClick={() => setActiveTab(tab.id)}
            >
              <tab.icon size={16} />
              {tab.label}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        <div className="agent-detail-content">
          {activeTab === "dashboard" && (
            <DashboardTab agent={agent} health={health} />
          )}
          
          {activeTab === "logs" && (
            <LogsTab 
              logs={logs} 
              isStreaming={isStreaming}
              containerRef={logContainerRef}
              hasTask={!!agent.taskId}
            />
          )}
          
          {activeTab === "runs" && (
            <RunsTab 
              runs={runs} 
              activeRun={activeRun}
              addToast={addToast}
            />
          )}
          
          {activeTab === "config" && (
            <ConfigTab 
              agent={agent}
            />
          )}
        </div>

        {/* Footer with agent ID */}
        <div className="agent-detail-footer">
          <button className="btn-icon" onClick={copyAgentId} title="Copy Agent ID">
            <Copy size={14} />
          </button>
          <span className="agent-detail-id" onClick={copyAgentId}>
            {agent.id}
          </span>
          {agent.taskId && (
            <>
              <span className="divider">|</span>
              <span className="text-muted">Working on:</span>
              <a href={`/tasks/${agent.taskId}`} className="link">
                {agent.taskId}
                <ExternalLink size={12} />
              </a>
            </>
          )}
        </div>
      </div>

      <style>{`
        .agent-detail-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 1000;
          padding: 20px;
        }

        .agent-detail-modal {
          background: var(--bg-primary);
          border: 1px solid var(--border);
          border-radius: 12px;
          width: 100%;
          max-width: 900px;
          max-height: 85vh;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .agent-detail-loading {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12px;
          padding: 60px;
          color: var(--text-muted);
        }

        .agent-detail-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 20px 24px;
          border-bottom: 1px solid var(--border);
          background: var(--bg-secondary);
        }

        .agent-detail-title {
          display: flex;
          align-items: center;
          gap: 16px;
        }

        .agent-detail-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: var(--accent);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
        }

        .agent-detail-info h2 {
          font-size: 20px;
          font-weight: 600;
          margin: 0 0 6px 0;
        }

        .agent-detail-badges {
          display: flex;
          gap: 8px;
        }

        .agent-detail-actions {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .agent-detail-tabs {
          display: flex;
          gap: 4px;
          padding: 0 24px;
          border-bottom: 1px solid var(--border);
          background: var(--bg-secondary);
        }

        .agent-detail-tab {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 16px;
          background: none;
          border: none;
          border-bottom: 2px solid transparent;
          color: var(--text-muted);
          font-size: 14px;
          cursor: pointer;
          transition: all 0.15s ease;
        }

        .agent-detail-tab:hover {
          color: var(--text-primary);
          background: var(--bg-hover);
        }

        .agent-detail-tab.active {
          color: var(--accent);
          border-bottom-color: var(--accent);
        }

        .agent-detail-content {
          flex: 1;
          overflow-y: auto;
          padding: 24px;
        }

        .agent-detail-footer {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 24px;
          border-top: 1px solid var(--border);
          background: var(--bg-secondary);
          font-size: 12px;
          color: var(--text-muted);
        }

        .agent-detail-id {
          font-family: var(--font-mono);
          cursor: pointer;
        }

        .agent-detail-id:hover {
          color: var(--text-primary);
        }

        .divider {
          color: var(--border);
        }

        .text-muted {
          color: var(--text-muted);
        }

        .link {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          color: var(--accent);
          text-decoration: none;
        }

        .link:hover {
          text-decoration: underline;
        }
      `}</style>
    </div>
  );
}

// ── Dashboard Tab ───────────────────────────────────────────────────────────

function DashboardTab({ 
  agent, 
  health 
}: { 
  agent: AgentDetail; 
  health: { label: string; color: string };
}) {
  const stateStyle = STATE_COLORS[agent.state];
  
  const stats = useMemo(() => {
    const runs = (agent as any).completedRuns || [];
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    
    const todayRuns = runs.filter((r: AgentHeartbeatRun) => 
      new Date(r.startedAt) >= today
    );
    
    const successfulRuns = runs.filter((r: AgentHeartbeatRun) => 
      r.status === "completed"
    );
    
    return {
      totalRuns: runs.length,
      todayRuns: todayRuns.length,
      successfulRuns: successfulRuns.length,
      successRate: runs.length > 0 
        ? Math.round((successfulRuns.length / runs.length) * 100) 
        : 0,
    };
  }, [agent]);

  return (
    <div className="dashboard-tab">
      {/* Agent Info Card */}
      <div className="dashboard-section">
        <h3>Agent Information</h3>
        <div className="info-grid">
          <div className="info-item">
            <span className="info-label">Name</span>
            <span className="info-value">{agent.name}</span>
          </div>
          <div className="info-item">
            <span className="info-label">Role</span>
            <span className="info-value">{agent.role}</span>
          </div>
          <div className="info-item">
            <span className="info-label">State</span>
            <span className="info-value">
              <span 
                className="inline-badge"
                style={{ background: stateStyle.bg, color: stateStyle.text }}
              >
                {agent.state}
              </span>
            </span>
          </div>
          <div className="info-item">
            <span className="info-label">Health</span>
            <span className="info-value" style={{ color: health.color }}>
              {health.label}
            </span>
          </div>
          <div className="info-item">
            <span className="info-label">Created</span>
            <span className="info-value">{new Date(agent.createdAt).toLocaleDateString()}</span>
          </div>
          <div className="info-item">
            <span className="info-label">Last Heartbeat</span>
            <span className="info-value">
              {agent.lastHeartbeatAt 
                ? relativeTime(agent.lastHeartbeatAt)
                : "Never"
              }
            </span>
          </div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="dashboard-section">
        <h3>Statistics</h3>
        <div className="stats-grid">
          <div className="stat-card">
            <div className="stat-value">{stats.totalRuns}</div>
            <div className="stat-label">Total Runs</div>
          </div>
          <div className="stat-card">
            <div className="stat-value">{stats.todayRuns}</div>
            <div className="stat-label">Runs Today</div>
          </div>
          <div className="stat-card">
            <div className="stat-value">{stats.successRate}%</div>
            <div className="stat-label">Success Rate</div>
          </div>
        </div>
      </div>

      {/* Current Task */}
      {agent.taskId && (
        <div className="dashboard-section">
          <h3>Current Task</h3>
          <div className="current-task">
            <span className="task-badge">{agent.taskId}</span>
            <a href={`/tasks/${agent.taskId}`} className="btn btn--sm">
              View Task <ExternalLink size={14} />
            </a>
          </div>
        </div>
      )}

      {/* Metadata */}
      {agent.metadata && Object.keys(agent.metadata).length > 0 && (
        <div className="dashboard-section">
          <h3>Metadata</h3>
          <pre className="metadata-json">
            {JSON.stringify(agent.metadata, null, 2)}
          </pre>
        </div>
      )}

      <style>{`
        .dashboard-tab {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .dashboard-section {
          background: var(--bg-secondary);
          border-radius: 8px;
          padding: 20px;
        }

        .dashboard-section h3 {
          font-size: 14px;
          font-weight: 600;
          margin: 0 0 16px 0;
          color: var(--text-muted);
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .info-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
          gap: 16px;
        }

        .info-item {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .info-label {
          font-size: 12px;
          color: var(--text-muted);
        }

        .info-value {
          font-size: 14px;
          font-weight: 500;
        }

        .inline-badge {
          display: inline-block;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          text-transform: capitalize;
        }

        .stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }

        .stat-card {
          background: var(--bg-primary);
          border-radius: 8px;
          padding: 16px;
          text-align: center;
        }

        .stat-value {
          font-size: 28px;
          font-weight: 700;
          color: var(--accent);
        }

        .stat-label {
          font-size: 12px;
          color: var(--text-muted);
          margin-top: 4px;
        }

        .current-task {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .task-badge {
          font-family: var(--font-mono);
          background: var(--bg-primary);
          padding: 6px 12px;
          border-radius: 4px;
          font-size: 14px;
        }

        .metadata-json {
          background: var(--bg-primary);
          padding: 12px;
          border-radius: 4px;
          font-size: 12px;
          overflow-x: auto;
          margin: 0;
        }
      `}</style>
    </div>
  );
}

// ── Logs Tab ──────────────────────────────────────────────────────────────

function LogsTab({ 
  logs, 
  isStreaming,
  containerRef,
  hasTask 
}: { 
  logs: AgentLogEntry[]; 
  isStreaming: boolean;
  containerRef: React.RefObject<HTMLDivElement | null>;
  hasTask: boolean;
}) {
  if (!hasTask) {
    return (
      <div className="logs-tab">
        <div className="logs-empty">
          <FileText size={48} opacity={0.3} />
          <p>No task assigned</p>
          <p className="text-muted">
            Agent logs are available when the agent is assigned to a task
          </p>

          <style>{`
            .logs-tab {
              display: flex;
              flex-direction: column;
              height: 100%;
            }

            .logs-empty {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              padding: 48px;
              color: var(--text-muted);
              text-align: center;
            }

            .logs-empty p {
              margin: 8px 0 0 0;
            }
          `}</style>
        </div>
      </div>
    );
  }

  return (
    <div className="logs-tab">
      <div className="logs-header">
        <span className="logs-count">{logs.length} entries</span>
        {isStreaming && (
          <span className="streaming-indicator">
            <span className="streaming-dot" />
            Live
          </span>
        )}
      </div>
      
      <div ref={containerRef} className="logs-container">
        {logs.length === 0 ? (
          <div className="logs-empty">
            <FileText size={48} opacity={0.3} />
            <p>No log entries yet</p>
            <p className="text-muted">
              {isStreaming ? "Waiting for activity..." : "Logs will appear here when the agent is active"}
            </p>
          </div>
        ) : (
          logs.map((entry, i) => (
            <LogEntry key={`${entry.timestamp}-${i}`} entry={entry} />
          ))
        )}
      </div>

      <style>{`
        .logs-tab {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .logs-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 12px;
          margin-bottom: 12px;
          border-bottom: 1px solid var(--border);
        }

        .logs-count {
          font-size: 12px;
          color: var(--text-muted);
        }

        .streaming-indicator {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          color: var(--success);
        }

        .streaming-dot {
          width: 8px;
          height: 8px;
          background: var(--success);
          border-radius: 50%;
          animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }

        .logs-container {
          flex: 1;
          overflow-y: auto;
          font-family: var(--font-mono);
          font-size: 13px;
          line-height: 1.6;
          max-height: 400px;
        }

        .logs-empty {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 48px;
          color: var(--text-muted);
          text-align: center;
        }

        .logs-empty p {
          margin: 8px 0 0 0;
        }
      `}</style>
    </div>
  );
}

function LogEntry({ entry }: { entry: AgentLogEntry }) {
  const getEntryStyles = () => {
    switch (entry.type) {
      case "tool":
        return {
          color: "var(--accent)",
          borderLeft: "3px solid var(--accent)",
          background: "rgba(124, 92, 191, 0.08)",
        };
      case "tool_result":
        return {
          color: "var(--success)",
          borderLeft: "3px solid var(--success)",
          background: "rgba(76, 175, 80, 0.06)",
        };
      case "tool_error":
        return {
          color: "var(--error)",
          borderLeft: "3px solid var(--error)",
          background: "rgba(229, 57, 53, 0.06)",
        };
      case "thinking":
        return {
          color: "var(--text-muted)",
          fontStyle: "italic" as const,
          opacity: 0.7,
        };
      default:
        return {
          color: "var(--text-primary)",
        };
    }
  };

  const styles = getEntryStyles();
  const timestamp = new Date(entry.timestamp).toLocaleTimeString();

  return (
    <div className="log-entry" style={styles}>
      <span className="log-timestamp">[{timestamp}]</span>
      {entry.agent && (
        <span className="log-agent">[{entry.agent}]</span>
      )}
      {entry.type === "tool" && <span className="log-icon">⚡</span>}
      {entry.type === "tool_result" && <span className="log-icon">✓</span>}
      {entry.type === "tool_error" && <span className="log-icon">✗</span>}
      <span className="log-text">
        {entry.text}
        {entry.detail && (
          <span className="log-detail"> — {entry.detail}</span>
        )}
      </span>

      <style>{`
        .log-entry {
          display: flex;
          gap: 8px;
          padding: 4px 8px;
          margin: 2px 0;
          border-radius: 4px;
        }

        .log-timestamp {
          color: var(--text-muted);
          font-size: 11px;
          flex-shrink: 0;
        }

        .log-agent {
          color: var(--text-muted);
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          flex-shrink: 0;
        }

        .log-icon {
          flex-shrink: 0;
        }

        .log-text {
          word-break: break-word;
        }

        .log-detail {
          color: var(--text-muted);
          font-size: 12px;
        }
      `}</style>
    </div>
  );
}

// ── Runs Tab ───────────────────────────────────────────────────────────────

function RunsTab({ 
  runs, 
  activeRun,
  addToast 
}: { 
  runs: AgentHeartbeatRun[]; 
  activeRun?: AgentHeartbeatRun;
  addToast: (msg: string, type?: "success" | "error") => void;
}) {
  if (runs.length === 0 && !activeRun) {
    return (
      <div className="runs-empty">
        <Activity size={48} opacity={0.3} />
        <p>No runs yet</p>
        <p className="text-muted">Heartbeat runs will appear here</p>

        <style>{`
          .runs-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px;
            color: var(--text-muted);
            text-align: center;
          }
          .runs-empty p {
            margin: 8px 0 0 0;
          }
        `}</style>
      </div>
    );
  }

  const sortedRuns = [...runs].sort(
    (a, b) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime()
  );

  return (
    <div className="runs-tab">
      {activeRun && (
        <div className="run-card run-card--active">
          <div className="run-header">
            <span className="run-live-indicator">
              <span className="live-dot" />
              Live Run
            </span>
            <span className="run-status active">
              <Loader2 size={14} className="animate-spin" />
              Active
            </span>
          </div>
          <div className="run-details">
            <span>Started {relativeTime(activeRun.startedAt)}</span>
          </div>
        </div>
      )}

      {sortedRuns.map((run, i) => {
        const statusInfo = RUN_STATUS_ICONS[run.status] || RUN_STATUS_ICONS.completed;
        const StatusIcon = statusInfo.icon;
        const duration = run.endedAt 
          ? formatDuration(new Date(run.startedAt), new Date(run.endedAt))
          : "In progress";

        return (
          <div key={run.id} className="run-card">
            <div className="run-header">
              <span className="run-id">#{i + 1} {run.id.slice(0, 8)}</span>
              <span className={cn("run-status", run.status)}>
                <StatusIcon size={14} className={statusInfo.color} />
                {run.status}
              </span>
            </div>
            <div className="run-details">
              <span>Started {relativeTime(run.startedAt)}</span>
              <span>•</span>
              <span>{duration}</span>
            </div>
          </div>
        );
      })}

      <style>{`
        .runs-tab {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .run-card {
          background: var(--bg-secondary);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 16px;
        }

        .run-card--active {
          border-color: var(--cyan, #06b6d4);
          background: rgba(6, 182, 212, 0.05);
        }

        .run-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;
        }

        .run-live-indicator {
          display: flex;
          align-items: center;
          gap: 6px;
          font-weight: 600;
          color: var(--cyan, #06b6d4);
        }

        .live-dot {
          width: 8px;
          height: 8px;
          background: var(--cyan, #06b6d4);
          border-radius: 50%;
          animation: pulse 1.5s infinite;
        }

        .run-id {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--text-muted);
        }

        .run-status {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 13px;
          text-transform: capitalize;
        }

        .run-status.active {
          color: var(--cyan, #06b6d4);
        }

        .run-status.completed {
          color: var(--success);
        }

        .run-status.failed {
          color: var(--error);
        }

        .run-status.terminated {
          color: var(--text-muted);
        }

        .run-details {
          display: flex;
          gap: 8px;
          font-size: 12px;
          color: var(--text-muted);
        }
      `}</style>
    </div>
  );
}

function formatDuration(start: Date, end: Date): string {
  const diff = Math.floor((end.getTime() - start.getTime()) / 1000);
  
  if (diff < 60) return `${diff}s`;
  if (diff < 3600) return `${Math.floor(diff / 60)}m ${diff % 60}s`;
  return `${Math.floor(diff / 3600)}h ${Math.floor((diff % 3600) / 60)}m`;
}

// ── Config Tab ─────────────────────────────────────────────────────────────

function ConfigTab({ 
  agent
}: { 
  agent: AgentDetail;
}) {
  return (
    <div className="config-tab">
      <div className="config-section">
        <h3>Agent Configuration</h3>
        <p className="config-description">
          Configure agent settings and behavior.
        </p>
        
        <div className="config-fields">
          <div className="config-field">
            <label>Name</label>
            <input 
              type="text" 
              className="input" 
              defaultValue={agent.name}
              disabled
            />
            <span className="config-hint">Name changes coming soon</span>
          </div>
          
          <div className="config-field">
            <label>Role</label>
            <select className="select" defaultValue={agent.role} disabled>
              <option value="triage">Triage</option>
              <option value="executor">Executor</option>
              <option value="reviewer">Reviewer</option>
              <option value="merger">Merger</option>
              <option value="scheduler">Scheduler</option>
              <option value="custom">Custom</option>
            </select>
            <span className="config-hint">Role changes coming soon</span>
          </div>
        </div>
      </div>

      <div className="config-section">
        <h3>Advanced Settings</h3>
        <p className="config-description">
          Advanced configuration options for power users.
        </p>
        
        <div className="config-placeholder">
          <Settings size={32} opacity={0.3} />
          <p>Advanced configuration options will be available in a future update.</p>
          <p className="text-muted">
            This will include model selection, heartbeat intervals, and environment variables.
          </p>
        </div>
      </div>

      <style>{`
        .config-tab {
          display: flex;
          flex-direction: column;
          gap: 24px;
        }

        .config-section {
          background: var(--bg-secondary);
          border-radius: 8px;
          padding: 20px;
        }

        .config-section h3 {
          font-size: 16px;
          font-weight: 600;
          margin: 0 0 8px 0;
        }

        .config-description {
          font-size: 14px;
          color: var(--text-muted);
          margin: 0 0 20px 0;
        }

        .config-fields {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .config-field {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .config-field label {
          font-size: 13px;
          font-weight: 500;
        }

        .config-hint {
          font-size: 11px;
          color: var(--text-muted);
          font-style: italic;
        }

        .config-placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 32px;
          color: var(--text-muted);
          text-align: center;
        }

        .config-placeholder p {
          margin: 8px 0 0 0;
        }
      `}</style>
    </div>
  );
}