"use client";

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

import dynamic from "next/dynamic";

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

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

import AgentTree from "@/components/surface/AgentTree";

import HitsInbox from "@/components/surface/HitsInbox";

import HealthPanel from "@/components/health/HealthPanel";

import AskBox from "@/components/surface/AskBox";

import OrganismBoundary from "@/components/organism/OrganismBoundary";

import type { AskResponse } from "@/lib/types";

const DarwinOrganism = dynamic(

  () => import("@/components/organism/DarwinOrganism"),

  { ssr: false, loading: () => null }

);

function Wordmark() {

  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {

    const el = ref.current;

    if (!el) return;

    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    if (prefersReduced) {

      el.style.opacity = "1";

      return;

    }

    el.style.opacity = "0";

    el.style.transform = "translateY(28px)";

    requestAnimationFrame(() => {

      requestAnimationFrame(() => {

        el.style.transition = "opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1)";

        el.style.opacity = "1";

        el.style.transform = "translateY(0)";

      });

    });

  }, []);

  return (

    <div ref={ref} className="text-center pointer-events-none select-none" style={{ opacity: 0 }}>

      <h1 className="font-display font-bold text-display-xl text-text-primary uppercase tracking-tight">

        Darwin

      </h1>

      <div className="flex items-center justify-center gap-3 mt-3">

        <div className="h-px w-16 bg-teal-bio opacity-40" aria-hidden="true" />

        <span className="font-mono text-label-md text-teal-bio uppercase tracking-widest">

          Second Brain

        </span>

        <div className="h-px w-16 bg-teal-bio opacity-40" aria-hidden="true" />

      </div>

      <p className="font-mono text-label-sm text-text-muted mt-3 tracking-widest uppercase opacity-60">

        Knowledge under natural selection

      </p>

    </div>

  );

}

interface NavProps {

  liveOk: boolean | null;

}

function Nav({ liveOk }: NavProps) {

  const indicatorClass =

    liveOk === null

      ? "bg-text-muted animate-pulse-slow"

      : liveOk

      ? "bg-teal-bio animate-pulse-slow"

      : "bg-red-500";

  const liveLabel = liveOk === null ? "CONNECTING" : liveOk ? "LIVE" : "DEGRADED";

  return (

    <nav

      className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 sm:px-6 py-4"

      role="navigation"

      aria-label="Main navigation"

    >

      <span className="font-mono text-label-md text-teal-bio uppercase tracking-widest" aria-label="Darwin">

        DRW

      </span>

      <div className="flex items-center gap-4 sm:gap-6">

        <a href="/workspace" className="font-mono text-label-md text-teal-bio hover:text-text-primary transition-colors duration-200 uppercase tracking-widest border border-teal-bio/30 px-2.5 py-1" data-cursor-expand>Workspace</a>

        <a

          href="#surface"

          className="font-mono text-label-md text-text-muted hover:text-teal-bio transition-colors duration-200 uppercase tracking-widest hidden sm:inline"

          data-cursor-expand

        >

          Query

        </a>

        <a

          href="#health"

          className="font-mono text-label-md text-text-muted hover:text-teal-bio transition-colors duration-200 uppercase tracking-widest hidden sm:inline"

          data-cursor-expand

        >

          Health

        </a>

        <div className="flex items-center gap-1.5" aria-label={`Status: ${liveLabel}`}>

          <div className={`w-1.5 h-1.5 rounded-full ${indicatorClass}`} aria-hidden="true" />

          <span className={`font-mono text-label-sm ${liveOk === false ? "text-red-400" : "text-teal-bio"}`}>

            {liveLabel}

          </span>

        </div>

      </div>

    </nav>

  );

}

function ScrollHint() {

  const [visible, setVisible] = useState(true);

  useEffect(() => {

    function onScroll() {

      if (window.scrollY > 80) setVisible(false);

    }

    window.addEventListener("scroll", onScroll, { passive: true });

    return () => window.removeEventListener("scroll", onScroll);

  }, []);

  return (

    <div

      className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 transition-opacity duration-500 pointer-events-none"

      style={{ opacity: visible ? 1 : 0 }}

      aria-hidden="true"

    >

      <span className="font-mono text-label-sm text-text-muted uppercase tracking-widest">

        Scroll to query

      </span>

      <div className="w-px h-8 bg-teal-bio opacity-30 animate-bounce" />

    </div>

  );

}

type MobileTab = "ask" | "hits" | "agents" | "health";

