import * as React from 'react';
import { Maximize2, Minimize2, PanelRightClose, RotateCcw, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Surface } from '@/components/ds/Surface';
import { IconButton } from '@/components/ds/IconButton';
import { Alert } from '@/components/ds/Alert';
import { useAssistantFacts, useConversation, useCurrentUserName } from './useAssistant';
import { buildIntro, buildPrompts } from './dynamic';
import { Message, ThinkingIndicator, TurnDivider } from './AssistantMessage';
import { PromptInput } from './PromptInput';
import { PromptChips } from './PromptChips';

/**
 * Owliver — the dashboard's contextual panel.
 *
 * One component, reused on every supported page; only `context` differs.
 *
 * The frame is fixed at three parts — header, body, composer — and only the body
 * scrolls. That is what lets the panel stay pinned beside a long dashboard
 * without ever growing the page or scrolling its own input out of reach.
 *
 * The frame does not change between states, only the body's content does: an
 * empty thread shows the greeting and this page's most relevant fact, and once a
 * question is asked the same region holds the conversation. Keeping the composer
 * anchored either way means the primary action never moves under the user, and
 * the panel never reads as two different components.
 *
 * `expanded` widens the same panel into an analysis workspace. `data-wide` lets
 * individual response blocks use the extra room (a KPI row goes to three
 * columns) without any of them needing to know the panel's pixel width.
 *
 * Independent of Owliver. Answers come from a provider (see provider.js) that
 * can later be pointed at an external service without changing anything here.
 */
export default function KrowAssistant({
  context,
  className,
  expanded = false,
  onClose,
  onExpand,
  onRestore,
}) {
  const facts = useAssistantFacts();
  const userName = useCurrentUserName();
  const { messages, pending, error, busy, send, stop, reset } = useConversation({
    contextId: context.id,
    facts,
  });

  const [input, setInput] = React.useState('');
  const scrollRef = React.useRef(null);
  const isEmpty = messages.length === 0 && !pending;

  /* Greeting and suggestions come from live data, so they recompute only when
     the data or the page actually changes. */
  const intro = React.useMemo(
    () => buildIntro(context.id, facts, userName),
    [context.id, facts, userName]
  );
  const prompts = React.useMemo(() => buildPrompts(context.id, facts), [context.id, facts]);

  /* Follow the newest content. Direct `scrollTop` rather than smooth scrolling:
     at streaming frequency a smooth scroll never catches up and the thread
     visibly lags the text. */
  React.useEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [messages, pending]);

  const submit = React.useCallback((text) => {
    const question = String(text).trim();
    if (!question || busy) return;
    send({ question });
    setInput('');
  }, [busy, send]);

  /* A chip is already a complete question, so it runs on click. */
  const runPrompt = React.useCallback((prompt) => {
    if (busy) return;
    setInput('');
    send({ question: prompt.prompt, capability: prompt.capability });
  }, [busy, send]);

  const composer = (
    <PromptInput
      value={input}
      onChange={setInput}
      onSubmit={submit}
      onStop={stop}
      busy={busy}
      placeholders={intro.placeholders}
    />
  );

  return (
    <Surface
      variant="glass"
      radius="xl"
      padding="none"
      elevation="sm"
      data-wide={expanded || undefined}
      className={cn('flex flex-col overflow-hidden', className)}
      role="region"
      aria-label="Owliver assistant"
    >
      {/* Header */}
      <div className="flex shrink-0 items-center gap-2.5 border-b border-white/60 px-3.5 py-2.5">
        <span className="grid h-7 w-7 shrink-0 place-items-center rounded-lg bg-krow-blue text-white shadow-brand">
          <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
        </span>

        <div className="min-w-0 flex-1">
          <h2 className="font-heading text-body-sm font-semibold leading-tight text-ink-1">Owliver</h2>
          <p className="truncate text-caption leading-tight text-ink-3">{context.page}</p>
        </div>

        {/* Window controls */}
        <div className="flex items-center gap-0.5">
          {messages.length > 0 && (
            <IconButton icon={RotateCcw} label="New conversation" variant="ghost" size="sm" onClick={reset} />
          )}
          {expanded
            ? onRestore && (
                <IconButton icon={Minimize2} label="Restore the default workspace width" variant="ghost" size="sm" onClick={onRestore} />
              )
            : onExpand && (
                <IconButton icon={Maximize2} label="Expand the Owliver workspace" variant="ghost" size="sm" onClick={onExpand} />
              )}
          {onClose && (
            <IconButton icon={PanelRightClose} label="Collapse the Owliver workspace" variant="ghost" size="sm" onClick={onClose} />
          )}
        </div>
      </div>

      {/* ── Body: the only region that scrolls ─────────────────────────── */}
      <div
        ref={scrollRef}
        className="min-h-0 flex-1 overflow-y-auto px-4 py-3.5"
        aria-live="polite"
        aria-relevant="additions text"
      >
        {isEmpty ? (
          /* Greeting and the single most relevant fact about this page. Top
             aligned rather than centred: it is the first thing in a
             conversation, not a splash screen, so it belongs where the first
             message would be. */
          <div className="animate-fade-in">
            <p className="font-heading text-body-lg font-semibold leading-snug text-ink-1">
              {intro.title}
            </p>
            <p className="mt-1 text-balance text-body-sm leading-relaxed text-ink-2">
              {intro.greeting}
            </p>
            <p className="mt-2.5 border-t border-border/70 pt-2.5 text-caption leading-relaxed text-ink-3">
              {intro.description}
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            {messages.map((message, i) => (
              <React.Fragment key={i}>
                {i > 0 && message.role === 'user' && <TurnDivider />}
                <Message
                  role={message.role}
                  text={message.text}
                  blocks={message.blocks}
                  stopped={message.stopped}
                />
              </React.Fragment>
            ))}

            {pending?.thinking && <ThinkingIndicator />}
            {pending && !pending.thinking && (
              <Message role="assistant" blocks={pending.blocks} streaming />
            )}

            {error && <Alert tone="destructive">{error}</Alert>}
          </div>
        )}
      </div>

      {/* ── Composer: fixed to the bottom in both states ───────────────── */}
      <div className="shrink-0 space-y-2 border-t border-white/60 px-3 pb-2.5 pt-2.5">
        {/* All suggestions on the landing screen, where they teach what can be
            asked. Capped once a thread exists, because from then on the vertical
            space belongs to the conversation. Expanded fits more per line, so it
            can afford one more. */}
        {!busy && (
          <PromptChips
            prompts={prompts}
            onSelect={runPrompt}
            max={isEmpty ? undefined : expanded ? 4 : 3}
            align="start"
          />
        )}
        {composer}
        <p className="px-1 text-[10px] leading-tight text-ink-4">
          Owliver reads this page&apos;s data. Check anything you act on.
        </p>
      </div>
    </Surface>
  );
}