import { Fragment, useEffect, useRef, useState, type KeyboardEvent } from 'react';
import { Button } from '@/ui/Button';
import { useWorkspace } from '@/store/workspace';
import type { Item } from '@/core-bridge/types';
import { formatDate } from '@/lib/format';
import { ChatMessage } from './ChatMessage';
import styles from './ChatPane.module.css';

interface Props { threadName: string; ids: string[]; enabled: boolean; onSend: (text: string) => Promise<void>; onDelete: (id: string) => void; onOpenFile: (id: string) => void; onFiles?: (files: File[]) => void }

export function ChatPane({ threadName, ids, enabled, onSend, onDelete, onOpenFile, onFiles }: Props) {
  const [text, setText] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const messages = useRef<HTMLDivElement>(null);
  const fileInput = useRef<HTMLInputElement>(null);
  const byId = useWorkspace((s) => s.byId);
  const chronological = ids.slice().reverse();

  useEffect(() => { messages.current?.scrollTo({ top: messages.current.scrollHeight }); }, [chronological.length]);

  async function submit() {
    const value = text.trim();
    if (!value || busy || !enabled) return;
    setBusy(true);
    setError('');
    try { await onSend(value); setText(''); }
    catch (cause) { setError(cause instanceof Error ? cause.message : '发送失败'); }
    finally { setBusy(false); }
  }

  function keyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
    if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); void submit(); }
  }

  return (
    <section className={styles.pane} aria-label={`${threadName} 聊天`}>
      <div className={styles.head}><strong>{threadName}</strong><span>频道聊天</span></div>
      <div className={styles.messages} ref={messages} aria-live="polite">
        {chronological.length === 0 ? <p className={styles.empty}>在这里发送消息或文件，成员可以看到你的名称和头像。</p> : null}
        {(() => {
          let previous: Item | undefined;
          return chronological.map((id) => {
            const item = byId[id];
            if (!item) return null;
            const dateKey = new Date(item.ts).toDateString();
            const previousDate = previous ? new Date(previous.ts).toDateString() : undefined;
            const showDate = dateKey !== previousDate;
            const sameSender = previous && (previous.author?.username ?? previous.deviceId) === (item.author?.username ?? item.deviceId);
            const grouped = Boolean(sameSender && !showDate && item.ts - previous!.ts < 5 * 60_000);
            previous = item;
            return <Fragment key={id}>
              {showDate ? <div className={styles.dateDivider} role="separator"><span>{formatDate(item.ts)}</span></div> : null}
              <ChatMessage id={id} compact={grouped} onOpenFile={onOpenFile} onDelete={onDelete} />
            </Fragment>;
          });
        })()}
      </div>
      <form className={styles.composer} onSubmit={(event) => { event.preventDefault(); void submit(); }}>
        {onFiles ? <><input ref={fileInput} type="file" multiple hidden onChange={(event) => { if (event.target.files?.length) onFiles([...event.target.files]); event.target.value = ''; }} />
          <Button variant="ghost" icon="clip" label="上传文件到当前频道" disabled={!enabled} onClick={() => fileInput.current?.click()} /></> : null}
        <textarea value={text} disabled={!enabled || busy} rows={2} placeholder={enabled ? '输入消息，Enter 发送，Shift+Enter 换行' : '先创建或加入一个频道'} onChange={(event) => setText(event.target.value)} onKeyDown={keyDown} />
        <Button variant="primary" icon="send" label="发送消息" disabled={!enabled || busy || !text.trim()} onClick={() => void submit()} />
      </form>
      {error ? <p className={styles.error} role="alert">{error}</p> : null}
    </section>
  );
}