import * as React from 'react';
import { Maximize2, Minimize2, RotateCcw, Sparkles, X } 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 { KROW_LOGO_URL } from '@/assets/brand';
import { useAssistantFacts, useConversation } from './useAssistant';
import { buildIntro, buildPrompts } from './dynamic';
import { Message, ThinkingIndicator, TurnDivider } from './AssistantMessage';
import { PromptInput } from './PromptInput';
import { PromptChips } from './PromptChips';

/**
 * Krow AI Assistant — the dashboard's contextual assistant.
 *
 * 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.
 *
 * Two states share that frame:
 *
 * - **Landing.** One centred block: mark, contextual label, greeting,
 *   description, input, suggestions. Deliberately light — it is an invitation,
 *   not a page, so nothing in it competes with the dashboard beside it.
 * - **Conversation.** The thread takes the body and the composer returns to the
 *   bottom, because from then on the thread is what the user is reading.
 *
 * `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({ needsWorkerProfile: context.needsWorkerProfile });
  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, facts.profile?.full_name),
    [context.id, facts]
  );
  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="Krow AI 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">Krow AI</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 panel width" variant="ghost" size="sm" onClick={onRestore} />
              )
            : onExpand && (
                <IconButton icon={Maximize2} label="Expand to workspace" variant="ghost" size="sm" onClick={onExpand} />
              )}
          {onClose && (
            <IconButton icon={X} label="Close assistant" variant="ghost" size="sm" onClick={onClose} />
          )}
        </div>
      </div>

      {isEmpty ? (
        /* ── Landing: one compact centred block ───────────────────────── */
        <div className="flex min-h-0 flex-1 flex-col justify-center overflow-y-auto px-4 py-4">
          {/* Capped so the block stays a tight composition when expanded. */}
          <div className="mx-auto w-full max-w-sm animate-fade-in space-y-3.5">
            <div className="flex flex-col items-center text-center">
              <span className="relative mb-2.5 grid h-10 w-10 place-items-center rounded-xl bg-white shadow-brand ring-1 ring-krow-blue/10">
                <img src={KROW_LOGO_URL} alt="" aria-hidden="true" className="h-3.5 w-auto object-contain" />
                <span
                  aria-hidden="true"
                  className="absolute -right-1 -top-1 grid h-4 w-4 place-items-center rounded-full bg-krow-blue text-white shadow-sm"
                >
                  <Sparkles className="h-2 w-2" />
                </span>
              </span>

              <p className="text-[10px] font-semibold uppercase tracking-wide text-krow-blue">
                {intro.title}
              </p>
              <h3 className="mt-1 text-balance font-heading text-body-lg font-semibold leading-snug text-ink-1">
                {intro.greeting}
              </h3>
              <p className="mt-1 text-caption leading-relaxed text-ink-3">{intro.description}</p>
            </div>

            {composer}

            <PromptChips prompts={prompts} onSelect={runPrompt} />
          </div>
        </div>
      ) : (
        /* ── Conversation ─────────────────────────────────────────────── */
        <>
          <div
            ref={scrollRef}
            className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4"
            aria-live="polite"
            aria-relevant="additions text"
          >
            {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 className="shrink-0 space-y-2 border-t border-white/60 px-3 pb-2.5 pt-2.5">
            {/* Capped in conversation: the vertical space belongs to the thread.
                Expanded fits more per line, so it can afford one more. */}
            {!busy && (
              <PromptChips
                prompts={prompts}
                onSelect={runPrompt}
                max={expanded ? 4 : 3}
                align="start"
              />
            )}
            {composer}
            <p className="px-1 text-[10px] leading-tight text-ink-4">
              Krow AI reads this page&apos;s data. Check anything you act on.
            </p>
          </div>
        </>
      )}
    </Surface>
  );
}