import type { ReactNode } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import { SessionRail } from '../sessions/SessionRail';
import { ZipDropOverlay } from '../shared/ZipDropOverlay';
import { useTheme, type ThemeChoice, type ResolvedTheme } from '../../hooks/useTheme';

interface AppShellProps {
  children: ReactNode;
}

export function AppShell({ children }: AppShellProps) {
  const qc = useQueryClient();
  const { choice, resolved, cycle } = useTheme();

  return (
    <div className="flex h-full flex-col">
      <header className="flex h-10 shrink-0 items-center justify-between border-b border-border bg-surface-1 px-4">
        <Link to="/" className="flex items-center gap-2">
          <LogoMark />
          <span className="font-mono text-[12px] uppercase tracking-[0.12em] text-fg-0">
            kimi <span className="text-fg-2">vis</span>
          </span>
          <span className="ml-2 font-mono text-[10px] uppercase tracking-[0.12em] text-fg-3">
            debug · local files
          </span>
        </Link>
        <div className="flex items-center gap-2 text-[11px] text-fg-2">
          <ThemeToggle choice={choice} resolved={resolved} onCycle={cycle} />
          <button
            onClick={() => {
              void qc.invalidateQueries();
            }}
            className="flex items-center gap-1.5 border border-border px-2 py-0.5 font-mono text-[11px] text-fg-1 transition-colors hover:border-border-strong hover:text-fg-0"
            title="Refresh — re-read all session data from disk"
          >
            <RefreshIcon />
            refresh
          </button>
        </div>
      </header>
      <div className="flex min-h-0 flex-1">
        <SessionRail />
        {/* min-w-0 lets the main column shrink below its content's intrinsic
            width; without it a flex child defaults to min-width:auto and wide
            tab content (e.g. the Timeline's flex-wrap rows) blows the layout
            out horizontally instead of wrapping. */}
        <main className="flex min-h-0 min-w-0 flex-1 flex-col">{children}</main>
      </div>
      <ZipDropOverlay />
    </div>
  );
}

function ThemeToggle({
  choice,
  resolved,
  onCycle,
}: {
  choice: ThemeChoice;
  resolved: ResolvedTheme;
  onCycle: () => void;
}) {
  const label = choice === 'auto' ? `auto · ${resolved}` : choice;
  const title = `Theme: ${label}. Click to cycle (auto → light → dark → auto).`;
  return (
    <button
      onClick={onCycle}
      className="flex items-center gap-1.5 border border-border px-2 py-0.5 font-mono text-[11px] text-fg-1 transition-colors hover:border-border-strong hover:text-fg-0"
      title={title}
      aria-label={`Theme ${label}`}
    >
      {choice === 'auto' ? <AutoIcon /> : resolved === 'light' ? <SunIcon /> : <MoonIcon />}
      <span className="tabular">{label}</span>
    </button>
  );
}

function LogoMark() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <rect x="1" y="1" width="6" height="6" fill="var(--color-cat-conversation)" />
      <rect x="9" y="1" width="6" height="6" fill="var(--color-cat-subagent)" />
      <rect x="1" y="9" width="6" height="6" fill="var(--color-cat-ephemeral)" />
      <rect x="9" y="9" width="6" height="6" fill="var(--color-cat-approval)" />
    </svg>
  );
}

function RefreshIcon() {
  return (
    <svg width="10" height="10" viewBox="0 0 12 12" aria-hidden="true">
      <path
        d="M10 3 A5 5 0 1 0 10.8 7"
        stroke="currentColor"
        strokeWidth="1.2"
        fill="none"
        strokeLinecap="square"
      />
      <path d="M7 1 L10 3 L7 5" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="square" strokeLinejoin="miter" />
    </svg>
  );
}

function SunIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
      <circle cx="6" cy="6" r="2" fill="currentColor" />
      <g stroke="currentColor" strokeWidth="1" strokeLinecap="round">
        <line x1="6" y1="0.5" x2="6" y2="2" />
        <line x1="6" y1="10" x2="6" y2="11.5" />
        <line x1="0.5" y1="6" x2="2" y2="6" />
        <line x1="10" y1="6" x2="11.5" y2="6" />
        <line x1="2" y1="2" x2="3" y2="3" />
        <line x1="9" y1="9" x2="10" y2="10" />
        <line x1="10" y1="2" x2="9" y2="3" />
        <line x1="3" y1="9" x2="2" y2="10" />
      </g>
    </svg>
  );
}

function MoonIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
      <path
        d="M9 7.5 A4.5 4.5 0 1 1 4.5 3 A3.6 3.6 0 0 0 9 7.5 Z"
        fill="currentColor"
      />
    </svg>
  );
}

function AutoIcon() {
  return (
    <svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true">
      <path
        d="M6 1 A5 5 0 1 1 6 11 Z"
        fill="currentColor"
      />
      <circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" strokeWidth="1" />
    </svg>
  );
}