"use client";

import { memo } from "react";
import { IconCheck, IconX, IconTerminal } from "@tabler/icons-react";
import { GridSpinner } from "@/components/grid-spinner";
import type { Message } from "@/lib/types/http";
import { stripAnsi } from "@/lib/utils/ansi";
import { Badge } from "@kandev/ui/badge";
import { ExpandableRow } from "./expandable-row";
import { useExpandState } from "./use-expand-state";
import { useTranslation } from "react-i18next";
import { isSuccessfulScriptExecutionMetadata } from "@/hooks/processed-message-filtering";

interface ScriptExecutionMetadata {
  script_type: "setup" | "cleanup" | "agent_boot";
  agent_name?: string;
  command: string;
  status: "starting" | "running" | "exited" | "failed";
  exit_code?: number;
  is_resuming?: boolean;
  started_at?: string;
  completed_at?: string;
  process_id?: string;
  error?: string;
}

// Returns the catalog key for the whole "<verb> agent <name>" line rather than
// a verb to concatenate: the word order is not English-universal.
function getAgentBootMessageKey(
  isResuming: boolean | undefined,
  isSuccess: boolean,
  isRunning: boolean,
): string {
  if (isResuming) {
    if (isSuccess) return "task:agentBootResumed";
    if (isRunning) return "task:agentBootResuming";
    return "task:agentBootFailedToResume";
  }
  if (isSuccess) return "task:agentBootStarted";
  if (isRunning) return "task:agentBootStarting";
  return "task:agentBootFailedToStart";
}

function AgentBootHeader({
  metadata,
  isSuccess,
  isRunning,
}: {
  metadata: ScriptExecutionMetadata;
  isSuccess: boolean;
  isRunning: boolean;
}) {
  const { t } = useTranslation();
  const agentName = metadata.agent_name || t("task:agentFallbackName");
  const messageKey = getAgentBootMessageKey(metadata.is_resuming, isSuccess, isRunning);
  return (
    <div className="flex items-center gap-2 text-xs">
      <span className="inline-flex items-center gap-1.5 shrink-0 whitespace-nowrap">
        <span className="text-xs text-muted-foreground">{t(messageKey, { agentName })}</span>
        {isRunning && <GridSpinner className="text-muted-foreground" />}
      </span>
    </div>
  );
}

function ScriptHeader({
  command,
  isSetup,
  isRunning,
  isSuccess,
}: {
  command: string;
  isSetup: boolean;
  isRunning: boolean;
  isSuccess: boolean;
}) {
  const { t } = useTranslation();
  return (
    <div className="flex items-center gap-2 text-xs">
      <span className="inline-flex items-center gap-1.5 shrink-0 whitespace-nowrap">
        <Badge variant={isSetup ? "default" : "secondary"} className="text-xs">
          {isSetup ? t("task:setup") : t("task:cleanup")}
        </Badge>
        <span className="font-mono text-xs text-muted-foreground">{command}</span>
        {isRunning && <GridSpinner className="text-muted-foreground" />}
        {isSuccess && !isRunning && <IconCheck className="h-3.5 w-3.5 text-green-500" />}
        {!isSuccess && !isRunning && <IconX className="h-3.5 w-3.5 text-red-500" />}
      </span>
    </div>
  );
}

// Helper function to calculate duration
function calculateDuration(startedAt: string, completedAt: string): string {
  try {
    const start = new Date(startedAt).getTime();
    const end = new Date(completedAt).getTime();
    const durationMs = end - start;
    if (durationMs < 1000) return `${durationMs}ms`;
    if (durationMs < 60000) return `${(durationMs / 1000).toFixed(1)}s`;
    const minutes = Math.floor(durationMs / 60000);
    const seconds = Math.floor((durationMs % 60000) / 1000);
    return `${minutes}m ${seconds}s`;
  } catch {
    return "N/A";
  }
}

type ScriptFooterProps = {
  isAgentBoot: boolean;
  isRunning: boolean;
  metadata: ScriptExecutionMetadata;
  exitCode: number | undefined;
};

function ScriptFooter({ isAgentBoot, isRunning, metadata, exitCode }: ScriptFooterProps) {
  const { t } = useTranslation();
  if (isRunning) return null;
  if (isAgentBoot && metadata.started_at && metadata.completed_at) {
    return (
      <div className="text-[10px] text-muted-foreground pt-2 border-t border-border/30">
        {t("task:durationValue", {
          duration: calculateDuration(metadata.started_at, metadata.completed_at),
        })}
      </div>
    );
  }
  if (!isAgentBoot && exitCode !== undefined) {
    return (
      <div className="flex items-center justify-between text-[10px] text-muted-foreground pt-2 border-t border-border/30">
        <span>{t("task:exitCodeValue", { exitCode })}</span>
        {metadata.started_at && metadata.completed_at && (
          <span>
            {t("task:durationValue", {
              duration: calculateDuration(metadata.started_at, metadata.completed_at),
            })}
          </span>
        )}
      </div>
    );
  }
  return null;
}