const MOBILE_TABS: { id: MobileTab; label: string; short: string }[] = [

  { id: "ask", label: "Ask", short: "ASK" },

  { id: "hits", label: "Hits", short: "HITS" },

  { id: "agents", label: "Agents", short: "AGENTS" },

  { id: "health", label: "Health", short: "HEALTH" },

];

interface MobileTabBarProps {

  active: MobileTab;

  onChange: (tab: MobileTab) => void;

  hitCount: number;

  healthOk: boolean | null;

}

function MobileTabBar({ active, onChange, hitCount, healthOk }: MobileTabBarProps) {

  return (

    <div

      className="fixed bottom-0 left-0 right-0 z-50 lg:hidden"

      style={{

        background: "rgba(5,6,7,0.97)",

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

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

      }}

      role="tablist"

      aria-label="Surface navigation"

    >

      <div className="grid grid-cols-5">

        {MOBILE_TABS.map((tab) => {

          const isActive = active === tab.id;

          return (

            <button

              key={tab.id}

              role="tab"

              aria-selected={isActive}

              aria-label={tab.label}

              onClick={() => onChange(tab.id)}

              className={[

                "flex flex-col items-center justify-center gap-1 py-3 px-1 min-h-[56px]",

                "font-mono text-label-sm uppercase tracking-widest transition-colors duration-200",

                isActive ? "text-teal-bio" : "text-text-muted",

              ].join(" ")}

              style={{ touchAction: "manipulation" }}

            >

              {}

              <TabIcon id={tab.id} active={isActive} />

              <span style={{ fontSize: "0.55rem" }}>{tab.short}</span>

              {}

              {isActive && (

                <span

                  className="absolute top-0 left-1/2 -translate-x-1/2 h-px w-8 bg-teal-bio"

                  aria-hidden="true"

                />

              )}

            </button>

          );

        })}

        <a

          href="/workspace"

          aria-label="Workspace"

          className={[

            "flex flex-col items-center justify-center gap-1 py-3 px-1 min-h-[56px]",

            "font-mono text-label-sm uppercase tracking-widest transition-colors duration-200 text-teal-bio",

          ].join(" ")}

          style={{ touchAction: "manipulation" }}

        >

          <svg width={18} height={18} viewBox="0 0 18 18" fill="none" aria-hidden="true">

            <rect x="2.5" y="3.5" width="13" height="11" stroke="#16e0c8" strokeWidth="1.2" />

            <rect x="2.5" y="3.5" width="13" height="3" fill="#16e0c8" opacity="0.5" />

          </svg>

          <span style={{ fontSize: "0.55rem" }}>WORK</span>

        </a>

      </div>

    </div>

  );

}

function TabIcon({ id, active }: { id: MobileTab; active: boolean }) {

  const color = active ? "#16e0c8" : "#4a525e";

  const w = 18;

  const h = 18;

  if (id === "ask") {

    return (

      <svg width={w} height={h} viewBox="0 0 18 18" fill="none" aria-hidden="true">

        <circle cx="9" cy="9" r="6.5" stroke={color} strokeWidth="1.2" />

        <circle cx="9" cy="9" r="2.5" fill={color} opacity={active ? 0.8 : 0.4} />

      </svg>

    );

  }

  if (id === "hits") {

    return (

      <svg width={w} height={h} viewBox="0 0 18 18" fill="none" aria-hidden="true">

        <rect x="3" y="5" width="12" height="1.5" fill={color} />

        <rect x="3" y="8.5" width="9" height="1.5" fill={color} opacity="0.7" />

        <rect x="3" y="12" width="6" height="1.5" fill={color} opacity="0.4" />

      </svg>

    );

  }

  if (id === "agents") {

    return (

      <svg width={w} height={h} viewBox="0 0 18 18" fill="none" aria-hidden="true">

        <circle cx="9" cy="4" r="2" stroke={color} strokeWidth="1.2" />

        <circle cx="4" cy="13" r="2" stroke={color} strokeWidth="1.2" />

        <circle cx="14" cy="13" r="2" stroke={color} strokeWidth="1.2" />

        <line x1="9" y1="6" x2="4" y2="11" stroke={color} strokeWidth="1" opacity="0.5" />

        <line x1="9" y1="6" x2="14" y2="11" stroke={color} strokeWidth="1" opacity="0.5" />

      </svg>

    );

  }

  return (

    <svg width={w} height={h} viewBox="0 0 18 18" fill="none" aria-hidden="true">

      <rect x="2" y="2" width="6" height="6" stroke={color} strokeWidth="1.2" />

      <rect x="10" y="2" width="6" height="6" stroke={color} strokeWidth="1.2" />

      <rect x="2" y="10" width="6" height="6" stroke={color} strokeWidth="1.2" />

      <rect x="10" y="10" width="6" height="6" stroke={color} strokeWidth="1.2" opacity="0.4" />

    </svg>

  );

}

