"use client";

import { useEffect } from "react";

import { useTermSocket } from "@/hooks/useTermSocket";

import type { TermCreds, LaunchSpec, AgentKind } from "@/lib/term";

import { AGENT_LABEL } from "@/lib/term";

export interface PaneState {

  id: string;

  spec: LaunchSpec;

}

interface TermPaneProps {

  pane: PaneState;

  creds: TermCreds | null;

  visible: boolean;

  focused: boolean;

  onFocus: () => void;

  onClose: () => void;

  onAssign?: (paneId: string) => void;

  registerFit?: (paneId: string, fitFn: (() => void) | null) => void;

  index: number;

}

const STATUS_META: Record<string, { label: string; color: string; pulse: boolean }> = {

  idle: { label: "IDLE", color: "#4a525e", pulse: false },

  connecting: { label: "CONNECTING", color: "#e8c468", pulse: true },

  live: { label: "LIVE", color: "#16e0c8", pulse: true },

  closed: { label: "CLOSED", color: "#4a525e", pulse: false },

  error: { label: "ERROR", color: "#ff6b6b", pulse: false },

};

export default function TermPane({

  pane,

  creds,

  visible,

  focused,

  onFocus,

  onClose,

  onAssign,

  registerFit,

  index,

}: TermPaneProps) {

  const { containerRef, status, sessionName, fit, fontSize, setFontSize } = useTermSocket({

    creds,

    spec: pane.spec,

    visible,

  });

  useEffect(() => {

    if (!registerFit) return;

    registerFit(pane.id, fit);

    return () => {

      registerFit(pane.id, null);

    };

  }, [pane.id, fit, registerFit]);

  const agent = pane.spec.agent as AgentKind;

  const meta = STATUS_META[status] ?? STATUS_META.idle;

  return (

    <div

      onMouseDown={onFocus}

      className="flex h-full w-full flex-col overflow-hidden"

      style={{

        background: "#050607",

        border: focused

          ? "1px solid rgba(22,224,200,0.45)"

          : "1px solid rgba(22,224,200,0.10)",

        boxShadow: focused ? "0 0 0 1px rgba(22,224,200,0.10), inset 0 0 80px rgba(22,224,200,0.02)" : "none",

        transition: "border-color 0.3s cubic-bezier(0.16,1,0.3,1)",

      }}

    >

      {}

      <div

        className="flex shrink-0 items-center justify-between gap-2 px-3"

        style={{

          height: 34,

          background: "rgba(10,12,14,0.92)",

          borderBottom: "1px solid rgba(22,224,200,0.10)",

        }}

      >

        <div className="flex min-w-0 items-center gap-2.5">

          <span

            className="font-mono"

            style={{ fontSize: "0.6rem", letterSpacing: "0.12em", color: "#4a525e" }}

          >

            {String(index + 1).padStart(2, "0")}

          </span>

          <span

            className="font-display font-bold uppercase"

            style={{ fontSize: "0.72rem", letterSpacing: "0.06em", color: "#e8eaed" }}

          >

            {AGENT_LABEL[agent]}

          </span>

          <span

            className="font-mono truncate"

            style={{ fontSize: "0.62rem", letterSpacing: "0.04em", color: "#4a525e" }}

          >

            {pane.spec.target}

            {pane.spec.cwd ? ` · ${pane.spec.cwd.split("/").pop() || pane.spec.cwd}` : ""}

          </span>

        </div>

        <div className="flex shrink-0 items-center gap-3">

          {sessionName && (

            <span

              className="font-mono hidden sm:inline truncate"

              style={{ fontSize: "0.56rem", letterSpacing: "0.06em", color: "#0d9e8e", maxWidth: 130 }}

              title={`tmux session - reattach: ${sessionName}`}

            >

              ⟲ {sessionName}

            </span>

          )}

          {onAssign && (

            <button

              onClick={(e) => {

                e.stopPropagation();

                onAssign(pane.id);

              }}

              title="Assign an existing session to this pane"

              className="font-mono uppercase"

              style={{

                fontSize: "0.56rem",

                letterSpacing: "0.08em",

                color: "#16e0c8",

                padding: "2px 5px",

                border: "1px solid rgba(22,224,200,0.24)",

                transition: "background 0.2s",

              }}

              onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(22,224,200,0.10)")}

              onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}

            >

              ⇄ ASSIGN

            </button>

          )}

          {}

          <span

            className="flex shrink-0 items-center font-mono"

            style={{ border: "1px solid rgba(22,224,200,0.24)" }}

          >

            <button

              type="button"

              onClick={(e) => {

                e.stopPropagation();

                setFontSize(fontSize - 1);

              }}

              onMouseDown={(e) => e.stopPropagation()}

              title="Smaller font"

              className="flex items-center justify-center"

              style={{

                height: 22,

                minWidth: 22,

                padding: "0 4px",

                fontSize: "0.56rem",

                lineHeight: 1,

                color: fontSize <= 9 ? "#4a525e" : "#8b929e",

                background: "transparent",

                transition: "background 0.2s, color 0.2s",

              }}

              onMouseEnter={(e) => {

                e.currentTarget.style.background = "rgba(22,224,200,0.10)";

                e.currentTarget.style.color = "#16e0c8";

              }}

              onMouseLeave={(e) => {

                e.currentTarget.style.background = "transparent";

                e.currentTarget.style.color = fontSize <= 9 ? "#4a525e" : "#8b929e";

              }}

            >

              A−

            </button>

            <span

              title="Terminal font size (px)"

              className="flex items-center justify-center"

              style={{

                height: 22,

                minWidth: 16,

                padding: "0 5px",

                fontSize: "0.56rem",

                letterSpacing: "0.02em",

                lineHeight: 1,

                color: "#16e0c8",

                borderLeft: "1px solid rgba(22,224,200,0.18)",

                borderRight: "1px solid rgba(22,224,200,0.18)",

              }}

            >

              {fontSize}

            </span>

            <button

              type="button"

              onClick={(e) => {

                e.stopPropagation();

                setFontSize(fontSize + 1);

              }}

              onMouseDown={(e) => e.stopPropagation()}

              title="Larger font"

              className="flex items-center justify-center"

              style={{

                height: 22,

                minWidth: 22,

                padding: "0 4px",

                fontSize: "0.56rem",

                lineHeight: 1,

                color: fontSize >= 20 ? "#4a525e" : "#8b929e",

                background: "transparent",

                transition: "background 0.2s, color 0.2s",

              }}

              onMouseEnter={(e) => {

                e.currentTarget.style.background = "rgba(22,224,200,0.10)";

                e.currentTarget.style.color = "#16e0c8";

              }}

              onMouseLeave={(e) => {

                e.currentTarget.style.background = "transparent";

                e.currentTarget.style.color = fontSize >= 20 ? "#4a525e" : "#8b929e";

              }}

            >

              A+

            </button>

          </span>

          <span className="flex items-center gap-1.5">

            <span

              className="rounded-full"

              style={{

                width: 6,

                height: 6,

                background: meta.color,

                boxShadow: meta.pulse ? `0 0 8px ${meta.color}` : "none",

                animation: meta.pulse ? "glow-breathe 2.4s ease-in-out infinite" : "none",

              }}

            />

            <span

              className="font-mono"

              style={{ fontSize: "0.54rem", letterSpacing: "0.10em", color: meta.color }}

            >

              {meta.label}

            </span>

          </span>

          <button

            onClick={(e) => {

              e.stopPropagation();

              onClose();

            }}

            aria-label="Close pane"

            className="flex items-center justify-center"

            style={{

              width: 22,

              height: 22,

              color: "#4a525e",

              transition: "color 0.2s",

            }}

            onMouseEnter={(e) => (e.currentTarget.style.color = "#ff6b6b")}

            onMouseLeave={(e) => (e.currentTarget.style.color = "#4a525e")}

          >

            <svg width="11" height="11" viewBox="0 0 11 11" fill="none">

              <path d="M1 1L10 10M10 1L1 10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />

            </svg>

          </button>

        </div>

      </div>

      {}

      <div className="relative min-h-0 flex-1">

        <div

          ref={containerRef}

          className="absolute inset-0"

          style={{ padding: "2px 4px", overflow: "hidden" }}

        />

      </div>

    </div>

  );

}