type ScriptBodyProps = {
  isAgentBoot: boolean;
  command: string;
  content: string;
  error: string | undefined;
  isRunning: boolean;
  metadata: ScriptExecutionMetadata;
  exitCode: number | undefined;
};

function ScriptExpandedContent({
  isAgentBoot,
  command,
  content,
  error,
  isRunning,
  metadata,
  exitCode,
}: ScriptBodyProps) {
  const { t } = useTranslation();
  return (
    <div className="pl-4 border-l-2 border-border/30 space-y-2">
      {isAgentBoot && command && (
        <div>
          <div className="text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1">
            {t("task:command")}
          </div>
          <pre className="font-mono text-xs bg-muted/30 rounded px-3 py-2 overflow-x-auto whitespace-pre-wrap break-words">
            {command}
          </pre>
        </div>
      )}
      {content && content.trim() !== "" && (
        <div>
          <div className="text-[10px] uppercase tracking-wide text-muted-foreground/60 mb-1">
            {t("task:output")}
          </div>
          <pre className="font-mono text-xs bg-muted/30 rounded px-3 py-2 overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap break-words">
            {stripAnsi(content)}
          </pre>
        </div>
      )}
      {error && (
        <div>
          <div className="text-[10px] uppercase tracking-wide text-red-600/70 dark:text-red-400/70 mb-1">
            {t("task:error")}
          </div>
          <div className="text-xs text-red-600 dark:text-red-400 bg-red-500/10 rounded px-2 py-1.5">
            {error}
          </div>
        </div>
      )}
      <ScriptFooter
        isAgentBoot={isAgentBoot}
        isRunning={isRunning}
        metadata={metadata}
        exitCode={exitCode}
      />
    </div>
  );
}

function parseScriptMetadata(comment: Message) {
  const metadata = comment.metadata as ScriptExecutionMetadata | undefined;
  const status = metadata?.status;
  const scriptType = metadata?.script_type;
  const isRunning = status === "starting" || status === "running";
  const isSuccess = isSuccessfulScriptExecutionMetadata(metadata);
  return { metadata, status, scriptType, isRunning, isSuccess };
}

export const ScriptExecutionMessage = memo(function ScriptExecutionMessage({
  comment,
}: {
  comment: Message;
}) {
  const { t } = useTranslation();
  const { metadata, status, scriptType, isRunning, isSuccess } = parseScriptMetadata(comment);
  const autoExpanded = isRunning;
  const { isExpanded, handleToggle } = useExpandState(status, autoExpanded);

  // Fallback for missing metadata
  if (!metadata || !scriptType) {
    const hasExpandableContent = !!comment.content;
    return (
      <ExpandableRow
        icon={<IconTerminal className="h-4 w-4 text-yellow-600 dark:text-yellow-400" />}
        header={
          <div className="flex items-center gap-2 text-xs">
            <span className="text-xs font-mono text-yellow-600 dark:text-yellow-400">
              {t("task:scriptExecutionMetadataUnavailable")}
            </span>
          </div>
        }
        hasExpandableContent={hasExpandableContent}
        isExpanded={isExpanded}
        onToggle={handleToggle}
      >
        {comment.content && (
          <div className="pl-4 border-l-2 border-border/30">
            <pre className="font-mono text-xs bg-muted/30 rounded px-3 py-2 overflow-x-auto max-h-[300px] overflow-y-auto whitespace-pre-wrap break-words">
              {stripAnsi(comment.content)}
            </pre>
          </div>
        )}
      </ExpandableRow>
    );
  }

  const { command, exit_code, error } = metadata;
  const isAgentBoot = scriptType === "agent_boot";
  const isSetup = scriptType === "setup";
  const hasDuration = !!(metadata.started_at && metadata.completed_at);
  const hasExpandableContent = !!(
    command ||
    comment.content ||
    error ||
    exit_code !== undefined ||
    hasDuration
  );

  return (
    <ExpandableRow
      icon={<IconTerminal className="h-4 w-4 text-muted-foreground" />}
      header={
        isAgentBoot ? (
          <AgentBootHeader metadata={metadata} isSuccess={isSuccess} isRunning={isRunning} />
        ) : (
          <ScriptHeader
            command={command}
            isSetup={isSetup}
            isRunning={isRunning}
            isSuccess={isSuccess}
          />
        )
      }
      hasExpandableContent={hasExpandableContent}
      isExpanded={isExpanded}
      onToggle={handleToggle}
    >
      <ScriptExpandedContent
        isAgentBoot={isAgentBoot}
        command={command}
        content={comment.content}
        error={error}
        isRunning={isRunning}
        metadata={metadata}
        exitCode={exit_code}
      />
    </ExpandableRow>
  );
});