"use client";

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

import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";

import Launcher from "./Launcher";

import TermPane, { type PaneState } from "./TermPane";

import SessionPicker from "./SessionPicker";

import type {

  TargetsResponse,

  TermCreds,

  LaunchSpec,

  LiveSession,

  AgentKind,

} from "@/lib/term";

import { fetchTermCreds, fetchTargets, killSession } from "@/lib/term";

let PANE_SEQ = 0;

const nextId = () => `pane-${++PANE_SEQ}-${Date.now().toString(36)}`;

function Gutter({ dir }: { dir: "v" | "h" }) {

  return (

    <PanelResizeHandle

      className={dir === "v" ? "w-px group relative" : "h-px group relative"}

      style={{ background: "rgba(22,224,200,0.10)" }}

    >

      <div

        className="absolute inset-0 transition-colors duration-200 group-hover:bg-teal-bio group-data-[resize-handle-state=drag]:bg-teal-bio"

        style={

          dir === "v"

            ? { left: -3, right: -3, cursor: "col-resize" }

            : { top: -3, bottom: -3, cursor: "row-resize" }

        }

      />

      <div

        className="absolute opacity-0 group-hover:opacity-100 group-data-[resize-handle-state=drag]:opacity-100 transition-opacity"

        style={

          dir === "v"

            ? { top: "50%", left: -1.5, width: 4, height: 28, transform: "translateY(-50%)", background: "#16e0c8", boxShadow: "0 0 10px #16e0c8" }

            : { left: "50%", top: -1.5, height: 4, width: 28, transform: "translateX(-50%)", background: "#16e0c8", boxShadow: "0 0 10px #16e0c8" }

        }

      />

    </PanelResizeHandle>

  );

}

interface DesktopSplitProps {

  panes: PaneState[];

  creds: TermCreds | null;

  focusedId: string | null;

  setFocusedId: (id: string) => void;

  closePane: (id: string) => void;

  onAssign: (paneId: string) => void;

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

  onLayout: () => void;

}

function DesktopSplit({

  panes,

  creds,

  focusedId,

  setFocusedId,

  closePane,

  onAssign,

  registerFit,

  onLayout,

}: DesktopSplitProps) {

  const n = panes.length;

  const renderPane = (p: PaneState, idx: number) => (

    <TermPane

      key={p.id}

      pane={p}

      index={idx}

      creds={creds}

      visible

      focused={focusedId === p.id}

      onFocus={() => setFocusedId(p.id)}

      onClose={() => closePane(p.id)}

      onAssign={onAssign}

      registerFit={registerFit}

    />

  );

  if (n === 0) return <EmptyState />;

  if (n === 1) return <div className="h-full w-full p-1">{renderPane(panes[0], 0)}</div>;

  if (n === 2) {

    return (

      <PanelGroup direction="horizontal" className="p-1" autoSaveId="dw-split-2" onLayout={onLayout}>

        <Panel defaultSize={50} minSize={18} className="p-px">{renderPane(panes[0], 0)}</Panel>

        <Gutter dir="v" />

        <Panel defaultSize={50} minSize={18} className="p-px">{renderPane(panes[1], 1)}</Panel>

      </PanelGroup>

    );

  }

  if (n === 3) {

    return (

      <PanelGroup direction="horizontal" className="p-1" autoSaveId="dw-split-3" onLayout={onLayout}>

        <Panel defaultSize={50} minSize={18} className="p-px">{renderPane(panes[0], 0)}</Panel>

        <Gutter dir="v" />

        <Panel defaultSize={50} minSize={18} className="p-px">

          <PanelGroup direction="vertical" autoSaveId="dw-split-3r" onLayout={onLayout}>

            <Panel defaultSize={50} minSize={14} className="p-px pt-0 pb-px">{renderPane(panes[1], 1)}</Panel>

            <Gutter dir="h" />

            <Panel defaultSize={50} minSize={14} className="p-px pb-0 pt-px">{renderPane(panes[2], 2)}</Panel>

          </PanelGroup>

        </Panel>

      </PanelGroup>

    );

  }

  return (

    <PanelGroup direction="horizontal" className="p-1" autoSaveId="dw-split-4" onLayout={onLayout}>

      <Panel defaultSize={50} minSize={18} className="p-px">

        <PanelGroup direction="vertical" autoSaveId="dw-split-4l" onLayout={onLayout}>

          <Panel defaultSize={50} minSize={14} className="p-px pt-0 pb-px">{renderPane(panes[0], 0)}</Panel>

          <Gutter dir="h" />

          <Panel defaultSize={50} minSize={14} className="p-px pb-0 pt-px">{renderPane(panes[2], 2)}</Panel>

        </PanelGroup>

      </Panel>

      <Gutter dir="v" />

      <Panel defaultSize={50} minSize={18} className="p-px">

        <PanelGroup direction="vertical" autoSaveId="dw-split-4r" onLayout={onLayout}>

          <Panel defaultSize={50} minSize={14} className="p-px pt-0 pb-px">{renderPane(panes[1], 1)}</Panel>

          <Gutter dir="h" />

          <Panel defaultSize={50} minSize={14} className="p-px pb-0 pt-px">{renderPane(panes[3], 3)}</Panel>

        </PanelGroup>

      </Panel>

    </PanelGroup>

  );

}