interface SurfaceProps {

  askData: AskResponse | null;

  loading: boolean;

  error: string | null;

  submit: (q: string) => Promise<void>;

  onFocusChange: (focused: boolean) => void;

  healthData: ReturnType<typeof useHealth>["data"];

  healthLoading: boolean;

}

function DesktopSurface({ askData, loading, error, submit, onFocusChange }: SurfaceProps) {

  const ref = useRef<HTMLDivElement>(null);

  const revealed = useRef(false);

  useEffect(() => {

    const el = ref.current;

    if (!el) return;

    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    if (prefersReduced) return;

    const panes = el.querySelectorAll<HTMLElement>(".surface-pane");

    panes.forEach((pane) => {

      pane.style.opacity = "0";

      pane.style.transform = "translateY(24px)";

    });

    const observer = new IntersectionObserver(

      (entries) => {

        if (entries[0].isIntersecting && !revealed.current) {

          revealed.current = true;

          panes.forEach((pane, i) => {

            setTimeout(() => {

              requestAnimationFrame(() => {

                requestAnimationFrame(() => {

                  pane.style.transition = "opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1)";

                  pane.style.opacity = "1";

                  pane.style.transform = "translateY(0)";

                });

              });

            }, i * 100);

          });

        }

      },

      { threshold: 0.08 }

    );

    observer.observe(el);

    return () => observer.disconnect();

  }, []);

  const hits = askData?.hits ?? [];

  return (

    <section

      id="surface"

      ref={ref}

      aria-label="Darwin query surface"

      className="hidden lg:block min-h-screen py-20 px-8 relative z-10"

    >

      <div className="w-full">

        <div className="mb-12">

          <p className="font-mono text-label-sm text-text-muted uppercase tracking-widest mb-3">

            Surface

          </p>

          <h2 className="font-display text-display-lg font-bold text-text-primary">

            Neural interface

          </h2>

        </div>

        <div className="grid grid-cols-1 lg:grid-cols-[280px_minmax(0,1fr)_280px] gap-5 min-h-[700px]">

          <div className="surface-pane">

            <AgentTree />

          </div>

          <div className="surface-pane">

            <AskBox

              data={askData}

              loading={loading}

              error={error}

              onSubmit={submit}

              onFocusChange={onFocusChange}

            />

          </div>

          <div className="surface-pane">

            <HitsInbox hits={hits} />

          </div>

        </div>

      </div>

    </section>

  );

}

interface MobileSurfaceProps {

  askData: AskResponse | null;

  loading: boolean;

  error: string | null;

  submit: (q: string) => Promise<void>;

  onFocusChange: (focused: boolean) => void;

  healthData: ReturnType<typeof useHealth>["data"];

  healthLoading: boolean;

  activeTab: MobileTab;

}

function MobileSurface({

  askData,

  loading,

  error,

  submit,

  onFocusChange,

  healthData,

  healthLoading,

  activeTab,

}: MobileSurfaceProps) {

  const hits = askData?.hits ?? [];

  return (

    <section

      id="surface"

      aria-label="Darwin query surface"

      className="lg:hidden relative z-10"

      style={{ paddingBottom: "calc(64px + env(safe-area-inset-bottom, 0px))" }}

    >

      {}

      <div className="px-5 pt-10 pb-6 border-b border-surface-2">

        <p className="font-mono text-label-sm text-text-muted uppercase tracking-widest mb-2">

          Surface

        </p>

        <h2 className="font-display text-display-lg font-bold text-text-primary leading-none">

          Neural<br />interface

        </h2>

      </div>

      {}

      <div role="tabpanel" id={`panel-${activeTab}`} aria-labelledby={`tab-${activeTab}`}>

        {activeTab === "ask" && (

          <div className="mobile-surface-pane">

            <AskBox

              data={askData}

              loading={loading}

              error={error}

              onSubmit={submit}

              onFocusChange={onFocusChange}

            />

          </div>

        )}

        {activeTab === "hits" && (

          <div className="mobile-surface-pane">

            <HitsInbox hits={hits} />

          </div>

        )}

        {activeTab === "agents" && (

          <div className="mobile-surface-pane">

            <AgentTree />

          </div>

        )}

        {activeTab === "health" && (

          <div className="mobile-surface-pane">

            {healthLoading && !healthData && (

              <div className="flex items-center gap-3 py-8">

                <div className="w-2 h-2 rounded-full bg-teal-bio animate-pulse-slow" />

                <span className="font-mono text-label-sm text-text-muted uppercase tracking-widest">

                  Loading health data...

                </span>

              </div>

            )}

            {healthData && (

              <>

                <div className="mb-6">

                  <p className="font-mono text-label-sm text-text-muted uppercase tracking-widest mb-2">

                    Anatomy

                  </p>

                  <h3 className="font-display text-display-md font-bold text-text-primary">

                    Organism health

                  </h3>

                  <p className="font-ui text-sm text-text-secondary mt-2">

                    Each data source is a living organ.

                  </p>

                </div>

                <HealthPanel engines={healthData.engines} ok={healthData.ok} />

              </>

            )}

            {!healthLoading && !healthData && (

              <div className="py-8">

                <p className="font-mono text-label-sm text-red-400 uppercase tracking-widest">

                  Health check failed

                </p>

              </div>

            )}

          </div>

        )}

      </div>

    </section>

  );

}

