'use client';

import { useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { FiMessageSquare, FiX, FiChevronRight } from 'react-icons/fi';
import { useChatStreaming } from './useChatStreaming';
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
import './chat-overrides.css';
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
} from '@chatscope/chat-ui-kit-react';
import EvidenceBlock from './EvidenceBlock';
import { tryParseEvidence } from './parseEvidence';
import { FiSend, FiSquare } from 'react-icons/fi';

type Props = {
  api?: string;
  title?: string;
  hintText?: string;
  badgeId: string;
  // Optional: customize login path and header offset behavior for different host apps
  loginPath?: string; // e.g., '/login' in enterprise; defaults to '/auth/login'
  headerOffset?: 'auto' | 'none' | number; // default 'auto' (measure <header>), use 'none' when no header
  developerName?: string; // used for starter questions
};

export default function ChatWidget({ api = '/api/chat', title = 'KYD Bot', hintText = 'Ask anything about the developer', badgeId, loginPath = '/auth/login', headerOffset = 'auto', developerName }: Props) {
  // Responsive breakpoint detection (mobile if < 768px)
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const check = () => setIsMobile(typeof window !== 'undefined' && window.innerWidth < 768);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);
  // Sidebar open state (default collapsed)
  const [open, setOpen] = useState<boolean>(false);
  // Avoid hydration mismatches by rendering only after mount
  const [hasMounted, setHasMounted] = useState(false);
  useEffect(() => { setHasMounted(true); }, []);
  // On first mount, default collapsed on mobile (unless URL prefilled opens it)
  useEffect(() => {
    if (!hasMounted) return;
    try {
      const url = typeof window !== 'undefined' ? new URL(window.location.href) : null;
      const prompt = url ? url.searchParams.get('chatPrompt') : null;
      if (!prompt && isMobile) setOpen(false);
    } catch {}
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [hasMounted, isMobile]);

  useEffect(() => {
    // when sidebar is closed, dismiss hint
    if (!open) setShowHint(false);
  }, [open]);

  // Sidebar width with bounds and persistence
  const [width, setWidth] = useState<number>(() => {
    try { const w = Number(localStorage.getItem('kydChatSidebarWidth')); return Number.isFinite(w) && w >= 320 ? Math.min(w, Math.floor(window.innerWidth * 0.9)) : 420; } catch { return 420; }
  });
  const minWidth = Math.min(320, Math.floor((typeof window !== 'undefined' ? window.innerWidth : 1200) * 0.92));
  const maxWidth = Math.max(minWidth, Math.floor((typeof window !== 'undefined' ? window.innerWidth : 1200) * 0.9));
  // Collapsed tab vertical position
  const [tabTop, setTabTop] = useState<number>(() => {
    try { const t = Number(localStorage.getItem('kydChatCollapsedTop')); return Number.isFinite(t) ? t : 120; } catch { return 120; }
  });
  const [draggingResize, setDraggingResize] = useState(false);
  const [draggingTab, setDraggingTab] = useState(false);
  const dragStartXRef = useRef(0);
  const startWidthRef = useRef(0);
  const dragStartYRef = useRef(0);
  const startTopRef = useRef(0);
  const tabDraggedRef = useRef(false);
  const [headerTop, setHeaderTop] = useState(0);
  const [showHint, setShowHint] = useState(false);
  const { messages, input, setInput, sending, sendMessage, cancel } = useChatStreaming({ api, badgeId, loginPath });
  const listRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (listRef.current) listRef.current.scrollTop = listRef.current.scrollHeight;
  }, [messages, open]);

  // Prefill input from URL chatPrompt and open the sidebar when present
  useEffect(() => {
    try {
      if (typeof window === 'undefined') return;
      const url = new URL(window.location.href);
      const prompt = url.searchParams.get('chatPrompt');
      if (prompt && prompt.trim()) {
        setInput(prompt);
        setOpen(true);
      }
    } catch {}
  }, [setInput]);

  // Optional hint (only shows if user hasn't dismissed before and when collapsed)
  useEffect(() => {
    try {
      const dismissed = localStorage.getItem('kydChatHintDismissed');
      if (!dismissed) {
        const shouldShow = !open; // show only if collapsed on first load
        if (shouldShow) {
          setShowHint(true);
          const t = setTimeout(() => setShowHint(false), 6000);
          return () => clearTimeout(t);
        }
      }
    } catch {}
  }, [open]);

  const onDismissHint = () => {
    setShowHint(false);
    try { localStorage.setItem('kydChatHintDismissed', '1'); } catch {}
  };

  const header = useMemo(() => (
    <div className={'flex items-center justify-between px-3 py-3 border-b'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)' }}>
      <div>
        <div className={'text-md font-semibold'} style={{ color: 'var(--text-main)' }}>{title}</div>
      </div>
      <button aria-label={'Collapse chat sidebar'} onClick={() => setOpen(false)} className={'p-1 rounded hover:opacity-80'}>
        <FiX size={16} style={{ color: 'var(--text-secondary)' }} />
      </button>
    </div>
  ), [title]);

  // Prevent background scroll on mobile when open fullscreen
  useEffect(() => {
    if (!isMobile) return;
    const original = document.body.style.overflow;
    document.body.style.overflow = open ? 'hidden' : original;
    return () => { document.body.style.overflow = original; };
  }, [isMobile, open]);

  // Persist sidebar UI state
  useEffect(() => {
    try { localStorage.setItem('kydChatSidebarOpen', open ? '1' : '0'); } catch {}
  }, [open]);
  useEffect(() => {
    try { localStorage.setItem('kydChatSidebarWidth', String(width)); } catch {}
  }, [width]);
  useEffect(() => {
    try { localStorage.setItem('kydChatCollapsedTop', String(tabTop)); } catch {}
  }, [tabTop]);

  // ESC collapses when open
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && open) setOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  // Header offset handling to keep chat below any sticky header in host app
  useEffect(() => {
    if (headerOffset === 'none') {
      setHeaderTop(0);
      setTabTop(t => Math.max(16, t));
      return;
    }
    if (typeof headerOffset === 'number' && Number.isFinite(headerOffset)) {
      const h = Math.max(0, Math.floor(headerOffset));
      setHeaderTop(h);
      setTabTop(t => Math.max(h + 16, t));
      return;
    }
    const measure = () => {
      const el = document.querySelector('header');
      const h = el ? Math.floor(el.getBoundingClientRect().height) : 0;
      setHeaderTop(h);
      setTabTop(t => Math.max(h + 16, t));
    };
    measure();
    window.addEventListener('resize', measure);
    window.addEventListener('scroll', measure, { passive: true });
    return () => {
      window.removeEventListener('resize', measure);
      window.removeEventListener('scroll', measure);
    };
  }, [headerOffset]);

  // Drag to resize (left edge of sidebar)
  useEffect(() => {
    const onMove = (e: MouseEvent) => {
      if (!draggingResize) return;
      const clientX = e.clientX;
      const vw = window.innerWidth;
      const newWidth = Math.min(maxWidth, Math.max(minWidth, vw - clientX));
      setWidth(newWidth);
      e.preventDefault();
    };
    const onUp = () => {
      if (draggingResize) setDraggingResize(false);
      document.body.style.cursor = '';
      document.body.style.userSelect = '';
    };
    if (draggingResize) {
      window.addEventListener('mousemove', onMove);
      window.addEventListener('mouseup', onUp);
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
    }
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, [draggingResize, maxWidth]);

  // Drag collapsed tab vertically
  useEffect(() => {
    const onMove = (e: MouseEvent) => {
      if (!draggingTab) return;
      const delta = e.clientY - dragStartYRef.current;
      if (Math.abs(delta) > 3) tabDraggedRef.current = true;
      const minTop = headerTop + 16;
      const next = Math.max(minTop, Math.min(window.innerHeight - 160 - 16, startTopRef.current + delta));
      setTabTop(next);
      e.preventDefault();
    };
    const onUp = () => setDraggingTab(false);
    if (draggingTab) {
      window.addEventListener('mousemove', onMove);
      window.addEventListener('mouseup', onUp);
      document.body.style.userSelect = 'none';
    }
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
      if (!draggingTab) document.body.style.userSelect = '';
    };
  }, [draggingTab]);

  const nameForCopy = (developerName && developerName.trim().length > 0) ? developerName : 'this developer';
  const starterQuestions: string[] = [
    `Tell me about ${nameForCopy}'s experience with Python.`,
    `What are ${nameForCopy}'s strongest technical areas?`,
    `Are there any risk or sanctions flags for ${nameForCopy}?`
  ];

  const onStarterClick = (q: string) => {
    if (!open) setOpen(true);
    if (!sending) {
      // Populate input for UI and send using explicit text to avoid async state issues
      setInput(q);
      sendMessage(q);
    }
  };

  if (!hasMounted) return null;

  const ui = (
    <div className={'fixed z-50'} aria-live={'polite'} style={{ zIndex: 9999 }}>
      {/* Collapsed trigger */}
      {!open && (
        isMobile ? (
          <div style={{ position: 'fixed', right: 16, bottom: 16, zIndex: 9999 }}>
            <button
              aria-label={'Open chat'}
              aria-expanded={open}
              onClick={() => setOpen(true)}
              className={'shadow-lg border rounded-full flex items-center justify-center transition hover:opacity-90'}
              style={{ width: 56, height: 56, background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}
            >
              <FiMessageSquare size={22} style={{ color: 'var(--text-main)' }} />
            </button>
            {showHint && (
              <button onClick={() => { setOpen(true); onDismissHint(); }} className={'absolute right-full mr-2 bottom-1/2 translate-y-1/2'}>
                <div className={'px-2 py-1 rounded shadow border'}
                     style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
                  <span className={'text-[10px]'} style={{ color: 'var(--text-main)' }}>{hintText}</span>
                </div>
              </button>
            )}
          </div>
        ) : (
          <div style={{ position: 'fixed', right: 0, top: Math.max(headerTop + 16, tabTop), height: 160, width: 44, overflow: 'hidden' }}>
            <button
              aria-label={'Open chat sidebar'}
              aria-expanded={open}
              onMouseDown={(e) => { setDraggingTab(true); dragStartYRef.current = e.clientY; startTopRef.current = tabTop; tabDraggedRef.current = false; }}
              onMouseUp={(e) => { e.preventDefault(); const dragged = tabDraggedRef.current; tabDraggedRef.current = false; setDraggingTab(false); if (!dragged) setOpen(true); }}
              className={'h-full w-full shadow-lg border rounded-l-lg flex flex-col items-center justify-between transition hover:opacity-90'}
              style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', cursor: draggingTab ? 'grabbing' : 'grab' }}
            >
              <FiMessageSquare size={18} style={{ color: 'var(--text-main)', marginTop: 8 }} />
              <span style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', color: 'var(--text-secondary)', fontSize: 12, letterSpacing: 1 }}>Chat</span>
              <FiChevronRight size={16} style={{ color: 'var(--text-secondary)', marginBottom: 8 }} />
            </button>
            {showHint && (
              <button onClick={() => { setOpen(true); onDismissHint(); }} className={'absolute -left-2 -top-8 group max-w-xs text-left'}>
                <div className={'px-2 py-1 rounded shadow border'}
                     style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
                  <span className={'text-[10px]'} style={{ color: 'var(--text-main)' }}>{hintText}</span>
                </div>
              </button>
            )}
          </div>
        )
      )}

      {/* Expanded panel */}
      {open && (
        <aside
          role={'complementary'}
          aria-label={'Chat sidebar'}
          style={isMobile ? { position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, width: '100vw', zIndex: 10000 } : { position: 'fixed', top: headerTop, right: 0, bottom: 0, width, maxWidth: '92vw', zIndex: 9999 }}
          className={'shadow-xl border flex flex-col overflow-hidden'}
        >
          {/* Left-edge resizer (desktop only) */}
          {!isMobile && (
            <div
              onMouseDown={(e) => { setDraggingResize(true); dragStartXRef.current = e.clientX; startWidthRef.current = width; }}
              aria-hidden={'true'}
              style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 6, cursor: 'col-resize', zIndex: 1 }}
            />
          )}
          {/* Panel chrome */}
          <div style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', height: '100%', display: 'flex', flexDirection: 'column' }} className={'bg-[var(--content-card-background)] border-l'}>
            {header}
            <div className={'flex-1 flex flex-col'} style={{ minHeight: 0 }}>
              <div className={'flex-1'} style={{ minHeight: 0 }}>
                <MainContainer style={{ height: '100%', position: 'relative', background: 'var(--content-card-background)', border: 'none'}}>
                  <ChatContainer style={{ height: '100%', border: 'none'}}>
                    <MessageList typingIndicator={undefined} autoScrollToBottom>
                    {messages.length === 0 && (
                      <div className={'px-3 py-2'}>
                        <div className={'text-xs mb-2'} style={{ color: 'var(--text-secondary)' }}>Try asking:</div>
                        <div className={'flex flex-wrap gap-2'}>
                          {starterQuestions.map((q, i) => (
                            <button
                              key={i}
                              type={'button'}
                              onClick={() => onStarterClick(q)}
                              className={'px-2 py-2 text-start rounded-lg border text-xs hover:text-[var(--icon-accent)] transition bg-[var(--bubble-background)] text-[var(--bubble-foreground)] border-[var(--icon-button-secondary)]'}
                            >
                              {q}
                            </button>
                          ))}
                        </div>
                      </div>
                    )}
                    {messages
                      .filter(m => !(m.role === 'assistant' && (m.content || '').trim().length === 0))
                      .map(m => (
                        <Message key={m.id} model={{
                          message: m.content,
                          sender: m.role === 'user' ? 'You' : 'KYD',
                          direction: m.role === 'user' ? 'outgoing' : 'incoming',
                          position: 'single'
                        }} />
                      ))}
                    {(() => {
                      const last = messages[messages.length - 1];
                      const isAssistantPlaceholder = sending && last && last.role === 'assistant' && (last.content || '').trim().length === 0;
                      if (!isAssistantPlaceholder) return null;
                      return (
                        <div className={'mx-3 my-1'}>
                          <div style={{
                            background: 'var(--bubble-background)',
                            color: 'var(--bubble-foreground)',
                            border: '1px solid var(--icon-button-secondary)',
                            borderRadius: 12,
                            padding: '8px 12px',
                            display: 'inline-block'
                          }}>
                            <span className={'kyd-typing-dots'}>
                              <span />
                              <span />
                              <span />
                            </span>
                          </div>
                        </div>
                      );
                    })()}
                    {(() => {
                      const last = [...messages].reverse().find(mm => mm.role === 'assistant');
                      const evidence = last ? tryParseEvidence(last.content) : null;
                      return evidence ? (
                        <div className={'mx-2'}>
                          <EvidenceBlock data={evidence} />
                        </div>
                      ) : null;
                    })()}
                  </MessageList>
                </ChatContainer>
              </MainContainer>
              </div>
              <form onSubmit={(e) => { e.preventDefault(); if (!sending && input.trim()) sendMessage(); }}>
                <div className={'flex items-end gap-2 p-2 border-t'} style={{ borderColor: 'var(--icon-button-secondary)', background: 'var(--content-card-background)', paddingBottom: isMobile ? 'max(8px, env(safe-area-inset-bottom))' : undefined }}>
                  <input
                    aria-label={'Type your message'}
                    className={'flex-1 px-3 py-2 rounded kyd-chat-input'}
                    placeholder={'Ask anything about the developer…'}
                    value={input}
                    onChange={e => setInput(e.target.value)}
                  />
                  {sending ? (
                    <button
                      type={'button'}
                      onClick={() => cancel()}
                      aria-label={'Stop generating'}
                      className={'rounded-full flex items-center justify-center transition-opacity'}
                      style={{ width: 40, height: 40, background: 'var(--text-main)' }}
                    >
                      <FiSquare size={18} style={{ color: 'var(--content-card-background)' }} />
                    </button>
                  ) : (
                    <button
                      type={'submit'}
                      aria-label={'Send message'}
                      disabled={!input.trim()}
                      className={'rounded-full flex items-center justify-center transition-opacity disabled:opacity-50'}
                      style={{ width: 40, height: 40, background: input.trim() ? 'var(--text-main)' : 'var(--icon-button-secondary)' }}
                    >
                      <FiSend size={18} style={{ color: input.trim() ? 'var(--content-card-background)' : 'var(--text-secondary)' }} />
                    </button>
                  )}
                </div>
              </form>
            </div>
          </div>
        </aside>
      )}
    </div>
  );

  return typeof document !== 'undefined' ? createPortal(ui, document.body) : ui;
}