import { useEffect, useState } from 'react';
import { channelAccessApi, type ChannelMember } from '@/core-bridge/channelAccess';
import { errorMessage } from '@/core-bridge/errors';
import type { RoleInfo } from '@/core-bridge/types';
import { PERMISSIONS, ROLE_COLORS } from '@/lib/roles';
import { useToast } from '@/store/toast';
import { useWorkspace } from '@/store/workspace';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import styles from './RolesEditor.module.css';

const COLOR_LABEL = { gray: '灰', blue: '蓝', green: '绿', amber: '黄', red: '红', purple: '紫' } as const;

function RoleForm({ role, members, onDone }: { role?: RoleInfo; members: ChannelMember[]; onDone: (id?: string) => void }) {
  const people = useWorkspace((s) => s.people);
  const createRole = useWorkspace((s) => s.createRole);
  const updateRole = useWorkspace((s) => s.updateRole);
  const deleteRole = useWorkspace((s) => s.deleteRole);
  const setRoleMembers = useWorkspace((s) => s.setRoleMembers);
  const [name, setName] = useState(role?.name ?? '');
  const [prefix, setPrefix] = useState(role?.prefix ?? '');
  const [suffix, setSuffix] = useState(role?.suffix ?? '');
  const [color, setColor] = useState<string>(role?.color ?? 'gray');
  const [permissions, setPermissions] = useState<ReadonlySet<string>>(new Set(role?.permissions));
  const [chosen, setChosen] = useState<ReadonlySet<string>>(new Set(role?.members));
  const [busy, setBusy] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const toggle = (set: ReadonlySet<string>, id: string) => { const next = new Set(set); if (next.has(id)) next.delete(id); else next.add(id); return next; };

  async function run(task: () => Promise<string | undefined>) {
    setBusy(true);
    try { onDone(await task()); }
    catch (cause) { useToast.getState().push({ kind: 'error', text: `操作失败：${errorMessage(cause)}` }); }
    finally { setBusy(false); }
  }
  const save = () => run(async () => {
    const request = { name: name.trim(), prefix: prefix.trim() || null, suffix: suffix.trim() || null, color, permissions: [...permissions] };
    let id = role?.id;
    if (id) await updateRole(id, request); else id = await createRole(request);
    await setRoleMembers(id, [...chosen]);
    useToast.getState().push({ kind: 'ok', text: '身份组已保存' });
    return id;
  });
  const remove = () => run(async () => { if (role) await deleteRole(role.id); return undefined; });
  const sample = `${prefix.trim()}${prefix.trim() ? ' ' : ''}你的名字${suffix.trim() ? ' ' : ''}${suffix.trim()}`;

  return <form className={styles.form} onSubmit={(event) => { event.preventDefault(); if (name.trim()) void save(); }}>
    <label className={styles.field}>名称
      <input maxLength={48} value={name} placeholder="例如：管理组" onChange={(event) => setName(event.target.value)} /></label>
    <div className={styles.pair}>
      <label className={styles.field}>前缀（可选）
        <input maxLength={12} value={prefix} placeholder="例如：【组长】" onChange={(event) => setPrefix(event.target.value)} /></label>
      <label className={styles.field}>后缀（可选）
        <input maxLength={12} value={suffix} placeholder="例如：管理员" onChange={(event) => setSuffix(event.target.value)} /></label>
    </div>
    <div className={styles.field}>颜色 · 聊天里显示为 <b>{sample}</b>
      <div className={styles.colors} role="radiogroup" aria-label="标签颜色">
        {ROLE_COLORS.map((item) => <button key={item} type="button" role="radio" aria-checked={color === item} className={`${styles.swatch} ${styles[item]}`}
          onClick={() => setColor(item)}>{COLOR_LABEL[item]}</button>)}
      </div>
    </div>
    <fieldset className={styles.group}><legend>权限</legend>
      {PERMISSIONS.map((item) => <label key={item.id} className={styles.check}>
        <input type="checkbox" checked={permissions.has(item.id)} onChange={() => setPermissions(toggle(permissions, item.id))} />
        <span>{item.label}<small>{item.hint}</small></span></label>)}
    </fieldset>
    <fieldset className={styles.group}><legend>成员 · {chosen.size}</legend>
      {members.length ? members.map((member) => <label key={member.username} className={styles.check}>
        <input type="checkbox" checked={chosen.has(member.username)} onChange={() => setChosen(toggle(chosen, member.username))} />
        <span>{people[member.username]?.displayName || member.username}<small>{member.username}</small></span></label>)
        : <p className={styles.empty}>还没有其他成员。成员接受邀请后可以加入身份组。</p>}
    </fieldset>
    <div className={styles.actions}>
      {role ? (confirmDelete
        ? <><Button variant="ghost" disabled={busy} onClick={() => setConfirmDelete(false)}>先不删</Button><Button variant="danger" disabled={busy} onClick={() => { void remove(); }}>确认删除</Button></>
        : <Button variant="ghost" icon="trash" disabled={busy} onClick={() => setConfirmDelete(true)}>删除身份组</Button>) : null}
      <Button type="submit" variant="primary" disabled={busy || !name.trim()}>{busy ? '保存中…' : role ? '保存' : '创建身份组'}</Button>
    </div>
  </form>;
}

/** 空间设置里的「身份组」页:左边是身份组列表,右边是编辑表单 */
export function RolesEditor() {
  const channelId = useWorkspace((s) => s.channel?.id);
  const roles = useWorkspace((s) => s.roles);
  const [members, setMembers] = useState<ChannelMember[]>([]);
  const [selected, setSelected] = useState<string>('');
  useEffect(() => {
    if (!channelId) return;
    let active = true;
    channelAccessApi.members(channelId).then((rows) => { if (active) setMembers(rows.filter((row) => row.role !== 'owner')); }).catch(() => {});
    return () => { active = false; };
  }, [channelId]);
  const role = roles.find((item) => item.id === selected);
  const first = role ?? (selected === '' ? roles[0] : undefined);
  const creating = !first;

  return <div className={styles.layout}>
    <ul className={styles.list} aria-label="身份组">
      {roles.map((item) => <li key={item.id}><button type="button" aria-current={first?.id === item.id} onClick={() => setSelected(item.id)}>
        <Icon name="users" size={16} /><span>{item.name}</span><small>{item.members.length}</small></button></li>)}
      <li><button type="button" className={styles.add} aria-current={creating} onClick={() => setSelected('new')}><Icon name="plus" size={16} /><span>新建身份组</span></button></li>
    </ul>
    <RoleForm key={first?.id ?? 'new'} role={first} members={members} onDone={(id) => setSelected(id ?? '')} />
  </div>;
}