"use client";

import { useChat } from "@ai-sdk/react";
import { useI18n } from "@/components/i18n/i18n-provider";
import { DefaultChatTransport, type UIMessage } from "ai";
import type { Translator } from "@/lib/i18n";
import { Brain, Loader2, MessageSquare, Plus, Send, Trash2 } from "lucide-react";
import { Button } from "poyraz-ui/atoms";
import { useEffect, useRef, useState } from "react";
import { toast } from "poyraz-ui/molecules";
import {
  createChatSessionAction,
  deleteChatSessionAction,
  listChatMessagesAction,
  listChatSessionsAction,
} from "./actions";

function formatMessageContent(text: string) {
  if (!text) return null;
  const lines = text.split("\n");
  return lines.map((line, i) => (
    <span key={i}>
      {line.split(/(\*\*.*?\*\*|\*.*?\*)/g).map((part, j) => {
        if (part.startsWith("**") && part.endsWith("**")) {
          return (
            <strong key={j} className="font-semibold">
              {part.slice(2, -2)}
            </strong>
          );
        }
        if (part.startsWith("*") && part.endsWith("*")) {
          return <em key={j}>{part.slice(1, -1)}</em>;
        }
        return <span key={j}>{part}</span>;
      })}
      {i !== lines.length - 1 && <br />}
    </span>
  ));
}

type ChatSession = {
  id: string;
  title: string;
  created_at: string;
};