function EmptyState() {

  return (

    <div className="flex h-full w-full items-center justify-center p-8">

      <div className="text-center max-w-sm">

        <div

          className="mx-auto mb-6"

          style={{ width: 46, height: 46, border: "1px solid rgba(22,224,200,0.3)", display: "grid", placeItems: "center" }}

        >

          <span style={{ color: "#16e0c8", fontSize: "1.4rem" }}>▸</span>

        </div>

        <h3 className="font-display font-bold uppercase" style={{ fontSize: "1.1rem", color: "#e8eaed", letterSpacing: "0.02em" }}>

          No agents running

        </h3>

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

          Pick a source + agent in the launcher and hit Launch. Add up to four panes and drag the

          gutters to resize.

        </p>

      </div>

    </div>

  );

}

interface MobileTabsProps {

  panes: PaneState[];

  creds: TermCreds | null;

  active: number;

  setActive: (i: number) => void;

  closePane: (id: string) => void;

  onAssign: (paneId: string) => void;

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

}

function MobileTabs({

  panes,

  creds,

  active,

  setActive,

  closePane,

  onAssign,

  registerFit,

}: MobileTabsProps) {

  const touchStart = useRef<number | null>(null);

  const onTouchStart = (e: React.TouchEvent) => {

    touchStart.current = e.touches[0].clientX;

  };

  const onTouchEnd = (e: React.TouchEvent) => {

    if (touchStart.current === null) return;

    const dx = e.changedTouches[0].clientX - touchStart.current;

    if (Math.abs(dx) > 60) {

      if (dx < 0 && active < panes.length - 1) setActive(active + 1);

      if (dx > 0 && active > 0) setActive(active - 1);

    }

    touchStart.current = null;

  };

  if (panes.length === 0)

    return (

      <div className="h-full">

        <EmptyState />

      </div>

    );

  const clamped = Math.min(active, panes.length - 1);

  return (

    <div className="flex h-full flex-col">

      {}

      <div

        className="flex shrink-0 overflow-x-auto"

        style={{ background: "#0a0c0e", borderBottom: "1px solid rgba(22,224,200,0.10)" }}

      >

        {panes.map((p, i) => {

          const on = i === clamped;

          return (

            <button

              key={p.id}

              onClick={() => setActive(i)}

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

              style={{

                padding: "11px 16px",

                fontSize: "0.68rem",

                letterSpacing: "0.05em",

                color: on ? "#16e0c8" : "#4a525e",

                borderBottom: on ? "2px solid #16e0c8" : "2px solid transparent",

                minHeight: 44,

              }}

            >

              {String(i + 1).padStart(2, "0")} · {p.spec.agent.toUpperCase()}

            </button>

          );

        })}

      </div>

      {}

      <div className="relative min-h-0 flex-1" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>

        {panes.map((p, i) => (

          <div

            key={p.id}

            className="absolute inset-0"

            style={{ visibility: i === clamped ? "visible" : "hidden", padding: 6 }}

          >

            <TermPane

              pane={p}

              index={i}

              creds={creds}

              visible={i === clamped}

              focused={i === clamped}

              onFocus={() => setActive(i)}

              onClose={() => closePane(p.id)}

              onAssign={onAssign}

              registerFit={registerFit}

            />

          </div>

        ))}

      </div>

    </div>

  );

}

