"use client";

import {
  ActionBarPrimitive,
  BranchPickerPrimitive,
  ComposerPrimitive,
  MessagePrimitive,
  ThreadPrimitive,
} from "@assistant-ui/react";
import {
  ArrowDownIcon,
  ArrowUpIcon,
  CheckIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  CopyIcon,
  RefreshCwIcon,
  SquareIcon,
} from "lucide-react";
import type { FC } from "react";
import { MarkdownText } from "./markdown-text";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// Thread root
// ---------------------------------------------------------------------------

export const Thread: FC = () => (
  <ThreadPrimitive.Root className="flex flex-col h-full">
    <ThreadPrimitive.Viewport className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
      <ThreadPrimitive.Empty>
        <ThreadWelcome />
      </ThreadPrimitive.Empty>

      <ThreadPrimitive.Messages
        components={{ UserMessage, AssistantMessage }}
      />

      <ThreadPrimitive.FollowupSuggestions
        components={{ Suggestion: FollowupSuggestion }}
      />
    </ThreadPrimitive.Viewport>

    <div className="relative">
      <ThreadScrollToBottom />
      <Composer />
    </div>
  </ThreadPrimitive.Root>
);

// ---------------------------------------------------------------------------
// Scroll to bottom
// ---------------------------------------------------------------------------

const ThreadScrollToBottom: FC = () => (
  <ThreadPrimitive.ScrollToBottom asChild>
    <button className="absolute -top-10 right-4 flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background shadow-sm hover:bg-accent transition-colors">
      <ArrowDownIcon className="h-3.5 w-3.5" />
    </button>
  </ThreadPrimitive.ScrollToBottom>
);

// ---------------------------------------------------------------------------
// Welcome screen (shown when thread is empty)
// ---------------------------------------------------------------------------

const ThreadWelcome: FC = () => (
  <div className="flex flex-col items-center justify-center py-8 text-center gap-2">
    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-sm">
      A
    </div>
    <p className="text-sm font-medium text-foreground">Atlas</p>
    <p className="text-xs text-muted-foreground max-w-xs">
      Your product requirements guide. Let's define what you're building.
    </p>
  </div>
);

// ---------------------------------------------------------------------------
// Followup suggestions
// ---------------------------------------------------------------------------

const FollowupSuggestion: FC<{ suggestion: { prompt: string } }> = ({ suggestion }) => (
  <ThreadPrimitive.Suggestion prompt={suggestion.prompt} asChild autoSend>
    <button className="text-xs px-3 py-1.5 rounded-full border border-violet-200 dark:border-violet-800 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-950/40 transition-colors">
      {suggestion.prompt}
    </button>
  </ThreadPrimitive.Suggestion>
);

// ---------------------------------------------------------------------------
// Composer (input area)
// ---------------------------------------------------------------------------

const Composer: FC = () => (
  <ComposerPrimitive.Root className="flex items-end gap-2 px-4 py-3 border-t border-border/60 bg-muted/20">
    <ComposerPrimitive.Input
      placeholder="Reply to Atlas…"
      rows={1}
      autoFocus
      className="flex-1 resize-none bg-background border border-border/60 rounded-xl px-3.5 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-violet-500/30 min-h-[40px] max-h-[120px] leading-relaxed"
    />
    <ThreadPrimitive.If running={false}>
      <ComposerPrimitive.Send asChild>
        <button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
          <ArrowUpIcon className="h-4 w-4" />
        </button>
      </ComposerPrimitive.Send>
    </ThreadPrimitive.If>
    <ThreadPrimitive.If running>
      <ComposerPrimitive.Cancel asChild>
        <button className="h-10 w-10 rounded-xl bg-violet-600 hover:bg-violet-700 text-white flex items-center justify-center shrink-0 transition-colors">
          <SquareIcon className="h-3.5 w-3.5 fill-white" />
        </button>
      </ComposerPrimitive.Cancel>
    </ThreadPrimitive.If>
  </ComposerPrimitive.Root>
);

// ---------------------------------------------------------------------------
// User message
// ---------------------------------------------------------------------------

const UserMessage: FC = () => (
  <MessagePrimitive.Root className="flex justify-end gap-2 group">
    <div className="max-w-[82%]">
      <MessagePrimitive.Content
        components={{ Text: UserText }}
      />
      <UserActionBar />
    </div>
  </MessagePrimitive.Root>
);

const UserText: FC<{ text: string }> = ({ text }) => (
  <div className="bg-violet-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap">
    {text}
  </div>
);

const UserActionBar: FC = () => (
  <ActionBarPrimitive.Root
    hideWhenRunning
    autohide="not-last"
    className="flex items-center gap-1 mt-1 justify-end opacity-0 group-hover:opacity-100 transition-opacity"
  >
    <ActionBarPrimitive.Edit asChild>
      <button className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
        Edit
      </button>
    </ActionBarPrimitive.Edit>
  </ActionBarPrimitive.Root>
);

// ---------------------------------------------------------------------------
// Assistant message
// ---------------------------------------------------------------------------

const AssistantMessage: FC = () => (
  <MessagePrimitive.Root className="flex justify-start gap-2.5 group">
    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 flex items-center justify-center text-white text-xs font-bold shrink-0 mt-0.5 shadow-sm">
      A
    </div>
    <div className="max-w-[82%]">
      <div className="bg-muted/60 rounded-2xl rounded-tl-sm px-4 py-3 text-sm">
        <MessagePrimitive.Content components={{ Text: AssistantText }} />
      </div>
      <AssistantActionBar />
      <BranchPicker />
    </div>
  </MessagePrimitive.Root>
);

const AssistantText: FC = () => <MarkdownText />;

const AssistantActionBar: FC = () => (
  <ActionBarPrimitive.Root
    hideWhenRunning
    autohide="not-last"
    className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
  >
    <ActionBarPrimitive.Copy asChild>
      <button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
        <MessagePrimitive.If copied>
          <CheckIcon className="h-2.5 w-2.5" />
          Copied
        </MessagePrimitive.If>
        <MessagePrimitive.If copied={false}>
          <CopyIcon className="h-2.5 w-2.5" />
          Copy
        </MessagePrimitive.If>
      </button>
    </ActionBarPrimitive.Copy>
    <ActionBarPrimitive.Reload asChild>
      <button className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-0.5 rounded hover:bg-muted transition-colors">
        <RefreshCwIcon className="h-2.5 w-2.5" />
        Retry
      </button>
    </ActionBarPrimitive.Reload>
  </ActionBarPrimitive.Root>
);

// ---------------------------------------------------------------------------
// Branch picker (for regenerated responses)
// ---------------------------------------------------------------------------

const BranchPicker: FC = () => (
  <BranchPickerPrimitive.Root
    hideWhenSingleBranch
    className="flex items-center gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"
  >
    <BranchPickerPrimitive.Previous asChild>
      <button className="text-muted-foreground hover:text-foreground transition-colors">
        <ChevronLeftIcon className="h-3 w-3" />
      </button>
    </BranchPickerPrimitive.Previous>
    <span className="text-[10px] text-muted-foreground">
      <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
    </span>
    <BranchPickerPrimitive.Next asChild>
      <button className="text-muted-foreground hover:text-foreground transition-colors">
        <ChevronRightIcon className="h-3 w-3" />
      </button>
    </BranchPickerPrimitive.Next>
  </BranchPickerPrimitive.Root>
);