"use client";

import { useEffect, useMemo, useState } from "react";

const LIVE_WINDOW_S = 20 * 60;

function isLive(s: LiveSession): boolean {

  if (s.attached) return true;

  const t = parseInt(s.created, 10);

  if (!t) return false;

  return Date.now() / 1000 - t < LIVE_WINDOW_S;

}

import type {

  TargetsResponse,

  TermCreds,

  LiveSession,

  AgentKind,

  TermMode,

  LaunchSpec,

} from "@/lib/term";

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

interface LauncherProps {

  creds: TermCreds | null;

  targets: TargetsResponse | null;

  onLaunch: (spec: LaunchSpec) => void;

  onKillSession: (s: LiveSession) => void;

  collapsed: boolean;

}

function FieldLabel({ children }: { children: React.ReactNode }) {

  return (

    <span

      className="font-mono uppercase block"

      style={{ fontSize: "0.58rem", letterSpacing: "0.14em", color: "#4a525e", marginBottom: 7 }}

    >

      {children}

    </span>

  );

}

function ageOf(created: string): string {

  const t = parseInt(created, 10);

  if (!t) return "";

  const s = Math.max(0, Math.floor(Date.now() / 1000 - t));

  if (s < 60) return `${s}s`;

  if (s < 3600) return `${Math.floor(s / 60)}m`;

  if (s < 86400) return `${Math.floor(s / 3600)}h`;

  return `${Math.floor(s / 86400)}d`;

}

const selectStyle: React.CSSProperties = {

  width: "100%",

  height: 40,

  background: "#0a0c0e",

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

  color: "#e8eaed",

  fontFamily: "'JetBrains Mono', monospace",

  fontSize: "0.74rem",

  letterSpacing: "0.02em",

  padding: "0 12px",

  outline: "none",

  appearance: "none",

  borderRadius: 0,

  cursor: "pointer",

};

function SessionRow({

  s,

  live,

  onAttach,

  onKill,

}: {

  s: LiveSession;

  live: boolean;

  onAttach: (s: LiveSession) => void;

  onKill: (s: LiveSession) => void;

}) {

  const accent = live ? "#16e0c8" : "#4a525e";

  return (

    <div

      className="group"

      style={{

        background: "#0a0c0e",

        border: `1px solid ${live ? "rgba(22,224,200,0.18)" : "rgba(22,224,200,0.06)"}`,

        opacity: live ? 1 : 0.62,

      }}

    >

      <button

        onClick={() => onAttach(s)}

        className="flex w-full items-center justify-between gap-2 px-3.5 text-left"

        style={{ minHeight: live ? 52 : 42, transition: "background 0.2s" }}

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

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

      >

        <div className="min-w-0">

          <div className="flex items-center gap-2">

            {live && (

              <span className="rounded-full shrink-0" style={{ width: 5, height: 5, background: "#16e0c8", boxShadow: "0 0 6px #16e0c8" }} />

            )}

            <span className="font-display font-bold uppercase" style={{ fontSize: live ? "0.74rem" : "0.66rem", color: accent, letterSpacing: "0.03em" }}>

              {AGENT_LABEL[(s.agent as AgentKind)] ?? s.agent}

            </span>

            <span className="font-mono" style={{ fontSize: "0.56rem", color: "#8b929e", letterSpacing: "0.04em" }}>

              {s.target}

            </span>

            {s.attached && (

              <span className="font-mono" style={{ fontSize: "0.5rem", color: "#0d9e8e", letterSpacing: "0.06em", border: "1px solid rgba(22,224,200,0.24)", padding: "1px 4px" }}>

                OPEN

              </span>

            )}

          </div>

          <span className="font-mono block truncate" style={{ fontSize: "0.54rem", color: "#4a525e", maxWidth: 180, marginTop: 3 }} title={s.session}>

            {s.session} · {ageOf(s.created)} ago

          </span>

        </div>

        <span className="font-display font-bold uppercase shrink-0 flex items-center gap-1" style={{ fontSize: "0.6rem", color: accent, letterSpacing: "0.06em" }}>

          Attach ▸

        </span>

      </button>

      <button

        onClick={() => onKill(s)}

        className="font-mono uppercase w-full opacity-40 hover:opacity-100"

        style={{ fontSize: "0.5rem", letterSpacing: "0.08em", color: "#ff6b6b", padding: "5px", borderTop: "1px solid rgba(255,107,107,0.12)", transition: "opacity 0.2s", minHeight: 30 }}

      >

        Kill session

      </button>

    </div>

  );

}