export default function WorkspaceClient() {

  const [creds, setCreds] = useState<TermCreds | null>(null);

  const [targets, setTargets] = useState<TargetsResponse | null>(null);

  const [credErr, setCredErr] = useState<string | null>(null);

  const [panes, setPanes] = useState<PaneState[]>([]);

  const [focusedId, setFocusedId] = useState<string | null>(null);

  const [collapsed, setCollapsed] = useState(false);

  const [isMobile, setIsMobile] = useState(false);

  const [drawerOpen, setDrawerOpen] = useState(false);

  const [mobileActive, setMobileActive] = useState(0);

  const [pickerForPane, setPickerForPane] = useState<string | null>(null);

  const [viewportH, setViewportH] = useState<number | null>(null);

  const fitFnsRef = useRef<Map<string, () => void>>(new Map());

  const refitScheduledRef = useRef(false);

  const registerFit = useCallback((paneId: string, fitFn: (() => void) | null) => {

    if (fitFn) fitFnsRef.current.set(paneId, fitFn);

    else fitFnsRef.current.delete(paneId);

  }, []);

  const refitAll = useCallback(() => {

    if (refitScheduledRef.current) return;

    refitScheduledRef.current = true;

    requestAnimationFrame(() => {

      refitScheduledRef.current = false;

      fitFnsRef.current.forEach((fn) => {

        try {

          fn();

        } catch {

        }

      });

    });

  }, []);

  useEffect(() => {

    (async () => {

      const c = await fetchTermCreds();

      if (!c.ok) {

        setCredErr(c.error || "term backend unavailable");

        return;

      }

      setCreds(c);

      try {

        const t = await fetchTargets(c);

        setTargets(t);

      } catch {

        setCredErr("could not reach darwin-term /targets");

      }

      if (typeof window !== "undefined") {

        const p = new URLSearchParams(window.location.search);

        const session = p.get("session");

        if (session) {

          const agentParam = (p.get("agent") as LaunchSpec["agent"]) || "claude";

          launchRef.current?.({

            target: p.get("target") || "ct215",

            agent: agentParam,

            mode: "persistent",

            cwd: "",

            session,

          });

          window.history.replaceState({}, "", "/workspace");

        }

      }

    })();

  }, []);

  useEffect(() => {

    const mq = window.matchMedia("(max-width: 820px)");

    const apply = () => setIsMobile(mq.matches);

    apply();

    mq.addEventListener("change", apply);

    return () => mq.removeEventListener("change", apply);

  }, []);

  useEffect(() => {

    if (!isMobile) {

      setViewportH(null);

      return;

    }

    const vv = typeof window !== "undefined" ? window.visualViewport : null;

    if (!vv) return;

    const handler = () => {

      setViewportH(vv.height);

      refitAll();

    };

    handler();

    vv.addEventListener("resize", handler);

    vv.addEventListener("scroll", handler);

    return () => {

      vv.removeEventListener("resize", handler);

      vv.removeEventListener("scroll", handler);

    };

  }, [isMobile, refitAll]);

  useEffect(() => {

    const onResize = () => refitAll();

    window.addEventListener("resize", onResize);

    return () => window.removeEventListener("resize", onResize);

  }, [refitAll]);

  useEffect(() => {

    refitAll();

  }, [panes.length, collapsed, refitAll]);

  const launch = useCallback((spec: LaunchSpec) => {

    setPanes((prev) => {

      if (prev.length >= 4) return prev;

      const pane: PaneState = { id: nextId(), spec };

      setFocusedId(pane.id);

      setMobileActive(prev.length);

      return [...prev, pane];

    });

    setDrawerOpen(false);

  }, []);

  const launchRef = useRef(launch);

  useEffect(() => { launchRef.current = launch; }, [launch]);

  const closePane = useCallback((id: string) => {

    setPanes((prev) => prev.filter((p) => p.id !== id));

  }, []);

  const assignPane = useCallback((paneId: string) => {

    setPickerForPane(paneId);

  }, []);

  const setPaneSpec = useCallback((paneId: string, spec: LaunchSpec) => {

    setPanes((prev) => prev.map((p) => (p.id === paneId ? { ...p, spec } : p)));

    setPickerForPane(null);

  }, []);

  const openSessionIds = useMemo(

    () =>

      new Set(

        panes.map((p) => p.spec.session).filter((x): x is string => Boolean(x))

      ),

    [panes]

  );

  const onPickerPick = useCallback(

    (s: LiveSession) => {

      if (!pickerForPane) return;

      setPaneSpec(pickerForPane, {

        target: s.target,

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

        mode: "persistent",

        cwd: "",

        session: s.session,

      });

    },

    [pickerForPane, setPaneSpec]

  );

  const onPickerClose = useCallback(() => setPickerForPane(null), []);

  const onPickerLaunchNew = useCallback(() => setPickerForPane(null), []);

  const onKillSession = useCallback(

    async (s: LiveSession) => {

      if (creds) await killSession(creds, s.target, s.session);

    },

    [creds]

  );

  const setSplit = (target: number) => {

    let firstNewId: string | null = null;

    setPanes((prev) => {

      if (target === prev.length) return prev;

      if (target < prev.length) return prev.slice(0, target);

      const base = prev[prev.length - 1]?.spec ??

        ({ target: targets?.targets[0]?.key ?? "ct215", agent: "shell", mode: "persistent", cwd: "" } as LaunchSpec);

      const additions: PaneState[] = [];

      for (let i = prev.length; i < target; i++) {

        additions.push({

          id: nextId(),

          spec: { target: base.target, agent: base.agent, mode: base.mode, cwd: base.cwd },

        });

      }

      if (additions[0]) firstNewId = additions[0].id;

      return [...prev, ...additions];

    });

    if (firstNewId) setPickerForPane(firstNewId);

  };

  const sidebar = (

    <Launcher

      creds={creds}

      targets={targets}

      onLaunch={launch}

      onKillSession={onKillSession}

      collapsed={false}

    />

  );

  return (

    <div

      data-darwin-workspace

      className={viewportH != null ? "fixed left-0 top-0 right-0 flex flex-col" : "fixed inset-0 flex flex-col"}

      style={viewportH != null ? { background: "#050607", height: viewportH } : { background: "#050607" }}

    >

      {}

      <header

        className="flex shrink-0 items-center justify-between px-3 sm:px-5"

        style={{ height: 52, background: "rgba(8,10,12,0.96)", borderBottom: "1px solid rgba(22,224,200,0.12)" }}

      >

        <div className="flex items-center gap-3 sm:gap-5 min-w-0">

          <a href="/" className="font-mono uppercase shrink-0" style={{ fontSize: "0.62rem", letterSpacing: "0.2em", color: "#0d9e8e" }}>

            ← DRW

          </a>

          <span className="hidden sm:block" style={{ width: 1, height: 18, background: "rgba(22,224,200,0.18)" }} />

          <h1 className="font-display font-bold uppercase truncate" style={{ fontSize: "0.92rem", letterSpacing: "0.04em", color: "#e8eaed" }}>

            Workspace

          </h1>

          <span className="hidden md:inline font-mono" style={{ fontSize: "0.56rem", letterSpacing: "0.1em", color: "#4a525e" }}>

            TEAM-UP TERMINAL

          </span>

        </div>

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

          {}

          <div className="hidden md:flex items-center gap-1" style={{ border: "1px solid rgba(22,224,200,0.14)", padding: 2 }}>

            {[1, 2, 3, 4].map((k) => {

              const on = panes.length === k;

              return (

                <button

                  key={k}

                  onClick={() => setSplit(k)}

                  title={`${k}-up split`}

                  className="font-mono"

                  style={{

                    width: 30, height: 26, fontSize: "0.66rem",

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

                    background: on ? "#16e0c8" : "transparent",

                    transition: "all 0.2s",

                  }}

                >

                  {k}

                </button>

              );

            })}

          </div>

          {}

          {!isMobile && (

            <button

              onClick={() => setCollapsed((c) => !c)}

              className="font-mono uppercase flex items-center gap-1.5"

              style={{ fontSize: "0.58rem", letterSpacing: "0.08em", color: "#8b929e", padding: "7px 11px", border: "1px solid rgba(22,224,200,0.14)" }}

              title={collapsed ? "Show launcher" : "Hide launcher (full-bleed pane)"}

            >

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

                <rect x="0.5" y="0.5" width="11" height="11" stroke="currentColor" />

                <line x1={collapsed ? "4" : "4"} y1="0.5" x2="4" y2="11.5" stroke="currentColor" />

              </svg>

              {collapsed ? "PANEL" : "FULL"}

            </button>

          )}

          {}

          {isMobile && (

            <button

              onClick={() => setDrawerOpen(true)}

              className="font-display font-bold uppercase"

              style={{ fontSize: "0.66rem", letterSpacing: "0.06em", color: "#050607", background: "#16e0c8", padding: "8px 14px", minHeight: 40 }}

            >

              + Launch

            </button>

          )}

        </div>

      </header>

      {}

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

        {}

        {!isMobile && !collapsed && (

          <div className="shrink-0" style={{ width: 248 }}>

            {sidebar}

          </div>

        )}

        {}

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

          {isMobile ? (

            <MobileTabs

              panes={panes}

              creds={creds}

              active={mobileActive}

              setActive={setMobileActive}

              closePane={closePane}

              onAssign={assignPane}

              registerFit={registerFit}

            />

          ) : (

            <DesktopSplit

              panes={panes}

              creds={creds}

              focusedId={focusedId}

              setFocusedId={setFocusedId}

              closePane={closePane}

              onAssign={assignPane}

              registerFit={registerFit}

              onLayout={refitAll}

            />

          )}

        </div>

        {credErr && (

          <div className="absolute left-1/2 top-4 -translate-x-1/2 px-4 py-2 font-mono" style={{ fontSize: "0.62rem", color: "#ff6b6b", background: "rgba(10,12,14,0.95)", border: "1px solid rgba(255,107,107,0.3)", letterSpacing: "0.04em" }}>

            ⚠ {credErr}

          </div>

        )}

      </div>

      {}

      {isMobile && drawerOpen && (

        <div className="fixed inset-0 z-50" onClick={() => setDrawerOpen(false)}>

          <div className="absolute inset-0" style={{ background: "rgba(5,6,7,0.6)", backdropFilter: "blur(2px)" }} />

          <div

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

            className="absolute bottom-0 left-0 right-0"

            style={{

              maxHeight: "88dvh",

              overflowY: "auto",

              background: "#080a0c",

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

              boxShadow: "0 -20px 60px rgba(0,0,0,0.6)",

              animation: "sheet-up 0.4s cubic-bezier(0.16,1,0.3,1)",

              paddingBottom: "env(safe-area-inset-bottom, 0px)",

            }}

          >

            <div className="flex justify-center pt-3 pb-1">

              <span style={{ width: 36, height: 4, borderRadius: 2, background: "rgba(22,224,200,0.3)" }} />

            </div>

            {sidebar}

          </div>

        </div>

      )}

      {}

      {pickerForPane && (

        <SessionPicker

          openSessionIds={openSessionIds}

          onPick={onPickerPick}

          onClose={onPickerClose}

          onLaunchNew={onPickerLaunchNew}

        />

      )}

    </div>

  );

}