import { Cloud, Laptop, ShieldCheck, X } from 'lucide-react';
import { projectDomainConnectionSteps, projectDomainTrustSource, type DomainAccessProjection } from '../domain-connection';

interface Props {
  access: DomainAccessProjection;
  open: boolean;
  onClose: () => void;
  onEnterRuntime: () => void;
  onOpenCodeChannel: () => void;
}

export function DomainConnectionSheet({ access, open, onClose, onEnterRuntime, onOpenCodeChannel }: Props) {
  if (!open) return null;
  const steps = projectDomainConnectionSteps(access);

  return (
    <div className="storage-sheet-backdrop" role="presentation" onMouseDown={event => {
      if (event.target === event.currentTarget) onClose();
    }}>
      <section className="storage-sheet domain-connection-sheet" role="dialog" aria-modal="true" aria-labelledby="domain-connection-title">
        <header className="storage-sheet-header">
          <div>
            <small>DOM-FIFTH-0001</small>
            <h2 id="domain-connection-title">接入第五域 · 光湖本源域</h2>
          </div>
          <button className="icon-button" onClick={onClose} aria-label="关闭域接入状态"><X aria-hidden="true" /></button>
        </header>

        <p className="domain-connection-lead">进入域不是切换页面。系统必须验证账户、登记节点、目标域授权、会话能力和在线回执。</p>
        <p className="domain-connection-boundary">{projectDomainTrustSource(access)}</p>

        <div className="domain-node-modes" aria-label="支持的节点类型">
          <article><Laptop aria-hidden="true" /><span><strong>本地终端节点</strong><small>使用当前联网电脑承载本地工作；正式节点登记尚未开放。</small></span></article>
          <article><Cloud aria-hidden="true" /><span><strong>云常驻节点</strong><small>服务器可持续在线；代码频道登录不等于取得域运行权限。</small></span></article>
        </div>

        <ol className="domain-connection-steps">
          {steps.map((step, index) => (
            <li key={step.id} data-state={step.state}>
              <span>{step.state === 'verified' ? <ShieldCheck aria-hidden="true" /> : index + 1}</span>
              <div><strong>{step.label}</strong><small>{step.detail}</small></div>
              <em>{step.state === 'verified' ? '已验证' : step.state === 'checking' ? '核对中' : '待完成'}</em>
            </li>
          ))}
        </ol>

        <p className="domain-connection-boundary">代码频道账号只用于仓库与同步，是节点身份的辅助证明之一，不能单独签发第五域权限。</p>

        <footer className="storage-sheet-footer">
          <button className="secondary-button" onClick={onOpenCodeChannel}>代码频道与同步设置</button>
          <span />
          <button className="secondary-button" onClick={onClose}>返回门厅</button>
          <button className="primary-button" onClick={onEnterRuntime} disabled={!access.runtimeReady}>
            {access.runtimeReady ? '进入第五域运行体' : '等待可信域接入'}
          </button>
        </footer>
      </section>
    </div>
  );
}