import { useState, type FormEvent } from 'react';
import type { ChannelGroupInfo, ThreadInfo } from '@/core-bridge/types';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Sheet } from '@/ui/Sheet';
import styles from './ThreadSidebar.module.css';

interface Props {
  threads: ThreadInfo[];
  groups: ChannelGroupInfo[];
  selectedThreadId?: string;
  enabled: boolean;
  owner: boolean;
  onHistory: (id: string, chatHistory: boolean, filesHistory: boolean) => Promise<void>;
  onSelectThread: (id: string) => void;
  onCreateThread: (name: string, groupId?: string) => Promise<string>;
  onRenameThread: (id: string, name: string) => Promise<void>;
  onCreateGroup: (name: string) => Promise<string>;
  onRenameGroup: (id: string, name: string) => Promise<void>;
  onDeleteGroup: (id: string) => Promise<void>;
  onGroupThread: (id: string, groupId?: string) => Promise<void>;
}
type Editor = { kind: 'channel' | 'group'; id?: string; groupId?: string };
const UNGROUPED = '__ungrouped__';

export function ThreadSidebar(props: Props) {
  const [edit, setEdit] = useState<Editor>();
  const [name, setName] = useState('');
  const [groupId, setGroupId] = useState('');
  const [chatHistory, setChatHistory] = useState(true);
  const [filesHistory, setFilesHistory] = useState(true);
  const [busy, setBusy] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [error, setError] = useState('');
  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
  const knownGroups = new Set(props.groups.map((group) => group.id));
  const ungrouped = props.threads.filter((thread) => !thread.groupId || !knownGroups.has(thread.groupId));
  function begin(target: Editor, initial = '') {
    setEdit(target); setName(initial); setGroupId(target.groupId ?? ''); setError(''); setConfirmDelete(false);
    const channel = props.threads.find(t => t.id === target.id); setChatHistory(channel?.chatHistory ?? true); setFilesHistory(channel?.filesHistory ?? true);
  }
  function toggle(id: string) { setCollapsed((previous) => { const next = new Set(previous); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }
  function select(id: string) { props.onSelectThread(id); setEdit(undefined); }
  async function removeGroup() {
    if (!edit?.id || busy || !props.enabled) return;
    setBusy(true); setError('');
    try { await props.onDeleteGroup(edit.id); setEdit(undefined); }
    catch (cause) { setError(cause instanceof Error ? cause.message : '删除失败'); }
    finally { setBusy(false); }
  }
  async function submit(event: FormEvent) {
    event.preventDefault(); if (!edit || !name.trim() || busy || !props.enabled) return;
    setBusy(true); setError('');
    try {
      if (edit.kind === 'group') {
        if (edit.id) await props.onRenameGroup(edit.id, name); else await props.onCreateGroup(name);
      } else if (edit.id) {
        const original = props.threads.find((thread) => thread.id === edit.id);
        if (original?.name !== name.trim()) await props.onRenameThread(edit.id, name);
        if ((original?.groupId ?? '') !== groupId) await props.onGroupThread(edit.id, groupId || undefined);
        if (props.owner && (original?.chatHistory !== chatHistory || original?.filesHistory !== filesHistory)) await props.onHistory(edit.id, chatHistory, filesHistory);
      } else props.onSelectThread(await props.onCreateThread(name, groupId || undefined));
      if (groupId) setCollapsed((previous) => { const next = new Set(previous); next.delete(groupId); return next; });
      setEdit(undefined);
    } catch (cause) { setError(cause instanceof Error ? cause.message : '操作失败'); }
    finally { setBusy(false); }
  }
  return <section className={styles.panel} aria-label="空间频道导航">
    <div className={styles.heading}><strong>频道</strong><Button variant="ghost" icon="plus" label="新建频道分组" disabled={!props.enabled || busy} onClick={() => begin({ kind: 'group' })} /></div>
    {(ungrouped.length > 0 || props.groups.length === 0) ? <section className={styles.group} aria-label="未分组频道">
      <div className={styles.groupHeading}>
        <button className={styles.groupToggle} type="button" aria-label="未分组频道" aria-expanded={!collapsed.has(UNGROUPED)} onClick={() => toggle(UNGROUPED)}>
          <Icon name={collapsed.has(UNGROUPED) ? 'chevronRight' : 'chevronDown'} size={14} /><span>未分组</span>
        </button>
        {props.enabled ? <span className={styles.categoryActions}>
          <Button variant="ghost" icon="plus" label="在未分组新建频道" disabled={busy} onClick={() => begin({ kind: 'channel' })} />
        </span> : null}
      </div>
      {!collapsed.has(UNGROUPED) ? <ChannelRows threads={ungrouped} selectedId={props.selectedThreadId} enabled={props.enabled} busy={busy} onSelect={select}
        onEdit={(thread) => begin({ kind: 'channel', id: thread.id, groupId: thread.groupId }, thread.name)} /> : null}
    </section> : null}
    {props.groups.map((group) => {
      const threads = props.threads.filter((thread) => thread.groupId === group.id);
      return <section className={styles.group} aria-label={`频道分组 ${group.name}`} key={group.id}>
        <div className={styles.groupHeading}><button className={styles.groupToggle} type="button" aria-label={`分组 ${group.name}`} aria-expanded={!collapsed.has(group.id)} onClick={() => toggle(group.id)}>
          <Icon name={collapsed.has(group.id) ? 'chevronRight' : 'chevronDown'} size={14} /><span>{group.name}</span>
        </button>{props.enabled ? <span className={styles.categoryActions}>
          <Button variant="ghost" icon="plus" label={`在 ${group.name} 新建频道`} disabled={busy} onClick={() => begin({ kind: 'channel', groupId: group.id })} />
          <Button className={styles.groupMore} variant="ghost" icon="more" label={`分组设置 ${group.name}`} disabled={busy} onClick={() => begin({ kind: 'group', id: group.id }, group.name)} />
        </span> : null}</div>
        {!collapsed.has(group.id) ? <ChannelRows threads={threads} selectedId={props.selectedThreadId} enabled={props.enabled} busy={busy} nested onSelect={select}
          onEdit={(thread) => begin({ kind: 'channel', id: thread.id, groupId: thread.groupId }, thread.name)} /> : null}
        {!collapsed.has(group.id) && !threads.length ? <p className={styles.empty}>此分组还没有频道。</p> : null}
      </section>;
    })}
    {edit ? <Sheet title={`${edit.id ? '设置' : '新建'}${edit.kind === 'group' ? '频道分组' : '频道'}`} onClose={() => { if (!busy) setEdit(undefined); }}>
      <form className={`${styles.channelEditor} ${styles.modalEditor}`} onSubmit={(event) => { void submit(event); }}>
        <label>{edit.kind === 'group' ? '分组名称' : '频道名称'}<input autoFocus disabled={busy} aria-label={edit.kind === 'group' ? '分组名称' : '频道名称'} maxLength={80} value={name} placeholder={edit.kind === 'channel' ? '例如：项目讨论' : '例如：项目组'} onChange={(event) => setName(event.target.value)} /></label>
        {edit.kind === 'channel' ? <label>所属分组<select aria-label="所属分组" disabled={busy} value={groupId} onChange={(event) => setGroupId(event.target.value)}>
          <option value="">未分组</option>{props.groups.map((group) => <option key={group.id} value={group.id}>{group.name}</option>)}
        </select></label> : null}
        {edit.kind === 'channel' && edit.id && props.owner ? <>
          <label className={styles.check}><input type="checkbox" checked={chatHistory} onChange={event => setChatHistory(event.target.checked)} />新成员可读历史聊天</label>
          <label className={styles.check}><input type="checkbox" checked={filesHistory} onChange={event => setFilesHistory(event.target.checked)} />新成员可读历史文件</label>
        </> : null}
        {edit.kind === 'group' && edit.id ? <div className={styles.dangerZone}>
          {confirmDelete ? <>
            <p className={styles.hint}>分组会被删除，其中的频道回到「未分组」，频道和消息都不会丢。</p>
            <div className={styles.groupActions}>
              <Button variant="ghost" disabled={busy} onClick={() => setConfirmDelete(false)}>先不删</Button>
              <Button variant="danger" disabled={busy} onClick={() => { void removeGroup(); }}>确认删除分组</Button>
            </div>
          </> : <Button variant="ghost" icon="trash" disabled={busy} onClick={() => setConfirmDelete(true)}>删除分组</Button>}
        </div> : null}
        {error ? <p className={styles.error} role="alert">{error}</p> : null}
        <div className={`${styles.groupActions} ${styles.modalActions}`}>
          <Button variant="ghost" disabled={busy} onClick={() => setEdit(undefined)}>取消</Button>
          <Button type="submit" variant="primary" disabled={busy || !name.trim()}>{busy ? '保存中…' : edit.id ? '保存' : edit.kind === 'channel' ? '创建频道' : '创建分组'}</Button>
        </div>
      </form>
    </Sheet> : null}
    {!props.threads.length && !props.groups.length ? <p className={styles.empty}>创建一个频道后开始聊天和上传文件。</p> : null}
    {!edit && error ? <p className={styles.error} role="alert">{error}</p> : null}
  </section>;
}

function ChannelRows({ threads, selectedId, enabled, busy, nested = false, onSelect, onEdit }: {
  threads: ThreadInfo[]; selectedId?: string; enabled: boolean; busy: boolean; nested?: boolean; onSelect: (id: string) => void; onEdit: (thread: ThreadInfo) => void;
}) {
  return <ul className={`${styles.threads} ${nested ? styles.nestedThreads : ''}`}>{threads.map((thread) => <li className={`${styles.threadRow} ${thread.id === selectedId ? styles.activeRow : ''}`} key={thread.id}>
    <button className={`${styles.thread} ${thread.id === selectedId ? styles.selected : ''}`} type="button" disabled={busy} aria-current={thread.id === selectedId ? 'page' : undefined}
      onClick={() => onSelect(thread.id)}><span aria-hidden="true">#</span><span>{thread.name}</span></button>
    {enabled ? <Button className={styles.rowActions} variant="ghost" icon="more" disabled={busy} label={`频道设置 ${thread.name}`} onClick={() => onEdit(thread)} /> : null}
  </li>)}</ul>;
}