import type { ChannelInfo } from '@/core-bridge/types';
import type { ParsedChannelLink } from '@/lib/channelLink';
import { useChannels } from '@/store/channels';
import { Button } from '@/ui/Button';
import { JoinPreview } from './JoinPreview';
import styles from './JoinScreen.module.css';

interface Props {
  link: ParsedChannelLink;
  onJoined: (c: ChannelInfo) => void;
  onCancel: () => void;
}

/** 别人发来的频道链接:整页预览,确认后才加入 */
export function JoinScreen({ link, onJoined, onCancel }: Props) {
  const join = useChannels((s) => s.join);
  return (
    <div className={styles.page}>
      <main className={styles.card}>
        <h1 className={styles.title}>加入频道</h1>
        <JoinPreview link={link} onJoin={join} onJoined={onJoined} onBack={onCancel} backLabel="取消" />
      </main>
    </div>
  );
}

/** 路由里有频道 id,但本机没有这个频道,链接里也没有密钥(例如刷新后 fragment 已被清除) */
export function MissingAccess({ onHome }: { onHome: () => void }) {
  return (
    <div className={styles.page}>
      <main className={styles.card}>
        <h1 className={styles.title}>无法打开此频道</h1>
        <p className={styles.dim}>本机没有这个频道的链接。请使用完整的分享链接(含 # 后面的密钥)重新打开,或扫描对方的二维码。</p>
        <Button variant="primary" onClick={onHome}>回到首页</Button>
      </main>
    </div>
  );
}