"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import { trpc } from "~/lib/trpc/client.js";
import { ChatMessage, TypingIndicator } from "./ChatMessage.js";

/** Map route prefixes to human-readable page context for the AI */
const ROUTE_CONTEXT: Record<string, string> = {
  "/dashboard": "Dashboard — Übersicht mit KPIs, aktive Projekte, Ressourcen-Auslastung",
  "/timeline": "Timeline — Gantt-artige Ansicht aller Allokationen und Projekte",
  "/allocations": "Allokationen — Liste aller Zuweisungen von Ressourcen zu Projekten",
  "/staffing": "Staffing — Projektbesetzung und Kapazitätsplanung",
  "/resources": "Ressourcen — Liste aller Mitarbeiter mit Details (FTE, LCR, Skills, Chapter)",
  "/projects": "Projekte — Liste aller Projekte mit Budget, Status, Zeitraum",
  "/roles": "Rollen — Verwaltung der verfügbaren Rollen",
  "/estimates": "Estimating — Aufwandsschätzungen für Projekte",
  "/vacations/my": "Meine Urlaube — Eigene Urlaubsanträge und Saldo",
  "/vacations": "Urlaubsverwaltung — Alle Urlaubsanträge, Genehmigungen, Team-Kalender",
  "/analytics/skills": "Skills Analytics — Skill-Verteilung und -Analyse über alle Ressourcen",
  "/analytics/computation-graph": "Computation Graph — Berechnungsvisualisierung für Budget/Kosten",
  "/reports/chargeability": "Chargeability Report — Auslastungsanalyse pro Ressource",
  "/admin/settings": "Admin-Einstellungen — System-Konfiguration, AI-Credentials, SMTP",
  "/admin/users": "Benutzerverwaltung — Rollen, Berechtigungen, Zugänge",
};

function resolvePageContext(pathname: string): string {
  const exact = ROUTE_CONTEXT[pathname];
  if (exact) return exact;
  const sorted = Object.keys(ROUTE_CONTEXT).sort((a, b) => b.length - a.length);
  for (const prefix of sorted) {
    const ctx = ROUTE_CONTEXT[prefix];
    if (pathname.startsWith(prefix) && ctx) return ctx;
  }
  return pathname;
}

interface Message {
  role: "user" | "assistant";
  content: string;
  insights?: AssistantInsight[];
  approval?: AssistantApproval;
}

interface AssistantApproval {
  id: string;
  status: "pending" | "approved" | "cancelled";
  conversationId: string;
  toolName: string;
  summary: string;
  createdAt: string;
  expiresAt: string;
}

interface AssistantInsightMetric {
  label: string;
  value: string;
  tone?: "neutral" | "good" | "warn" | "danger" | "info";
}

interface AssistantInsightSection {
  title: string;
  metrics: AssistantInsightMetric[];
}

interface AssistantInsight {
  kind: "chargeability" | "resource_match" | "holiday_region" | "resource_holidays";
  title: string;
  subtitle?: string;
  metrics: AssistantInsightMetric[];
  sections?: AssistantInsightSection[];
}

const STORAGE_KEY = "nexus-chat-messages";
const CONVERSATION_ID_KEY = "nexus-chat-conversation-id";

function isAssistantApproval(value: unknown): value is AssistantApproval {
  if (!value || typeof value !== "object") return false;
  const approval = value as Partial<AssistantApproval>;
  return (
    typeof approval.id === "string" &&
    (approval.status === "pending" ||
      approval.status === "approved" ||
      approval.status === "cancelled") &&
    typeof approval.conversationId === "string" &&
    typeof approval.toolName === "string" &&
    typeof approval.summary === "string" &&
    typeof approval.createdAt === "string" &&
    typeof approval.expiresAt === "string"
  );
}

/** Load messages from sessionStorage (survives page reloads, clears on tab close). */
function loadPersistedMessages(): Message[] {
  if (typeof window === "undefined") return [];
  try {
    const raw = sessionStorage.getItem(STORAGE_KEY);
    if (raw) {
      const parsed = JSON.parse(raw) as unknown;
      if (Array.isArray(parsed)) {
        return parsed
          .filter(
            (item): item is Partial<Message> & { role: Message["role"]; content: string } =>
              typeof item === "object" &&
              item !== null &&
              (item.role === "user" || item.role === "assistant") &&
              typeof item.content === "string",
          )
          .map((item) => ({
            role: item.role,
            content: item.content,
            ...(Array.isArray(item.insights)
              ? { insights: item.insights as AssistantInsight[] }
              : {}),
            ...(isAssistantApproval(item.approval) ? { approval: item.approval } : {}),
          }));
      }
    }
  } catch {
    /* ignore corrupt data */
  }
  return [];
}

