import { type FormEvent, useEffect, useId, useState } from "react";

import "./account-settings.css";

interface SettingsPayload {
  account: { email: string; status: "active" };
  csrf_token: string;
  local_data: {
    backup_enabled: false;
    capacity_status: "normal" | "warning" | "critical" | "full" | "unavailable";
    hard_limit_bytes: number;
    location: "configured_local_data_root";
    managed_content_bytes: number;
    migration_supported: false;
  };
  profile: { creator_name: string; social_id: string };
}

function formatBytes(bytes: number) {
  if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
  if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
  return `${Math.max(0, bytes)} B`;
}

function capacityLabel(status: SettingsPayload["local_data"]["capacity_status"]) {
  if (status === "full") return "本机容量已满";
  if (status === "unavailable") return "本机数据暂不可写";
  if (status === "critical") return "本机容量接近上限";
  if (status === "warning") return "本机容量需要关注";
  return "本机容量正常";
}

export function AccountSettingsPage() {
  const creatorNameId = useId();
  const socialId = useId();
  const confirmationId = useId();
  const deletionCodeId = useId();
  const [settings, setSettings] = useState<SettingsPayload>();
  const [creatorName, setCreatorName] = useState("");
  const [socialHandle, setSocialHandle] = useState("");
  const [loadingError, setLoadingError] = useState(false);
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState(false);
  const [saved, setSaved] = useState(false);
  const [deletionOpen, setDeletionOpen] = useState(false);
  const [deletionId, setDeletionId] = useState<string>();
  const [deletionCode, setDeletionCode] = useState("");
  const [confirmation, setConfirmation] = useState("");
  const [sendingCode, setSendingCode] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [deletionError, setDeletionError] = useState(false);

  useEffect(() => {
    let active = true;
    void fetch("/api/v1/account/settings", { credentials: "same-origin" })
      .then(async (response) => {
        if (!response.ok) throw new Error("settings_load_failed");
        return response.json() as Promise<SettingsPayload>;
      })
      .then((payload) => {
        if (!active) return;
        setSettings(payload);
        setCreatorName(payload.profile.creator_name);
        setSocialHandle(payload.profile.social_id);
      })
      .catch(() => {
        if (active) setLoadingError(true);
      });
    return () => { active = false; };
  }, []);

  async function saveProfile(event: FormEvent) {
    event.preventDefault();
    if (!settings || saving || !creatorName.trim() || !socialHandle.trim()) return;
    setSaving(true);
    setSaveError(false);
    setSaved(false);
    try {
      const response = await fetch("/api/v1/account/settings/profile", {
        body: JSON.stringify({ creator_name: creatorName, social_id: socialHandle }),
        credentials: "same-origin",
        headers: { "Content-Type": "application/json", "X-CSRF-Token": settings.csrf_token },
        method: "PUT",
      });
      if (!response.ok) throw new Error("profile_save_failed");
      setSaved(true);
    } catch {
      setSaveError(true);
    } finally {
      setSaving(false);
    }
  }

  async function sendDeletionCode() {
    if (!settings || sendingCode || deleting) return;
    setSendingCode(true);
    setDeletionError(false);
    try {
      const response = await fetch("/api/v1/account/deletion/send", {
        credentials: "same-origin",
        headers: { "X-CSRF-Token": settings.csrf_token },
        method: "POST",
      });
      const body = await response.json() as { deletion_id?: string };
      if (!response.ok || !body.deletion_id) throw new Error("deletion_code_failed");
      setDeletionId(body.deletion_id);
    } catch {
      setDeletionError(true);
    } finally {
      setSendingCode(false);
    }
  }

  async function completeDeletion(event: FormEvent) {
    event.preventDefault();
    if (!settings || !deletionId || deletionCode.length !== 6 || confirmation !== "注销账号" || deleting) return;
    setDeleting(true);
    setDeletionError(false);
    try {
      const response = await fetch("/api/v1/account/deletion/complete", {
        body: JSON.stringify({ confirmation, deletion_id: deletionId, verification_code: deletionCode }),
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
          "Idempotency-Key": crypto.randomUUID().replaceAll("-", "") + crypto.randomUUID().replaceAll("-", ""),
          "X-CSRF-Token": settings.csrf_token,
        },
        method: "POST",
      });
      if (!response.ok) throw new Error("account_deletion_failed");
      window.location.assign("/");
    } catch {
      setDeletionError(true);
      setDeleting(false);
    }
  }

  function closeDeletion() {
    if (deleting) return;
    setDeletionOpen(false);
    setDeletionId(undefined);
    setDeletionCode("");
    setConfirmation("");
    setDeletionError(false);
  }

  if (!settings && !loadingError) {
    return <main className="settings-loading" aria-live="polite">正在读取设置</main>;
  }

  if (!settings) {
    return (
      <main className="settings-loading">
        <p role="alert">设置暂时无法读取。</p>
        <button onClick={() => window.location.reload()} type="button">重新读取</button>
      </main>
    );
  }

  const capacityPercent = Math.min(100, Math.round((settings.local_data.managed_content_bytes / settings.local_data.hard_limit_bytes) * 100));

  return (
    <main className="settings-page">
      <header className="settings-header">
        <a className="settings-brand" href="/app">DADA</a>
        <nav aria-label="账号导航">
          <a href="/app">创作工作台</a>
          <span aria-current="page">设置</span>
        </nav>
      </header>

      <div className="settings-title">
        <p>ACCOUNT / LOCAL DATA</p>
        <h1>设置与本机数据</h1>
      </div>

      <section className="settings-section" aria-labelledby="profile-title">
        <div className="settings-section-heading">
          <h2 id="profile-title">个人资料</h2>
          <p>用于生成内容中的署名信息。</p>
        </div>
        <form className="settings-form" onSubmit={saveProfile}>
          <label htmlFor={creatorNameId}>创作署名</label>
          <input id={creatorNameId} maxLength={80} onChange={(event) => setCreatorName(event.target.value)} value={creatorName} />
          <label htmlFor={socialId}>社交 ID</label>
          <input id={socialId} maxLength={80} onChange={(event) => setSocialHandle(event.target.value)} value={socialHandle} />
          {saveError ? <p className="settings-error" role="alert">保存失败，当前输入已保留，请重试。</p> : null}
          {saved ? <p className="settings-saved" role="status">资料已保存。</p> : null}
          <button className="settings-primary" disabled={saving || !creatorName.trim() || !socialHandle.trim()} type="submit">
            {saving ? "保存中" : "保存资料"}
          </button>
        </form>
      </section>

      <section className="settings-section" aria-labelledby="account-title">
        <div className="settings-section-heading">
          <h2 id="account-title">账号</h2>
          <p>邮箱仅用于验证码认证。</p>
        </div>
        <dl className="settings-definition">
          <div><dt>邮箱</dt><dd>{settings.account.email}</dd></div>
          <div><dt>状态</dt><dd>正常</dd></div>
          <div><dt>登录方式</dt><dd>邮箱验证码</dd></div>
        </dl>
      </section>

      <section className="settings-section settings-local" aria-labelledby="local-title">
        <div className="settings-section-heading">
          <h2 id="local-title">本机数据</h2>
          <p>逻辑位置：Dada 配置的本机数据目录</p>
        </div>
        <div className="settings-capacity" data-status={settings.local_data.capacity_status}>
          <div>
            <strong>{capacityLabel(settings.local_data.capacity_status)}</strong>
            <span>{formatBytes(settings.local_data.managed_content_bytes)} / {formatBytes(settings.local_data.hard_limit_bytes)}</span>
          </div>
          <div className="settings-capacity-track" role="progressbar" aria-label="本机数据容量" aria-valuemax={100} aria-valuemin={0} aria-valuenow={capacityPercent}>
            <span style={{ width: `${capacityPercent}%` }} />
          </div>
        </div>
        <p className="settings-fixed-notice">测试数据仅保存在本机，不自动备份，也不会迁移到正式系统。</p>
        <p className="settings-detail">数据依赖当前 Windows 用户登录和文件系统权限，不提供 Dada 应用层加密或云备份。机器损坏、重装或删除本机数据目录后无法恢复。</p>
      </section>

      <section className="settings-danger" aria-labelledby="danger-title">
        <div>
          <h2 id="danger-title">注销账号</h2>
          <p>注销会立即删除账号资料、未使用点数和全部作品，并使所有会话失效。</p>
        </div>
        <button className="settings-danger-button" onClick={() => setDeletionOpen(true)} type="button">注销账号</button>
      </section>

      {deletionOpen ? (
        <div className="settings-dialog-backdrop">
          <section
            aria-labelledby="delete-dialog-title"
            aria-modal="true"
            className="settings-dialog"
            onKeyDown={(event) => {
              if (event.key === "Escape" && !deleting) closeDeletion();
            }}
            role="dialog"
          >
            <header>
              <div>
                <p>DANGER ZONE</p>
                <h2 id="delete-dialog-title">确认注销账号</h2>
              </div>
              <button aria-label="关闭注销确认" autoFocus disabled={deleting} onClick={closeDeletion} type="button">×</button>
            </header>
            <div className="settings-dialog-body">
              <p className="settings-dialog-warning">账号、资料、项目、图片、坐标、成品和未使用点数将立即删除且不可恢复。</p>
              <p>匿名生成与点数事件最多保留 180 天，只保留随机主体、时间、模型、结果、错误类别和点数变化；不会保留邮箱或作品内容。</p>
              <button className="settings-code-button" disabled={sendingCode || deleting || Boolean(deletionId)} onClick={sendDeletionCode} type="button">
                {sendingCode ? "发送中" : deletionId ? "验证码已发送" : "获取注销验证码"}
              </button>
              <form onSubmit={completeDeletion}>
                <label htmlFor={deletionCodeId}>注销验证码</label>
                <input disabled={deleting || !deletionId} id={deletionCodeId} inputMode="numeric" maxLength={6} onChange={(event) => setDeletionCode(event.target.value.replace(/\D/g, ""))} value={deletionCode} />
                <label htmlFor={confirmationId}>确认词</label>
                <input disabled={deleting} id={confirmationId} onChange={(event) => setConfirmation(event.target.value)} placeholder="输入：注销账号" value={confirmation} />
                {deletionError ? <p className="settings-error" role="alert">注销请求未完成，请核对验证码后重试。</p> : null}
                <button className="settings-delete-confirm" disabled={!deletionId || deletionCode.length !== 6 || confirmation !== "注销账号" || deleting} type="submit">
                  {deleting ? "注销处理中" : "永久注销"}
                </button>
              </form>
            </div>
          </section>
        </div>
      ) : null}
    </main>
  );
}