frontend/src/components/ChatInterface.tsx

"use client";

import { ChangeEvent, FormEvent, KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
import dynamic from "next/dynamic";

import { ThreeBackdrop } from "@/components/ThreeBackdrop";
import { VoiceInput } from "@/components/VoiceInput";
import { parseSSEStream } from "@/lib/stream";
import { ChatMessage, GenUiPayload } from "@/lib/types";

// Crayon UI's ThemeProvider injects CSS variables that differ between SSR and the
// first client render, which trips Next.js' hydration check. Loading it client-only
// avoids the mismatch without losing any functionality.
const GenUiRenderer = dynamic(
  () => import("@/components/GenUiRenderer").then((mod) => mod.GenUiRenderer),
  { ssr: false }
);

type QuickAction = {
  label: string;
  prompt: string;
};

const QUICK_PROMPTS: QuickAction[] = [
  {
    label: "Find top candidates for senior Python engineer in Bangalore",
    prompt: "Find top candidates for senior Python engineer in Bangalore"
  },
  {
    label: "Check company policies",
    prompt: "Check company policies"
  },
  {
    label: "Create job posting",
    prompt: "Create job posting"
  },
  {
    label: "Schedule interview",
    prompt: "Schedule interview"
  },
  {
    label: "Draft email",
    prompt: "Draft email"
  }
];

const STARTER_ASSISTANT_MESSAGE =
  "Recruitment copilot is ready. Attach resume PDFs or ask for policy checks, candidate ranking, interview scheduling.";

function makeId(): string {
  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
    return crypto.randomUUID();
  }
  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
}

function AttachIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path
        d="M9.5 17.5l7.1-7.1a3 3 0 10-4.2-4.2l-7.4 7.4a5 5 0 107.1 7.1l6.3-6.3"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function MicIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path
        d="M12 3a3 3 0 00-3 3v5a3 3 0 006 0V6a3 3 0 00-3-3zm6 8a1 1 0 112 0 8 8 0 01-7 7.94V21h3a1 1 0 110 2H8a1 1 0 010-2h3v-2.06A8 8 0 014 11a1 1 0 112 0 6 6 0 0012 0z"
        fill="currentColor"
      />
    </svg>
  );
}

function SendIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path
        d="M4 12l15-8-3 8 3 8-15-8zm2.8 0l7.8 4.2-1.6-4.2 1.6-4.2L6.8 12z"
        fill="currentColor"
      />
    </svg>
  );
}

