import { Activity, CheckCircle2, FileCode2, FileText, GitBranch, Loader2, Terminal } from "lucide-react";
import { useMemo } from "react";
import { useAmaSessionEvents } from "../hooks/useAmaSessionEvents";
import { usePersistedSessionEvents } from "../hooks/usePersistedSessionEvents";
import { useSessionRelay } from "../hooks/useSessionRelay";
import { amaRuntimeEventsToRelayEvents, type CodeChangeActivity, extractCodeChangeActivity } from "../lib/codeChangeActivity";
import { FieldLabel, formatRelative } from "./TaskDetailFields";

function taskAnnotations(task: any): Record<string, unknown> {
  const annotations = task?.metadata?.annotations;
  return annotations && typeof annotations === "object" && !Array.isArray(annotations) ? annotations : {};
}

function taskDone(task: any): boolean {
  return task?.status === "done" || task?.status === "cancelled" || task?.status === "in_review";
}

function codeChangeIcon(kind: CodeChangeActivity["kind"]) {
  switch (kind) {
    case "edit":
    case "write":
      return FileCode2;
    case "read":
      return FileText;
    case "diff":
      return GitBranch;
    case "test":
    case "bash":
      return Terminal;
    default:
      return Activity;
  }
}

function CodeChangeRows({ items, phase }: { items: CodeChangeActivity[]; phase: "loading" | "ready" | "error" }) {
  if (phase === "loading") {
    return (
      <div className="rounded-lg border border-border bg-surface-primary px-3 py-4 text-center text-[12px] text-content-tertiary">
        Loading runtime activity...
      </div>
    );
  }

  if (phase === "error") {
    return (
      <div className="rounded-lg border border-border bg-surface-primary px-3 py-4 text-center text-[12px] text-content-tertiary">
        Runtime activity unavailable.
      </div>
    );
  }

  if (items.length === 0) {
    return (
      <div className="rounded-lg border border-border bg-surface-primary px-3 py-4 text-center text-[12px] text-content-tertiary">
        No code activity yet.
      </div>
    );
  }

  return (
    <div className="overflow-hidden rounded-lg border border-border bg-surface-primary">
      {items.map((item, index) => {
        const Icon = codeChangeIcon(item.kind);
        const StatusIcon = item.status === "running" ? Loader2 : CheckCircle2;
        return (
          <div key={item.id} className={`flex gap-3 px-3 py-2.5 ${index > 0 ? "border-t border-border" : ""}`}>
            <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md bg-accent-soft text-accent">
              <Icon className="size-3.5" />
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex min-w-0 items-center gap-2">
                <span className="shrink-0 text-[12px] font-semibold text-content-primary">{item.title}</span>
                <span className="min-w-0 truncate font-mono text-[12px] text-accent">{item.subject}</span>
              </div>
              {item.detail && <div className="mt-0.5 truncate font-mono text-[11px] text-content-tertiary">{item.detail}</div>}
              <div className="mt-1 flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.06em] text-content-tertiary">
                <StatusIcon className={`size-3 ${item.status === "running" ? "animate-spin text-accent" : "text-success"}`} />
                <span>{item.status}</span>
                <span>{formatRelative(item.timestamp)}</span>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function AmaLiveCodeChanges({ task }: { task: any }) {
  const annotations = taskAnnotations(task);
  const sessionId = (annotations.sessionId as string) || (annotations.agentSessionId as string) || (annotations["ama.sessionId"] as string);

  const { events: liveEvents, phase: livePhase } = useAmaSessionEvents({
    taskId: task.id,
    taskDone: taskDone(task),
    enabled: !taskDone(task),
  });

  const { events: persistedEvents, phase: persistedPhase } = usePersistedSessionEvents({
    taskId: task.id,
    sessionId: sessionId || "",
    enabled: taskDone(task) || livePhase === "error",
  });

  const events = taskDone(task) || livePhase === "error" ? persistedEvents : amaRuntimeEventsToRelayEvents(liveEvents);
  const phase = taskDone(task) || livePhase === "error" ? persistedPhase : livePhase;

  const items = useMemo(() => extractCodeChangeActivity(events, 8), [events]);
  return <CodeChangeRows items={items} phase={phase} />;
}

function RelayLiveCodeChanges({ sessionId, task }: { sessionId: string; task: any }) {
  const { events: liveEvents, wsConnected } = useSessionRelay({ sessionId, enabled: !taskDone(task) });
  const { events: persistedEvents, phase: persistedPhase } = usePersistedSessionEvents({
    taskId: task.id,
    sessionId,
    enabled: taskDone(task) || !wsConnected,
  });

  const events = taskDone(task) || !wsConnected ? persistedEvents : liveEvents;
  const phase = taskDone(task) || !wsConnected ? persistedPhase : "ready";

  const items = useMemo(() => extractCodeChangeActivity(events, 8), [events]);
  return <CodeChangeRows items={items} phase={phase} />;
}

export function LiveCodeChanges({ task }: { task: any }) {
  const annotations = taskAnnotations(task);
  const hasAmaSession =
    typeof annotations["ama.sessionId"] === "string" ||
    typeof annotations.agentSessionId === "string" ||
    typeof annotations["ama.projectId"] === "string" ||
    typeof annotations["ama.runtime"] === "string";
  const relaySessionId = typeof task?.active_session_id === "string" ? task.active_session_id : null;

  if (!hasAmaSession && !relaySessionId) return null;

  return (
    <div>
      <FieldLabel>Live Code Changes</FieldLabel>
      {hasAmaSession ? <AmaLiveCodeChanges task={task} /> : <RelayLiveCodeChanges task={task} sessionId={relaySessionId!} />}
    </div>
  );
}