export default function Launcher({

  creds,

  targets,

  onLaunch,

  onKillSession,

  collapsed,

}: LauncherProps) {

  const [targetKey, setTargetKey] = useState<string>("");

  const [agent, setAgent] = useState<AgentKind>("shell");

  const [mode, setMode] = useState<TermMode>("persistent");

  const [cwd, setCwd] = useState<string>("");

  const [sessions, setSessions] = useState<LiveSession[]>([]);

  const [showIdle, setShowIdle] = useState(false);

  const { liveSessions, idleSessions } = useMemo(() => {

    const live: LiveSession[] = [];

    const idle: LiveSession[] = [];

    for (const s of sessions) (isLive(s) ? live : idle).push(s);

    const byNew = (a: LiveSession, b: LiveSession) =>

      parseInt(b.created, 10) - parseInt(a.created, 10);

    return { liveSessions: live.sort(byNew), idleSessions: idle.sort(byNew) };

  }, [sessions]);

  const target = useMemo(

    () => targets?.targets.find((t) => t.key === targetKey) ?? null,

    [targets, targetKey]

  );

  useEffect(() => {

    if (targets && !targetKey && targets.targets.length) {

      const first = targets.targets[0];

      setTargetKey(first.key);

      setAgent(first.default_agent);

      setCwd(first.default_cwd ?? "");

    }

  }, [targets, targetKey]);

  useEffect(() => {

    if (target) {

      setAgent((a) => (target.agents.includes(a) ? a : target.default_agent));

      setCwd(target.default_cwd ?? "");

    }

  }, [target]);

  useEffect(() => {

    if (!creds) return;

    let alive = true;

    const tick = async () => {

      try {

        const s = await fetchSessions(creds);

        if (alive) setSessions(s);

      } catch {

      }

    };

    tick();

    const id = setInterval(tick, 5000);

    return () => {

      alive = false;

      clearInterval(id);

    };

  }, [creds]);

  if (collapsed) return null;

  const launch = () => {

    if (!targetKey) return;

    onLaunch({ target: targetKey, agent, mode, cwd });

  };

  const attach = (s: LiveSession) => {

    onLaunch({

      target: s.target,

      agent: (s.agent as AgentKind) || "shell",

      mode: "persistent",

      cwd: "",

      session: s.session,

    });

  };

  return (

    <div

      className="flex h-full flex-col overflow-y-auto"

      style={{ background: "rgba(8,10,12,0.96)", borderRight: "1px solid rgba(22,224,200,0.10)" }}

    >

      {}

      <div className="px-4 pt-4 pb-3" style={{ borderBottom: "1px solid rgba(22,224,200,0.08)" }}>

        <p

          className="font-mono uppercase"

          style={{ fontSize: "0.55rem", letterSpacing: "0.2em", color: "#0d9e8e", marginBottom: 6 }}

        >

          Team-Up

        </p>

        <h2 className="font-display font-bold uppercase" style={{ fontSize: "1.25rem", lineHeight: 0.92, color: "#e8eaed", letterSpacing: "-0.02em" }}>

          Workspace

        </h2>

      </div>

      {

}

      <div className="px-4 pt-4 pb-3" style={{ borderBottom: "1px solid rgba(22,224,200,0.08)" }}>

        <div className="flex items-center justify-between" style={{ marginBottom: 12 }}>

          <span className="font-display font-bold uppercase" style={{ fontSize: "0.92rem", color: "#16e0c8", letterSpacing: "0.02em" }}>

            Sessions

          </span>

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

            <span className="rounded-full" style={{ width: 6, height: 6, background: liveSessions.length ? "#16e0c8" : "#4a525e", boxShadow: liveSessions.length ? "0 0 8px #16e0c8" : "none", animation: liveSessions.length ? "glow-breathe 2.4s ease-in-out infinite" : "none" }} />

            <span className="font-mono" style={{ fontSize: "0.56rem", color: "#0d9e8e", letterSpacing: "0.08em" }}>

              {liveSessions.length} LIVE · {idleSessions.length} IDLE

            </span>

          </span>

        </div>

        {sessions.length === 0 && (

          <p className="font-mono" style={{ fontSize: "0.62rem", color: "#4a525e", letterSpacing: "0.03em", lineHeight: 1.6 }}>

            No running sessions. Launch one below - persistent sessions survive

            reload and reattach from any device (phone or PC).

          </p>

        )}

        {}

        {liveSessions.length > 0 && (

          <div className="space-y-2.5 mb-3">

            {liveSessions.map((s) => (

              <SessionRow key={s.session} s={s} live onAttach={attach} onKill={onKillSession} />

            ))}

          </div>

        )}

        {}

        {idleSessions.length > 0 && (

          <div>

            <button

              onClick={() => setShowIdle((v) => !v)}

              className="font-mono uppercase flex items-center justify-between w-full"

              style={{ fontSize: "0.54rem", letterSpacing: "0.12em", color: "#4a525e", padding: "6px 0" }}

            >

              <span>{showIdle ? "▾" : "▸"} {idleSessions.length} idle leftover{idleSessions.length === 1 ? "" : "s"}</span>

              <span

                role="button"

                tabIndex={0}

                onClick={(e) => { e.stopPropagation(); idleSessions.forEach(onKillSession); }}

                onKeyDown={(e) => { if (e.key === "Enter") { e.stopPropagation(); idleSessions.forEach(onKillSession); } }}

                className="hover:opacity-100 opacity-60"

                style={{ color: "#ff6b6b", letterSpacing: "0.08em" }}

              >

                Kill all ▸

              </span>

            </button>

            {showIdle && (

              <div className="space-y-1.5 mt-1.5">

                {idleSessions.map((s) => (

                  <SessionRow key={s.session} s={s} live={false} onAttach={attach} onKill={onKillSession} />

                ))}

              </div>

            )}

          </div>

        )}

      </div>

      {}

      <div className="px-4 pt-4 pb-4 space-y-4">

        <p className="font-mono uppercase" style={{ fontSize: "0.55rem", letterSpacing: "0.16em", color: "#4a525e", marginBottom: 2 }}>

          ＋ New agent

        </p>

        <div>

          <FieldLabel>Source</FieldLabel>

          <select style={selectStyle} value={targetKey} onChange={(e) => setTargetKey(e.target.value)}>

            {targets?.targets.map((t) => (

              <option key={t.key} value={t.key} style={{ background: "#0a0c0e" }}>

                {t.label}

              </option>

            ))}

          </select>

        </div>

        <div>

          <FieldLabel>Agent</FieldLabel>

          <select style={selectStyle} value={agent} onChange={(e) => setAgent(e.target.value as AgentKind)}>

            {target?.agents.map((a) => (

              <option key={a} value={a} style={{ background: "#0a0c0e" }}>

                {AGENT_LABEL[a]} - {a}

              </option>

            ))}

          </select>

        </div>

        <div>

          <FieldLabel>Mode</FieldLabel>

          <div className="grid grid-cols-2 gap-2">

            {(["persistent", "ephemeral"] as TermMode[]).map((m) => {

              const on = mode === m;

              return (

                <button

                  key={m}

                  onClick={() => setMode(m)}

                  className="font-mono uppercase"

                  style={{

                    height: 40,

                    fontSize: "0.62rem",

                    letterSpacing: "0.08em",

                    color: on ? "#050607" : "#8b929e",

                    background: on ? "#16e0c8" : "#0a0c0e",

                    border: on ? "1px solid #16e0c8" : "1px solid rgba(22,224,200,0.14)",

                    transition: "all 0.25s cubic-bezier(0.16,1,0.3,1)",

                  }}

                >

                  {m}

                </button>

              );

            })}

          </div>

          <p className="font-mono" style={{ fontSize: "0.55rem", color: "#4a525e", marginTop: 6, letterSpacing: "0.02em" }}>

            {mode === "persistent" ? "tmux - survives reload, reattachable" : "ephemeral - dies with the socket"}

          </p>

        </div>

        <div>

          <FieldLabel>Working dir</FieldLabel>

          <select style={selectStyle} value={cwd} onChange={(e) => setCwd(e.target.value)}>

            {(target?.dirs ?? targets?.common_dirs ?? []).map((d) => (

              <option key={d.path || "home"} value={d.path} style={{ background: "#0a0c0e" }}>

                {d.label}

              </option>

            ))}

          </select>

        </div>

        <button

          onClick={launch}

          disabled={!targetKey}

          className="font-display font-bold uppercase w-full group"

          style={{

            height: 48,

            fontSize: "0.84rem",

            letterSpacing: "0.08em",

            color: "#050607",

            background: "#16e0c8",

            border: "none",

            cursor: targetKey ? "pointer" : "not-allowed",

            opacity: targetKey ? 1 : 0.4,

            transition: "filter 0.2s",

          }}

          onMouseEnter={(e) => (e.currentTarget.style.filter = "brightness(1.12)")}

          onMouseLeave={(e) => (e.currentTarget.style.filter = "brightness(1)")}

        >

          Launch ▸

        </button>

      </div>

      {}

      <div className="mt-auto px-4 py-3" style={{ borderTop: "1px solid rgba(22,224,200,0.08)" }}>

        <FieldLabel>Cross-device · RTX 3060</FieldLabel>

        <p className="font-mono" style={{ fontSize: "0.58rem", color: "#8b929e", lineHeight: 1.55, letterSpacing: "0.01em" }}>

          Persistent (default) = tmux on the host. Attach the SAME session from your phone that is

          open on your PC. GLM (OpenCode / CT247) runs on the 3060 when the GPU is awake; Codex

          (CT241) and Claude (CT215) call out.

        </p>

      </div>

    </div>

  );

}