export function AIChatClient({ locale }: { locale: string }) {
  const i18n = useI18n();
  const t = i18n.t;
  const [sessions, setSessions] = useState<ChatSession[]>([]);
  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
  const [input, setInput] = useState("");
  const [isMobileSessionsOpen, setIsMobileSessionsOpen] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const { messages, sendMessage, setMessages, status, stop } = useChat({
    transport: new DefaultChatTransport({ api: "/api/chat" }),
    onError: (error) => {
      console.error(error);
      toast.error(resolveChatError(t, error));
    },
  });
  const isLoading = status === "submitted" || status === "streaming";

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  useEffect(() => {
    async function fetchSessions() {
      try {
        const data = await listChatSessionsAction();
        setSessions(data);
        setActiveSessionId(data[0]?.id || null);
      } catch (error) {
        toast.error(error instanceof Error ? error.message : t("chat.errors.loadSessions"));
      }
    }

    void fetchSessions();
  }, [t]);

  useEffect(() => {
    async function fetchMessages() {
      if (!activeSessionId) {
        setMessages([]);
        return;
      }

      try {
        const data = await listChatMessagesAction(activeSessionId);
        const formattedMessages: UIMessage[] = data.map((message) => ({
          id: message.id,
          role: message.role as UIMessage["role"],
          parts: [{ type: "text", text: message.content }],
        }));
        setMessages(formattedMessages);
      } catch (error) {
        toast.error(error instanceof Error ? error.message : t("chat.errors.loadMessages"));
      }
    }

    void fetchMessages();
  }, [activeSessionId, setMessages, t]);

  async function handleNewChat() {
    setActiveSessionId(null);
    setMessages([]);
  }

  async function handleDeleteSession(id: string, event: React.MouseEvent) {
    event.stopPropagation();
    try {
      await deleteChatSessionAction(id);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : t("chat.errors.deleteSession"));
      return;
    }

    const nextSessions = sessions.filter((session) => session.id !== id);
    setSessions(nextSessions);

    if (activeSessionId === id) {
      setActiveSessionId(nextSessions[0]?.id || null);
      if (nextSessions.length === 0) setMessages([]);
    }
  }

  async function handleSubmit(event: { preventDefault: () => void }) {
    event.preventDefault();

    const currentInput = input.trim();
    if (!currentInput || isLoading) return;

    let sessionId = activeSessionId;
    setInput("");

    if (!sessionId) {
      let newSession: ChatSession;
      try {
        newSession = await createChatSessionAction(
          currentInput.length > 32 ? `${currentInput.slice(0, 32)}...` : currentInput,
        );
      } catch (error) {
        toast.error(error instanceof Error ? error.message : t("chat.errors.createSession"));
        setInput(currentInput);
        return;
      }

      sessionId = newSession.id;
      setActiveSessionId(sessionId);
      setSessions((currentSessions) => [newSession, ...currentSessions]);
    }

    await sendMessage({ text: currentInput }, { body: { sessionId, sourceLocale: locale } });
  }

  const SessionsSidebarContent = (
    <>
      <div className="flex items-center justify-between border-b border-border p-4 shrink-0">
        <h2 className="flex items-center gap-2 font-semibold text-foreground">
          <MessageSquare className="h-4 w-4" />
          {t("chat.sidebar.title")}
        </h2>
        <Button effect="shine" variant="secondary" size="icon-sm"  onClick={() => {
          handleNewChat();
          setIsMobileSessionsOpen(false);
        }}>
          <Plus className="h-4 w-4" />
        </Button>
      </div>

      <div className="tiny-scrollbar flex-1 space-y-2 overflow-y-auto p-3">
        {sessions.length === 0 ? (
          <div className="mt-10 text-center text-sm text-muted-foreground">
            {t("chat.sidebar.empty")}
          </div>
        ) : (
          sessions.map((session) => (
            <div key={session.id} className="group flex items-center gap-1">
              <Button effect="shine"
                type="button"
                variant={activeSessionId === session.id ? "default" : "secondary"}
                onClick={() => {
                  setActiveSessionId(session.id);
                  setIsMobileSessionsOpen(false);
                }}
                className="min-w-0 flex-1 justify-start px-3"
              >
                <span className="truncate text-sm font-medium">
                  {session.title || t("chat.sidebar.untitled")}
                </span>
              </Button>
              <Button effect="shine"
                type="button"
                variant="secondary"
                size="icon-sm"
                aria-label={t("chat.sidebar.deleteAria", { title: session.title || t("chat.sidebar.untitled") })}
                onClick={(event) => void handleDeleteSession(session.id, event)}
                className="text-destructive opacity-0 transition-opacity lg:group-hover:opacity-100"
              >
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          ))
        )}
      </div>
    </>
  );

  return (
    <div className="flex flex-col md:flex-row h-[calc(100dvh-3.5rem)] md:h-[calc(100dvh-6rem)] w-[calc(100%+2rem)] md:w-full -mx-4 -my-4 md:mx-0 md:my-0 overflow-hidden md:rounded-sm border-0 md:border md:border-border bg-background">
      
      {/* Desktop Sidebar */}
      <aside className="hidden w-80 flex-col border-r border-border bg-muted/20 md:flex">
        {SessionsSidebarContent}
      </aside>

      {/* Mobile Sidebar Overlay */}
      {isMobileSessionsOpen && (
        <div
          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm md:hidden transition-opacity"
          onClick={() => setIsMobileSessionsOpen(false)}
        />
      )}

      {/* Mobile Sidebar Drawer */}
      <aside
        className={`fixed inset-y-0 left-0 z-50 w-72 transform border-r border-border bg-background transition-transform duration-300 ease-in-out md:hidden flex flex-col ${
          isMobileSessionsOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        {SessionsSidebarContent}
      </aside>
      <section className="flex min-w-0 flex-1 flex-col h-full">
        <header className="flex h-14 items-center justify-between border-b border-border px-4 md:px-6 shrink-0">
          <div className="flex items-center gap-3">
            <div className="flex h-8 w-8 items-center justify-center rounded-sm bg-primary/10 text-primary">
              <Brain className="h-4 w-4" />
            </div>
            <div>
              <h1 className="text-sm font-semibold text-foreground">{t("chat.title")}</h1>
            </div>
          </div>
          <Button effect="shine" variant="secondary" size="sm" className="md:hidden text-xs px-3" onClick={() => setIsMobileSessionsOpen(true)}>
            <MessageSquare className="h-3.5 w-3.5 mr-1.5" /> {t("chat.sidebar.title")}
          </Button>
        </header>

        <div className="tiny-scrollbar flex-1 space-y-5 overflow-y-auto p-6">
          {messages.length === 0 ? (
            <div className="mx-auto flex h-full max-w-md flex-col items-center justify-center text-center">
              <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-sm bg-primary/10 text-primary">
                <Brain className="h-7 w-7" />
              </div>
              <h2 className="text-xl font-semibold text-foreground">{t("chat.empty.title")}</h2>
              <p className="mt-2 text-sm text-muted-foreground">
                {t("chat.empty.description")}
              </p>
            </div>
          ) : (
            messages.map((message) => {
              const text = getMessageText(message);

              return (
                <div
                  key={message.id}
                  className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
                >
                  <div
                    className={`max-w-[92%] md:max-w-[85%] rounded-sm px-4 py-3 text-sm ${
                      message.role === "user"
                        ? "bg-primary text-primary-foreground"
                        : "border border-border bg-muted/40 text-foreground"
                    }`}
                  >
                    {formatMessageContent(text)}
                  </div>
                </div>
              );
            })
          )}

          {isLoading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader2 className="h-4 w-4 animate-spin text-primary" />
              {t("chat.messages.loading")}
            </div>
          ) : null}
          <div ref={messagesEndRef} />
        </div>

        <form onSubmit={handleSubmit} className="border-t border-border p-3 md:p-4 shrink-0 bg-background">
          <div className="mx-auto flex max-w-4xl items-end gap-2 rounded-sm border border-border bg-background p-1.5 focus-within:border-primary">
            <textarea
              value={input}
              onChange={(event) => setInput(event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Enter" && !event.shiftKey) {
                  event.preventDefault();
                  void handleSubmit(event);
                }
              }}
              placeholder={t("chat.input.placeholder")}
              className="min-h-9 max-h-40 flex-1 resize-none bg-transparent px-2 py-2 text-sm outline-none placeholder:text-muted-foreground placeholder:truncate"
              rows={1}
              disabled={isLoading}
            />
            {isLoading ? (
              <Button effect="shine" type="button" variant="secondary" size="icon" className="shrink-0" onClick={() => void stop()}>
                <span className="h-3 w-3 bg-current" />
              </Button>
            ) : (
              <Button variant="default" effect="shine" type="submit" size="icon" className="shrink-0" disabled={!input.trim()}>
                <Send className="h-4 w-4" />
              </Button>
            )}
          </div>
        </form>
      </section>
    </div>
  );
}

function resolveChatError(t: Translator["t"], error: unknown) {
  const message = error instanceof Error ? error.message : "";
  if (!message) return t("chat.errors.communication");

  const [key, detail] = message.split("|", 2);
  if (/^chat\.errors\./.test(key)) {
    const reasonKey = detail ? `chat.errorReasons.${detail}` : "";
    const translatedDetail = reasonKey ? t(reasonKey) : "";
    return t(key, {
      detail: translatedDetail && translatedDetail !== reasonKey
        ? translatedDetail
        : detail || t("chat.errors.noDetail"),
    });
  }

  return message;
}

function getMessageText(message: UIMessage) {
  return message.parts
    .filter((part) => part.type === "text")
    .map((part) => part.text)
    .join("");
}