function PulseIcon() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path
        d="M3 12h4l2.2-4 3.6 8 2.1-4H21"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function PlusIcon() {
  return (
    <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
      <path
        d="M12 5v14M5 12h14"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.9"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function ChatInterface() {
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: makeId(),
      role: "assistant",
      text: STARTER_ASSISTANT_MESSAGE
    }
  ]);
  const [input, setInput] = useState("");
  const [isStreaming, setIsStreaming] = useState(false);
  const [isUploadingFiles, setIsUploadingFiles] = useState(false);
  const [pendingFiles, setPendingFiles] = useState<File[]>([]);
  const [error, setError] = useState<string | null>(null);

  const bottomRef = useRef<HTMLDivElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);

  const autoGrow = () => {
    const node = textareaRef.current;
    if (!node) {
      return;
    }
    node.style.height = "0px";
    const next = Math.min(node.scrollHeight, 168);
    node.style.height = `${Math.max(36, next)}px`;
  };

  useEffect(() => {
    autoGrow();
  }, [input]);

  const userTurnCount = useMemo(
    () => messages.filter((item) => item.role === "user").length,
    [messages]
  );
  const assistantTurnCount = useMemo(
    () => messages.filter((item) => item.role === "assistant").length,
    [messages]
  );

  const scrollToBottom = () => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
  };

  const patchAssistant = (assistantId: string, patch: Partial<ChatMessage>) => {
    setMessages((prev) =>
      prev.map((item) => (item.id === assistantId ? { ...item, ...patch } : item))
    );
  };

  const appendAssistantText = (assistantId: string, delta: string) => {
    setMessages((prev) =>
      prev.map((item) => {
        if (item.id !== assistantId) {
          return item;
        }
        return {
          ...item,
          text: `${item.text}${delta}`,
          isStreaming: true
        };
      })
    );
  };

  const sendMessage = async (messageText: string) => {
    const cleaned = messageText.trim();
    if (!cleaned || isStreaming) {
      return;
    }

    setError(null);
    setInput("");

    const userMessage: ChatMessage = {
      id: makeId(),
      role: "user",
      text: cleaned
    };
    const assistantId = makeId();
    const placeholder: ChatMessage = {
      id: assistantId,
      role: "assistant",
      text: "",
      isStreaming: true
    };

    setMessages((prev) => [...prev, userMessage, placeholder]);
    setIsStreaming(true);

    try {
      const response = await fetch("/api/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          message: cleaned,
          user_id: "browser-user",
          session_id: "browser-session",
          top_k: 8
        })
      });

      if (!response.ok || !response.body) {
        const text = await response.text();
        throw new Error(text || "Backend streaming failed.");
      }

      for await (const event of parseSSEStream(response.body)) {
        if (event.event === "token") {
          appendAssistantText(assistantId, String(event.data.delta ?? ""));
          scrollToBottom();
          continue;
        }

        if (event.event === "genui") {
          patchAssistant(assistantId, { genui: event.data as GenUiPayload });
          continue;
        }

        if (event.event === "done") {
          patchAssistant(assistantId, {
            text: String(event.data.message ?? ""),
            isStreaming: false
          });
          continue;
        }

        if (event.event === "error") {
          throw new Error(String(event.data.message ?? "Unknown streaming error"));
        }
      }

      patchAssistant(assistantId, { isStreaming: false });
    } catch (caught) {
      const message = caught instanceof Error ? caught.message : "Unexpected error";
      setError(message);
      patchAssistant(assistantId, {
        text: `Error: ${message}`,
        isStreaming: false
      });
    } finally {
      setIsStreaming(false);
      scrollToBottom();
    }
  };

  const uploadResume = async (file: File) => {
    const formData = new FormData();
    formData.append("file", file);

    const response = await fetch(`/api/upload?session_id=${encodeURIComponent("browser-session")}`, {
      method: "POST",
      body: formData
    });

    const text = await response.text();
    if (!response.ok) {
      throw new Error(text || "Upload failed");
    }

    const payload = JSON.parse(text) as {
      candidate_id: string;
      file_name: string;
      chunks_indexed: number;
      message: string;
    };

    return payload;
  };

  const submitTurn = async (messageText: string) => {
    if (isStreaming || isUploadingFiles) {
      return;
    }

    setError(null);
    const cleaned = messageText.trim();
    let uploadedFileNames: string[] = [];

    if (pendingFiles.length > 0) {
      setIsUploadingFiles(true);
      try {
        const uploadResults = [];
        for (const file of pendingFiles) {
          const result = await uploadResume(file);
          uploadResults.push(result);
        }

        uploadedFileNames = uploadResults.map((item) => item.file_name);

        const profileCards = await Promise.all(
          uploadResults.map(async (item) => {
            try {
              const detailRes = await fetch(
                `/api/candidates/${encodeURIComponent(item.candidate_id)}`
              );
              if (!detailRes.ok) {
                return null;
              }
              const detail = (await detailRes.json()) as { profile?: GenUiPayload };
              return detail.profile?.cards?.[0] ?? null;
            } catch {
              return null;
            }
          })
        );

        const cards = profileCards.filter(
          (card): card is NonNullable<typeof card> => Boolean(card)
        );
        const summary = `Ingested ${uploadResults.length} file(s): ${uploadedFileNames.join(", ")}. Use the cards below to open or shortlist the new candidate(s).`;

        setMessages((prev) => [
          ...prev,
          {
            id: makeId(),
            role: "assistant",
            text: summary,
            genui: cards.length ? { summary, cards } : undefined
          }
        ]);
        setPendingFiles([]);
      } catch (caught) {
        const message = caught instanceof Error ? caught.message : "Upload failed";
        setError(message);
        setIsUploadingFiles(false);
        return;
      } finally {
        setIsUploadingFiles(false);
      }
    }

    const finalPrompt =
      cleaned ||
      (uploadedFileNames.length > 0
        ? `I uploaded these resumes: ${uploadedFileNames.join(", ")}. Please shortlist top candidates now.`
        : "");

    if (!finalPrompt) {
      return;
    }

    await sendMessage(finalPrompt);
  };

  const onFileSelection = (event: ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files ?? []);
    const validPdfFiles = files.filter((file) => file.name.toLowerCase().endsWith(".pdf"));
    const invalidCount = files.length - validPdfFiles.length;

    if (invalidCount > 0) {
      setError("Only PDF files are supported for resume upload.");
    }

    if (validPdfFiles.length > 0) {
      setPendingFiles((prev) => {
        const merged = [...prev, ...validPdfFiles];
        const seen = new Set<string>();
        return merged.filter((file) => {
          const key = `${file.name}-${file.size}-${file.lastModified}`;
          if (seen.has(key)) {
            return false;
          }
          seen.add(key);
          return true;
        });
      });
    }

    event.target.value = "";
  };

  const removePendingFile = (target: File) => {
    setPendingFiles((prev) =>
      prev.filter(
        (file) =>
          !(
            file.name === target.name &&
            file.size === target.size &&
            file.lastModified === target.lastModified
          )
      )
    );
  };

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    void submitTurn(input);
  };

  const startNewChat = () => {
    if (isStreaming || isUploadingFiles) {
      return;
    }

    setMessages([
      {
        id: makeId(),
        role: "assistant",
        text: STARTER_ASSISTANT_MESSAGE
      }
    ]);
    setPendingFiles([]);
    setInput("");
    setError(null);
  };

  return (
    <main className="workspace-shell">
      <div className="three-layer" aria-hidden="true">
        <ThreeBackdrop />
      </div>

      <div className="workspace-frame">
        <aside className="left-sidebar">
          <div className="sidebar-brand">
            <p className="brand-eyebrow">Recruitment OS</p>
            <h1>Control Hub</h1>
            <p>
              Enterprise assistant for candidate search, policy guidance, interview operations, and posting
              generation.
            </p>
          </div>

          <button
            type="button"
            className="sidebar-new-chat"
            disabled={isStreaming || isUploadingFiles}
            onClick={startNewChat}
          >
            <PlusIcon />
            <span>New chat</span>
          </button>

          <section className="sidebar-section" aria-label="Quick actions">
            <h2>Quick Actions</h2>
            <div className="sidebar-prompt-list">
              {QUICK_PROMPTS.map((action) => (
                <button
                  key={action.label}
                  type="button"
                  className="sidebar-prompt"
                  disabled={isStreaming || isUploadingFiles}
                  onClick={() => {
                    void submitTurn(action.prompt);
                  }}
                >
                  {action.label}
                </button>
              ))}
            </div>
          </section>

          <section className="sidebar-section">
            <h2>Session</h2>
            <p className="sidebar-meta">User turns: {userTurnCount}</p>
            <p className="sidebar-meta">Assistant turns: {assistantTurnCount}</p>
            <p className="sidebar-meta">State: {isStreaming ? "Streaming response" : "Idle"}</p>
            <p className="sidebar-meta">Queued resumes: {pendingFiles.length}</p>
          </section>
        </aside>

        <section className="chat-main">
          <header className="chat-header">
            <h2>Recruitment Copilot</h2>
            <span className={`runtime-pill ${isStreaming ? "busy" : "ready"}`}>
              {isStreaming ? "Live stream" : "Realtime connected"}
            </span>
          </header>

          <div className="chatbox-shell">
            <section className="conversation-surface">
              <div className="messages">
                {messages.map((message) => {
                  const showThinking =
                    message.role === "assistant" &&
                    message.isStreaming &&
                    !message.text.trim() &&
                    !message.genui;
                  return (
                    <div key={message.id} className={`message-row ${message.role}`}>
                      <div className="bubble">
                        {message.role === "assistant" ? (
                          showThinking ? (
                            <span className="assistant-thinking" aria-label="Thinking">
                              <span className="dot" />
                              <span className="dot" />
                              <span className="dot" />
                            </span>
                          ) : (
                            <GenUiRenderer
                              text={message.text}
                              payload={message.genui}
                              isStreaming={Boolean(message.isStreaming)}
                              onAction={(llmFriendlyMessage, humanFriendlyMessage) => {
                                void sendMessage(llmFriendlyMessage || humanFriendlyMessage);
                              }}
                            />
                          )
                        ) : (
                          <p className="user-message-text">{message.text}</p>
                        )}
                      </div>
                    </div>
                  );
                })}
                <div ref={bottomRef} />
              </div>
            </section>

            <section className="composer-dock">
              {pendingFiles.length > 0 ? (
                <div className="pending-files" aria-label="Pending file uploads">
                  {pendingFiles.map((file) => (
                    <div
                      key={`${file.name}-${file.size}-${file.lastModified}`}
                      className="file-chip"
                      title={file.name}
                    >
                      <span className="file-chip-name">{file.name}</span>
                      <button
                        type="button"
                        className="file-chip-remove"
                        onClick={() => removePendingFile(file)}
                      >
                        x
                      </button>
                    </div>
                  ))}
                </div>
              ) : null}

              <form onSubmit={onSubmit}>
                <div className="thesys-input-shell">
                  <button
                    type="button"
                    className="icon-btn"
                    title="Attach PDF resumes"
                    disabled={isStreaming || isUploadingFiles}
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <AttachIcon />
                  </button>

                  <textarea
                    ref={textareaRef}
                    className="text-input compact"
                    value={input}
                    rows={1}
                    disabled={isStreaming || isUploadingFiles}
                    placeholder="Message the recruitment copilot"
                    onChange={(event) => setInput(event.target.value)}
                    onKeyDown={(event) => {
                      if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
                        event.preventDefault();
                        void submitTurn(input);
                      }
                    }}
                  />

                  <VoiceInput
                    className="icon-btn"
                    listeningContent={<PulseIcon />}
                    title="Speak your prompt"
                    disabled={isStreaming || isUploadingFiles}
                    onTranscript={(text) => {
                      setInput((prev) => (prev ? `${prev} ${text}` : text));
                    }}
                  >
                    <MicIcon />
                  </VoiceInput>

                  <button
                    className="send-btn-round"
                    type="submit"
                    title="Send message"
                    disabled={isStreaming || isUploadingFiles || (!input.trim() && pendingFiles.length === 0)}
                  >
                    {isStreaming ? <PulseIcon /> : <SendIcon />}
                  </button>
                </div>

                <input
                  ref={fileInputRef}
                  type="file"
                  accept="application/pdf"
                  multiple
                  style={{ display: "none" }}
                  onChange={onFileSelection}
                />
              </form>

              {isUploadingFiles ? (
                <div className="dock-foot">
                  <span className="side-copy">Uploading attached resumes…</span>
                </div>
              ) : null}

              {error ? <p className="error-copy">{error}</p> : null}
            </section>
          </div>
        </section>
      </div>
    </main>
  );
}