import { useState } from 'react';

import { Toast } from '@/app/Toast';
import { requestConfirm } from '@/stores/confirmDialog';

/**
 * README §8.7 mentions a "清空缓存「126 MB」" row -- confirmed no server endpoint touches cache at
 * all (docs/IM-后端问题清单.md-adjacent research: "No backend endpoint clears cache/history -- both
 * are pure client-side operations"). Computing a real, honest "just this app's cache" byte count is
 * not reliably possible (`navigator.storage.estimate()` reports the WHOLE origin, not a
 * per-feature breakdown) -- rather than show a fabricated-looking number, this omits the size and
 * just performs and confirms the real clear (this app's own Cache Storage buckets, per the SW-
 * caching behavior already relied on elsewhere in this app).
 */
export function GeneralSettingsPage() {
  const [status, setStatus] = useState<'idle' | 'clearing' | 'done'>('idle');
  const [error, setError] = useState('');

  const clearCache = async () => {
    if (!(await requestConfirm({ message: '确定清除本地缓存吗？不会影响你的账号数据。' }))) return;
    setStatus('clearing');
    try {
      if (typeof caches === 'undefined') throw new Error('此浏览器不支持缓存清除');
      const keys = await caches.keys();
      await Promise.all(keys.map((k) => caches.delete(k)));
      setStatus('done');
    } catch (err) {
      setStatus('idle');
      setError(err instanceof Error ? err.message : '清除缓存失败，请重试');
    }
  };

  return (
    <div className="mx-auto w-full max-w-[720px] px-5 py-8 md:px-10">
      <h2 className="mb-4 text-xl font-semibold text-text-heading">通用</h2>
      <div className="rounded-xl bg-white text-sm">
        <button type="button" onClick={clearCache} disabled={status === 'clearing'} className="flex w-full items-center justify-between px-7 py-4 text-left">
          <span className="text-text-body">清空缓存</span>
          <span className="text-text-tertiary-2">{status === 'clearing' ? '清除中…' : status === 'done' ? '已清除 ›' : '›'}</span>
        </button>
      </div>
      <Toast message={error} variant="error" onDone={() => setError('')} />
    </div>
  );
}