import { useEffect, useRef, useState } from 'react';
import { useAuthStore } from '../stores/authStore';
import * as api from '../api/client';
import { MailboxIcon, SpinnerIcon } from './icons';

/** 首次初始化向导：系统无任何用户时展示，创建首个管理员 */
export default function SetupPage({ onDone }: { onDone: () => void }) {
  const bootstrap = useAuthStore(s => s.bootstrap);
  const [username, setUsername] = useState('admin');
  const [displayName, setDisplayName] = useState('');
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const nameRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    nameRef.current?.focus();
  }, []);

  const mismatch = confirm !== '' && password !== confirm;
  const ok =
    username.trim().length >= 2 &&
    password.length >= 8 &&
    !mismatch &&
    !busy;

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!ok) return;
    setBusy(true);
    setError(null);
    try {
      await api.setupAdmin({
        username: username.trim().toLowerCase(),
        password,
        display_name: displayName.trim()
      });
      // 初始化后直接登录（后端已经种了 cookie），拉取用户态
      await bootstrap();
      onDone();
    } catch (err) {
      setError(err instanceof Error ? err.message : String(err));
      setBusy(false);
    }
  };

  // 卡片高约 371px，比横屏手机（或软键盘弹出后）的可视高度还高。
  //
  // 居中用卡片自己的 `my-auto` 而**不是**容器的 `items-center`：后者在内容超高时
  // 会让卡片上下同时溢出，而溢出到顶部那段滚不到（scrollTop 最小是 0）——
  // 实测 568x280 下「登录」按钮完全在视口外，光加 overflow-y-auto 也够不着。
  // auto margin 在空间不足时自动退化为 0，于是矮屏变成正常的顶对齐可滚布局。
  return (
    <div className="h-full overflow-y-auto flex justify-center bg-slate-100">
      <div className="w-[420px] max-w-[92vw] shrink-0 my-auto bg-white rounded-xl shadow-sm border border-gray-200 p-6 sm:p-8">
        <div className="flex flex-col items-center mb-6">
          <div className="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
            <MailboxIcon className="w-6 h-6" />
          </div>
          <h1 className="mt-3 text-base font-semibold text-gray-900">初始化系统</h1>
          <p className="mt-1 text-xs text-gray-500 text-center">
            这是系统首次启动。创建一个管理员账号以开始使用 AgentMail。
          </p>
        </div>

        <form onSubmit={submit} className="space-y-3">
          <div>
            <label className="block text-[11px] font-medium text-gray-500 mb-1">
              管理员用户名 <span className="text-red-400">（即三维地址的 name 位）</span>
            </label>
            <input
              ref={nameRef}
              value={username}
              onChange={e => setUsername(e.target.value)}
              placeholder="admin"
              spellCheck={false}
              className="w-full text-sm font-mono border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
            />
            <p className="mt-1 text-[10px] text-gray-400">
              小写字母数字 . _ -，2-64 位；后续可以 `admin@.new` 形式作为收件人
            </p>
          </div>

          <div>
            <label className="block text-[11px] font-medium text-gray-500 mb-1">显示名</label>
            <input
              value={displayName}
              onChange={e => setDisplayName(e.target.value)}
              placeholder="系统管理员"
              className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
            />
          </div>

          <div>
            <label className="block text-[11px] font-medium text-gray-500 mb-1">
              密码 <span className="text-red-400">（至少 8 位）</span>
            </label>
            <input
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              autoComplete="new-password"
              className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
            />
          </div>

          <div>
            <label className="block text-[11px] font-medium text-gray-500 mb-1">确认密码</label>
            <input
              type="password"
              value={confirm}
              onChange={e => setConfirm(e.target.value)}
              autoComplete="new-password"
              className={`w-full text-sm border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 ${
                mismatch ? 'border-red-300' : 'border-gray-300 focus:border-blue-400'
              }`}
            />
            {mismatch && <p className="mt-1 text-[10px] text-red-500">两次输入的密码不一致</p>}
          </div>

          {error && (
            <p className="text-xs text-red-600 bg-red-50 border border-red-100 rounded-md px-2.5 py-1.5">
              {error}
            </p>
          )}

          <button
            type="submit"
            disabled={!ok}
            className="w-full inline-flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
          >
            {busy && <SpinnerIcon className="w-3.5 h-3.5" />}
            {busy ? '初始化中' : '创建管理员并进入'}
          </button>
        </form>
      </div>
    </div>
  );
}