import { useChannels } from '@/store/channels';
import { spaceSeqKey, useReadState } from '@/store/readState';
import { useSpaceReads } from './useThreadReads';
import { useAccount } from '@/store/account';
import { useWorkspace } from '@/store/workspace';
import { channelPath, navigate } from '@/app/navigation';
import { Icon } from '@/ui/Icon';
import styles from './SpaceRail.module.css';

interface RailProps { id?: string; onCreate: () => void; onJoin: () => void }

/** 空间切换:桌面是最左一列窄栏,手机是横向一排方块 */
export function SpaceRail({ id, onCreate, onJoin }: RailProps) {
  const channels = useChannels((s) => s.list);
  const username = useAccount((s) => s.username);
  const reads = useReadState((s) => s.reads);
  useSpaceReads(id);
  return <nav className={styles.rail} aria-label="空间列表">
    {channels.map((channel) => {
      const name = channel.name || channel.id.slice(0, 8);
      const fresh = channel.id !== id && channel.lastSeq !== undefined ? Math.max(0, channel.lastSeq - (reads[spaceSeqKey(channel.id)] ?? Infinity)) : 0;
      return <div key={channel.id} className={styles.slot}>
        <button type="button" className={`${styles.space} ${channel.id === id ? styles.current : ''}`}
          aria-current={channel.id === id ? 'page' : undefined} title={name} aria-label={fresh ? `${name}(${fresh} 条新动静)` : name} onClick={() => navigate(channelPath(channel.id))}>
          {channel.avatar ? <img className={styles.avatar} src={channel.avatar} alt="" /> : Array.from(name)[0]?.toLocaleUpperCase()}
        </button>
        {fresh ? <span className={styles.dot} aria-hidden="true">{fresh > 99 ? '99+' : fresh}</span> : null}
      </div>;
    })}
    <button type="button" className={`${styles.space} ${styles.action}`} title="新建空间" aria-label="新建空间" disabled={!username} onClick={onCreate}><Icon name="plus" size={20} /></button>
    <button type="button" className={`${styles.space} ${styles.action}`} title="加入空间" aria-label="加入空间" onClick={onJoin}><Icon name="scan" size={20} /></button>
  </nav>;
}

/** 频道列表顶部:空间名与加密状态。空间设置入口在顶栏 */
export function SpaceHeader() {
  const channel = useWorkspace((s) => s.channel);
  const name = channel?.name || `${channel?.id.slice(0, 8) ?? ''}…`;
  return <div className={styles.header}>
    {channel?.mode === 'raw' ? <span className={styles.raw}>明文</span> : <Icon name="lock" size={14} />}
    {channel?.avatar ? <img className={styles.headerAvatar} src={channel.avatar} alt="" /> : null}
    <strong>{name}</strong>
  </div>;
}