"use client";

import { useEffect, useState } from "react";

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

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

interface SessionPickerProps {

  openSessionIds: Set<string>;

  onPick: (s: LiveSession) => void;

  onClose: () => void;

  onLaunchNew: () => void;

}

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`;

}

function truncate(s: string, n: number): string {

  return s.length > n ? `${s.slice(0, n)}…` : s;

}

export default function SessionPicker({

  openSessionIds,

  onPick,

  onClose,

  onLaunchNew,

}: SessionPickerProps) {

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

  useEffect(() => {

    let alive = true;

    const tick = async () => {

      try {

        const res = await fetch("/api/term/sessions", { cache: "no-store" });

        const data = await res.json();

        if (alive) setSessions((data.sessions ?? []) as LiveSession[]);

      } catch {

      }

    };

    tick();

    const id = setInterval(tick, 5000);

    return () => {

      alive = false;

      clearInterval(id);

    };

  }, []);

  useEffect(() => {

    const onKey = (e: KeyboardEvent) => {

      if (e.key === "Escape") onClose();

    };

    window.addEventListener("keydown", onKey);

    return () => window.removeEventListener("keydown", onKey);

  }, [onClose]);

  const sorted = [...sessions].sort(

    (a, b) => parseInt(b.created, 10) - parseInt(a.created, 10)

  );

  return (

    <div

      className="fixed inset-0 z-[60] flex items-center justify-center"

      style={{ background: "rgba(5,6,7,0.6)", backdropFilter: "blur(2px)" }}

      onClick={onClose}

    >

      <div

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

        className="flex flex-col"

        style={{

          background: "#080a0c",

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

          maxWidth: 520,

          width: "calc(100% - 32px)",

          maxHeight: "70vh",

        }}

      >

        {}

        <div

          className="flex shrink-0 items-center justify-between"

          style={{ padding: "12px 14px", borderBottom: "1px solid rgba(22,224,200,0.12)" }}

        >

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

            <span

              className="font-mono uppercase shrink-0"

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

            >

              ⇄ Assign

            </span>

            <span

              className="font-display font-bold uppercase truncate"

              style={{ fontSize: "0.82rem", letterSpacing: "0.04em", color: "#e8eaed" }}

            >

              Live Sessions

            </span>

          </div>

          <button

            onClick={onClose}

            aria-label="Close"

            className="flex shrink-0 items-center justify-center"

            style={{ width: 24, height: 24, color: "#4a525e", transition: "color 0.2s" }}

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

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

          >

            <svg width="12" height="12" 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 className="min-h-0 flex-1 overflow-y-auto">

          {sorted.length === 0 && (

            <p

              className="font-mono"

              style={{

                fontSize: "0.62rem",

                color: "#4a525e",

                letterSpacing: "0.03em",

                padding: "24px 14px",

                lineHeight: 1.6,

              }}

            >

              No sessions running. Launch a new one below.

            </p>

          )}

          {sorted.map((s) => {

            const inPane = openSessionIds.has(s.session);

            const agent = (s.agent as AgentKind) || "shell";

            return (

              <button

                key={s.session}

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

                className="flex w-full items-center gap-2.5 text-left"

                style={{

                  padding: "10px 14px",

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

                  transition: "background 0.15s",

                }}

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

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

              >

                {}

                <span className="flex shrink-0 items-center justify-center" style={{ width: 6, height: 6 }}>

                  {inPane && (

                    <span

                      style={{

                        width: 6,

                        height: 6,

                        background: "#f5c518",

                        boxShadow: "0 0 6px #f5c518",

                        display: "block",

                      }}

                    />

                  )}

                </span>

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

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

                    <span

                      className="font-display font-bold uppercase"

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

                    >

                      {AGENT_LABEL[agent] ?? s.agent}

                    </span>

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

                      {s.target}

                    </span>

                    {inPane && (

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

                        IN PANE

                      </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>

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

                    <span

                      className="font-mono truncate"

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

                      title={s.session}

                    >

                      {truncate(s.session, 26)}

                    </span>

                    <span className="font-mono shrink-0" style={{ fontSize: "0.52rem", color: "#4a525e", letterSpacing: "0.04em" }}>

                      {ageOf(s.created)} ago

                    </span>

                  </div>

                </div>

                <span

                  className="font-display font-bold uppercase shrink-0"

                  style={{ fontSize: "0.6rem", color: "#16e0c8", letterSpacing: "0.06em" }}

                >

                  Load ▸

                </span>

              </button>

            );

          })}

        </div>

        {}

        <div className="shrink-0" style={{ padding: "10px 14px", borderTop: "1px solid rgba(22,224,200,0.12)" }}>

          <button

            onClick={onLaunchNew}

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

            style={{

              height: 40,

              fontSize: "0.72rem",

              letterSpacing: "0.08em",

              color: "#050607",

              background: "#16e0c8",

              border: "none",

              cursor: "pointer",

              transition: "filter 0.2s",

            }}

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

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

          >

            ＋ Launch New

          </button>

        </div>

      </div>

    </div>

  );

}