"use client";

import { useEffect, useRef } from "react";
import { Loader2, Sparkles, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { usePrompter } from "@/hooks/use-prompter";
import {
  ChatMessages,
  ChatComposer,
  SuccessCard,
  IntakeForm,
} from "@/components/prompter";

export default function PrompterPage() {
  const {
    state,
    messages,
    isSending,
    activity,
    createdTaskId,
    createdTaskTitle,
    createdTaskTeam,
    targetKind,
    setTargetKind,
    projectId,
    setProjectId,
    productId,
    setProductId,
    initialMessage,
    setInitialMessage,
    isFormValid,
    start,
    send,
    keepChatting,
    launchTask,
    startAnother,
    isLaunching,
    startRedraft,
  } = usePrompter();

  // Entry from a task's "Re-draft with board feedback" button: ?redraft=<taskId>
  // re-opens intake seeded with the board's review of that task. Fire once.
  const redraftTriggered = useRef(false);
  useEffect(() => {
    if (redraftTriggered.current) return;
    const taskId = new URLSearchParams(window.location.search).get("redraft");
    if (taskId) {
      redraftTriggered.current = true;
      void startRedraft(taskId);
    }
  }, [startRedraft]);

  const showForm = state === "form" || state === "preparing";
  const isComposerDisabled =
    state === "launching" || state === "success" || isSending;

  return (
    <div className="flex h-full flex-col">
      {/* Page header */}
      <div className="flex items-center gap-3 border-b px-6 py-4">
        <Sparkles className="h-5 w-5 text-primary" />
        <div>
          <h1 className="text-lg font-semibold">Task Assistant</h1>
          <p className="text-xs text-muted-foreground">
            Chat with an agent that reads your code and drafts the task
          </p>
        </div>
        {/* End chat — reap the agent and return to the form (any chat state) */}
        {!showForm && state !== "success" && (
          <Button
            variant="ghost"
            size="sm"
            className="ml-auto text-muted-foreground"
            onClick={startAnother}
            disabled={state === "launching"}
          >
            <X className="mr-1 h-4 w-4" />
            End chat
          </Button>
        )}
      </div>

      {showForm ? (
        <IntakeForm
          targetKind={targetKind}
          onTargetKind={setTargetKind}
          projectId={projectId}
          onProjectId={setProjectId}
          productId={productId}
          onProductId={setProductId}
          initialMessage={initialMessage}
          onInitialMessage={setInitialMessage}
          isValid={isFormValid()}
          isPreparing={state === "preparing"}
          onStart={start}
        />
      ) : (
        <div className="flex flex-1 flex-col overflow-hidden">
          {/* Success overlay in chat area */}
          {state === "success" &&
          createdTaskId &&
          createdTaskTitle &&
          createdTaskTeam ? (
            <div className="flex flex-1 flex-col items-center justify-center px-8 py-8">
              <div className="w-full max-w-md">
                <SuccessCard
                  taskId={createdTaskId}
                  taskTitle={createdTaskTitle}
                  team={createdTaskTeam}
                  onStartAnother={startAnother}
                />
              </div>
            </div>
          ) : (
            <ChatMessages
              messages={messages}
              onStart={launchTask}
              onKeepChatting={keepChatting}
              isLaunching={isLaunching}
            />
          )}

          {/* Live activity indicator — "watch it work" (prominent) */}
          {activity && state !== "success" && (
            <div className="mx-4 mb-2 flex items-center gap-2.5 rounded-lg border border-primary/30 bg-primary/10 px-4 py-2.5 text-sm font-medium text-primary">
              <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
              <span>{activity}</span>
            </div>
          )}

          {/* Composer */}
          {state !== "success" && (
            <ChatComposer
              onSend={send}
              disabled={isComposerDisabled}
              isSending={isSending}
            />
          )}
        </div>
      )}
    </div>
  );
}