/** Module-level cache — avoids re-parsing sessionStorage on every client-side navigation. */
let cachedMessages: Message[] | null = null;

function generateConversationId(): string {
  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  return `conversation-${Date.now()}`;
}

function loadConversationId(): string {
  if (typeof window === "undefined") return generateConversationId();
  try {
    const raw = sessionStorage.getItem(CONVERSATION_ID_KEY)?.trim();
    if (raw) return raw;
  } catch {
    // ignore storage access errors
  }
  return generateConversationId();
}

export function ChatPanel({ onClose }: { onClose: () => void }) {
  const pathname = usePathname();
  const router = useRouter();
  const utils = trpc.useUtils();
  const [messages, setMessages] = useState<Message[]>(
    () => cachedMessages ?? loadPersistedMessages(),
  );
  const [conversationId, setConversationId] = useState<string>(() => loadConversationId());
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [approvalNotice, setApprovalNotice] = useState<string | null>(null);
  const scrollRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const chatMutation = trpc.assistant.chat.useMutation();
  const pendingApprovalsQuery = trpc.assistant.listPendingApprovals.useQuery(undefined, {
    refetchInterval: 30_000,
  });
  const pendingApprovals = pendingApprovalsQuery.data ?? [];
  const inlineApprovalIds = new Set(
    messages
      .map((message) => message.approval?.id)
      .filter((approvalId): approvalId is string => typeof approvalId === "string"),
  );
  const visiblePendingApprovals = pendingApprovals.filter(
    (approval) => !inlineApprovalIds.has(approval.id),
  );

  // Sync to module-level cache + sessionStorage on every change
  useEffect(() => {
    cachedMessages = messages;
    try {
      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(messages));
    } catch {
      /* quota exceeded */
    }
  }, [messages]);

  useEffect(() => {
    try {
      sessionStorage.setItem(CONVERSATION_ID_KEY, conversationId);
    } catch {
      /* quota exceeded */
    }
  }, [conversationId]);

  // Auto-scroll to bottom on new messages
  useEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [messages, isLoading]);

  // Focus input on mount
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const sendMessage = useCallback(
    async (
      overrideText?: string,
      targetConversationId?: string,
      options?: { persistInCurrentChat?: boolean },
    ) => {
      const text = (overrideText ?? input).trim();
      if (!text || isLoading) return;
      const persistInCurrentChat = options?.persistInCurrentChat ?? true;
      const activeConversationId = targetConversationId ?? conversationId;

      if (!overrideText) {
        setInput("");
      }
      setError(null);
      setApprovalNotice(null);

      const userMsg: Message = { role: "user", content: text };
      const updated = persistInCurrentChat ? [...messages, userMsg] : messages;
      if (persistInCurrentChat) {
        setMessages(updated);
      }
      setIsLoading(true);

      try {
        const reply = await chatMutation.mutateAsync({
          messages: (persistInCurrentChat ? updated.slice(-40) : [userMsg]).map((message) => ({
            role: message.role,
            content: message.content,
          })),
          ...(pathname ? { pageContext: resolvePageContext(pathname) } : {}),
          conversationId: activeConversationId,
        });
        const typedReply = reply as {
          content: string;
          role: "assistant";
          actions?: Array<{ type: string; url?: string; scope?: string[] }>;
          insights?: AssistantInsight[];
          approval?: AssistantApproval;
        };
        if (persistInCurrentChat) {
          setMessages((prev) => [
            ...prev,
            {
              role: "assistant",
              content: typedReply.content,
              ...(Array.isArray(typedReply.insights) && typedReply.insights.length > 0
                ? { insights: typedReply.insights }
                : {}),
              ...(isAssistantApproval(typedReply.approval)
                ? { approval: typedReply.approval }
                : {}),
            },
          ]);
        } else {
          setApprovalNotice(typedReply.content);
        }

        // Handle actions from the AI (navigation, data invalidation)
        const actions = typedReply.actions;
        if (actions) {
          for (const action of actions) {
            if (action.type === "navigate" && action.url) {
              // eslint-disable-next-line @typescript-eslint/no-explicit-any
              router.push(action.url as any);
            } else if (action.type === "invalidate" && action.scope) {
              // Invalidate relevant tRPC queries so the UI refreshes
              for (const scope of action.scope) {
                if (scope === "allocation" || scope === "timeline") {
                  void utils.allocation.invalidate();
                  void utils.timeline.invalidate();
                }
                if (scope === "resource") void utils.resource.invalidate();
                if (scope === "project") void utils.project.invalidate();
                if (scope === "country") void utils.country.invalidate();
                if (scope === "holidayCalendar") void utils.holidayCalendar.invalidate();
                if (scope === "vacation") void utils.vacation.invalidate();
              }
            }
          }
        }
        await utils.assistant.listPendingApprovals.invalidate();
      } catch (err) {
        const msg = err instanceof Error ? err.message : "Something went wrong";
        setError(msg);
      } finally {
        setIsLoading(false);
      }
    },
    [conversationId, input, isLoading, messages, chatMutation, pathname, router, utils],
  );

  // Track user message history for up-arrow recall
  const userHistory = useRef<string[]>([]);
  const historyIndex = useRef(-1);

  // Keep userHistory in sync with messages
  useEffect(() => {
    userHistory.current = messages.filter((m) => m.role === "user").map((m) => m.content);
    historyIndex.current = -1;
  }, [messages]);

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "ArrowUp" && input === "" && userHistory.current.length > 0) {
      e.preventDefault();
      const nextIdx =
        historyIndex.current < 0
          ? userHistory.current.length - 1
          : Math.max(0, historyIndex.current - 1);
      historyIndex.current = nextIdx;
      setInput(userHistory.current[nextIdx] ?? "");
      return;
    }
    if (e.key === "ArrowDown" && historyIndex.current >= 0) {
      e.preventDefault();
      const nextIdx = historyIndex.current + 1;
      if (nextIdx >= userHistory.current.length) {
        historyIndex.current = -1;
        setInput("");
      } else {
        historyIndex.current = nextIdx;
        setInput(userHistory.current[nextIdx] ?? "");
      }
      return;
    }
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      void sendMessage();
    }
  };

  const clearChat = () => {
    setMessages([]);
    setError(null);
    setApprovalNotice(null);
    setConversationId(generateConversationId());
    cachedMessages = null;
    try {
      sessionStorage.removeItem(STORAGE_KEY);
    } catch {
      /* noop */
    }
  };

  return (
    <div className="w-96 shrink-0 flex flex-col border-l border-gray-200 bg-white dark:border-slate-800 dark:bg-slate-950/75">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3 dark:border-slate-800">
        <div className="flex items-center gap-2">
          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-600 text-white">
            <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
              />
            </svg>
          </div>
          <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">HartBOT</h2>
        </div>
        <div className="flex items-center gap-1">
          {messages.length > 0 && (
            <button
              type="button"
              onClick={clearChat}
              className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-slate-800 dark:hover:text-gray-300"
              title="Chat leeren"
            >
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                />
              </svg>
            </button>
          )}
          <button
            type="button"
            onClick={onClose}
            className="rounded-lg p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-slate-800 dark:hover:text-gray-300"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>

      {/* AI Disclaimer (EGAI 4.3.1.4) */}
      <div className="px-3 py-2 text-[11px] text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
        AI responses may be inaccurate. Always verify critical information before acting on it.
      </div>

      {/* Messages */}
      <div ref={scrollRef} className="flex-1 overflow-y-auto px-3 py-3 space-y-3">
        {(visiblePendingApprovals.length > 0 || approvalNotice) && (
          <div
            data-testid="assistant-open-approvals"
            className="space-y-2 rounded-2xl border border-amber-200 bg-amber-50/80 p-3 text-xs text-amber-950 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-50"
          >
            <div className="flex items-center justify-between gap-3">
              <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-amber-800 dark:text-amber-200">
                Open approvals
              </div>
              {visiblePendingApprovals.length > 0 && (
                <span className="rounded-full border border-amber-300/80 px-2 py-0.5 text-[11px] font-medium dark:border-amber-800">
                  {visiblePendingApprovals.length}
                </span>
              )}
            </div>
            {approvalNotice && (
              <div className="rounded-xl border border-amber-300/80 bg-white/70 px-3 py-2 text-[12px] text-amber-900 dark:border-amber-800 dark:bg-slate-900/40 dark:text-amber-100">
                {approvalNotice}
              </div>
            )}
            {visiblePendingApprovals.map((approval) => {
              const belongsToCurrentConversation = approval.conversationId === conversationId;
              return (
                <div
                  key={approval.id}
                  data-testid="assistant-approval-card"
                  data-approval-id={approval.id}
                  data-conversation-scope={belongsToCurrentConversation ? "current" : "other"}
                  className="rounded-xl border border-amber-200/90 bg-white/80 px-3 py-2.5 shadow-sm dark:border-amber-900/50 dark:bg-slate-900/40"
                >
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="text-sm font-medium text-amber-950 dark:text-amber-50">
                        {approval.summary}
                      </div>
                      <div className="mt-1 flex flex-wrap gap-x-2 gap-y-1 text-[11px] text-amber-700 dark:text-amber-200/80">
                        <span>{approval.toolName}</span>
                        <span>Expires {new Date(approval.expiresAt).toLocaleString()}</span>
                      </div>
                    </div>
                    <span className="rounded-full border border-amber-300/80 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.06em] dark:border-amber-800">
                      {belongsToCurrentConversation ? "This chat" : "Other chat"}
                    </span>
                  </div>
                  <div className="mt-2 flex gap-2">
                    <button
                      type="button"
                      data-testid="assistant-approval-confirm"
                      onClick={() =>
                        void sendMessage("Ja, bitte ausführen.", approval.conversationId, {
                          persistInCurrentChat: belongsToCurrentConversation,
                        })
                      }
                      disabled={isLoading}
                      className="rounded-lg bg-amber-900 px-3 py-1.5 font-medium text-amber-50 transition hover:bg-amber-950 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-amber-200 dark:text-amber-950 dark:hover:bg-amber-100"
                    >
                      Confirm
                    </button>
                    <button
                      type="button"
                      data-testid="assistant-approval-cancel"
                      onClick={() =>
                        void sendMessage("Abbrechen.", approval.conversationId, {
                          persistInCurrentChat: belongsToCurrentConversation,
                        })
                      }
                      disabled={isLoading}
                      className="rounded-lg border border-amber-300 px-3 py-1.5 font-medium text-amber-900 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-amber-800 dark:text-amber-100 dark:hover:bg-amber-900/40"
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {messages.length === 0 && !isLoading && (
          <div className="flex flex-col items-center justify-center py-12 text-center text-sm text-gray-400 dark:text-gray-500">
            <svg className="mb-2 h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={1.5}
                d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
              />
            </svg>
            <p className="font-medium">Frag mich etwas!</p>
            <p className="mt-1 text-xs">z.B. &quot;Welche Ressourcen gibt es?&quot;</p>
          </div>
        )}
        {messages.map((msg, i) => (
          <div key={i} className="space-y-2">
            <ChatMessage
              role={msg.role}
              content={msg.content}
              {...(msg.insights ? { insights: msg.insights } : {})}
            />
            {msg.role === "assistant" && msg.approval && (
              <div className="flex justify-start">
                <div className="max-w-[85%] rounded-2xl border border-amber-200 bg-amber-50/90 px-3 py-2.5 text-xs text-amber-900 shadow-sm dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-100">
                  <div className="flex items-center justify-between gap-3">
                    <span className="font-semibold uppercase tracking-[0.08em]">
                      {msg.approval.status === "pending" ? "Approval pending" : msg.approval.status}
                    </span>
                    <span className="rounded-full border border-amber-300/70 px-2 py-0.5 font-medium dark:border-amber-800">
                      {msg.approval.toolName}
                    </span>
                  </div>
                  <div className="mt-1.5 text-sm font-medium text-amber-950 dark:text-amber-50">
                    {msg.approval.summary}
                  </div>
                  <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-amber-700 dark:text-amber-200/80">
                    <span>Created: {new Date(msg.approval.createdAt).toLocaleString()}</span>
                    {msg.approval.status === "pending" && (
                      <span>Expires: {new Date(msg.approval.expiresAt).toLocaleString()}</span>
                    )}
                  </div>
                  {msg.approval.status === "pending" && (
                    <div className="mt-3 flex gap-2">
                      <button
                        type="button"
                        onClick={() => void sendMessage("Ja, bitte ausführen.")}
                        disabled={isLoading}
                        className="rounded-lg bg-amber-900 px-3 py-1.5 font-medium text-amber-50 transition hover:bg-amber-950 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-amber-200 dark:text-amber-950 dark:hover:bg-amber-100"
                      >
                        Confirm
                      </button>
                      <button
                        type="button"
                        onClick={() => void sendMessage("Abbrechen.")}
                        disabled={isLoading}
                        className="rounded-lg border border-amber-300 px-3 py-1.5 font-medium text-amber-900 transition hover:bg-amber-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-amber-800 dark:text-amber-100 dark:hover:bg-amber-900/40"
                      >
                        Cancel
                      </button>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        ))}
        {isLoading && <TypingIndicator />}
        {error && (
          <div className="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400">
            {error}
          </div>
        )}
      </div>

      {/* Input */}
      <div className="border-t border-gray-200 px-3 py-2.5 dark:border-slate-800">
        <div className="flex items-end gap-2">
          <textarea
            ref={inputRef}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder="Nachricht eingeben..."
            rows={1}
            className="flex-1 resize-none rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:border-brand-500"
            style={{ maxHeight: "120px" }}
            onInput={(e) => {
              const target = e.target as HTMLTextAreaElement;
              target.style.height = "auto";
              target.style.height = `${Math.min(target.scrollHeight, 120)}px`;
            }}
          />
          <button
            type="button"
            onClick={() => void sendMessage()}
            disabled={!input.trim() || isLoading}
            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-600 text-white transition-colors hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 12h14M12 5l7 7-7 7"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
}