function DesktopHealthSection({ healthData }: { healthData: ReturnType<typeof useHealth>["data"] }) {

  if (!healthData) return null;

  return (

    <section

      id="health"

      aria-label="Darwin organism health"

      className="hidden lg:block py-16 px-6 relative z-10"

    >

      <div className="max-w-7xl mx-auto">

        <div className="mb-8">

          <p className="font-mono text-label-sm text-text-muted uppercase tracking-widest mb-2">

            Anatomy

          </p>

          <h2 className="font-display text-display-lg font-bold text-text-primary">

            Organism health

          </h2>

          <p className="font-ui text-sm text-text-secondary mt-2 max-w-md">

            Each data source is a living organ. Stale nodes wither in the hero above.

          </p>

        </div>

        <div className="max-w-md">

          <HealthPanel engines={healthData.engines} ok={healthData.ok} />

        </div>

      </div>

    </section>

  );

}

function Footer() {

  return (

    <footer className="py-8 px-6 border-t border-surface-2 relative z-10 hidden lg:block">

      <div className="max-w-7xl mx-auto flex items-center justify-between">

        <span className="font-mono text-label-sm text-text-muted">

          Darwin - CT215 homelab

        </span>

        <span className="font-mono text-label-sm text-text-muted">

          {new Date().getFullYear()}

        </span>

      </div>

    </footer>

  );

}

export default function Page() {

  const { data: healthData, loading: healthLoading } = useHealth(30_000);

  const { data: askData, loading, error, submit } = useAsk();

  const [focusMode, setFocusMode] = useState(false);

  const [mobileTab, setMobileTab] = useState<MobileTab>("ask");

  const handleSubmit = useCallback(

    async (q: string) => {

      await submit(q);

    },

    [submit]

  );

  useEffect(() => {

    if (askData && askData.hits.length > 0 && typeof window !== "undefined") {

      const isMobile = window.innerWidth < 1024;

      if (isMobile) {

        setTimeout(() => setMobileTab("hits"), 1200);

      }

    }

  }, [askData]);

  const liveOk = healthData ? healthData.ok : null;

  return (

    <main>

      {}

      <div className="aurora-blob" aria-hidden="true" />

      <Nav liveOk={liveOk} />

      {

}

      <section className="hero-section" aria-label="Darwin organism hero">

        <div className="hero-organism" aria-hidden="true">

          <OrganismBoundary>

            <DarwinOrganism healthData={healthData} focusMode={focusMode} />

          </OrganismBoundary>

        </div>

        <div className="relative z-10 flex flex-col items-center gap-4 mt-auto mb-20">

          <Wordmark />

        </div>

        <ScrollHint />

      </section>

      {}

      <DesktopSurface

        askData={askData}

        loading={loading}

        error={error}

        submit={handleSubmit}

        onFocusChange={setFocusMode}

        healthData={healthData}

        healthLoading={healthLoading}

      />

      {}

      <MobileSurface

        askData={askData}

        loading={loading}

        error={error}

        submit={handleSubmit}

        onFocusChange={setFocusMode}

        healthData={healthData}

        healthLoading={healthLoading}

        activeTab={mobileTab}

      />

      {}

      <DesktopHealthSection healthData={healthData} />

      <Footer />

      {}

      <MobileTabBar

        active={mobileTab}

        onChange={setMobileTab}

        hitCount={askData?.hits.length ?? 0}

        healthOk={liveOk}

      />

    </main>

  );

}