import { useState } from 'react';

export function Privacy() {
  const [optimization, setOptimization] = useState(false);

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-2">数据与隐私</h1>
      <p className="text-sm text-gray-500 mb-6">查看数据存储位置与 ZCLAW 的网络出站范围。</p>

      <div className="bg-gray-50 rounded-xl p-5 mb-6">
        <h2 className="text-sm font-bold text-gray-900 mb-1">本地数据路径</h2>
        <p className="text-xs text-gray-500 mb-3">所有工作区文件、对话记录和 Agent 输出均存储在此本地目录。</p>
        <div className="bg-white border border-gray-200 rounded-lg px-3 py-2">
          <span className="text-sm text-gray-700 font-mono">~/.openclaw/zclaw-workspace</span>
        </div>
      </div>

      <div className="bg-gray-50 rounded-xl p-5 mb-6">
        <div className="flex justify-between items-start">
          <div className="flex-1 mr-4">
            <h2 className="text-sm font-bold text-gray-900">优化计划</h2>
            <p className="text-xs text-gray-500 mt-1 leading-relaxed">
              我们诚挚邀您加入优化提升计划。您的加入会帮助我们更好地改进产品：在去标识化处理后，我们可能将您输入与生成的信息以及屏幕操作信息用于模型的训练与优化。我们尊重您的个人信息主体权益，您有权选择不允许我们将您的信息用于此目的。您也可以在后续使用中的任何时候通过"设置"中的开启或关闭按钮选择加入或退出优化计划。
            </p>
          </div>
          <button
            onClick={() => setOptimization(!optimization)}
            className={`w-11 h-6 rounded-full transition-colors relative flex-shrink-0 ${optimization ? 'bg-orange-500' : 'bg-gray-300'}`}
          >
            <span className={`block w-5 h-5 bg-white rounded-full shadow absolute top-0.5 transition-all ${optimization ? 'left-[22px]' : 'left-0.5'}`} />
          </button>
        </div>
      </div>

      <div className="bg-gray-50 rounded-xl p-5">
        <h2 className="text-sm font-bold text-gray-900 mb-3">备案信息</h2>
        <div className="space-y-2 text-xs text-gray-500">
          <div className="flex gap-8">
            <span className="text-gray-400 w-24">项目名称</span>
            <span>ZCLAW — OpenClaw 定制版</span>
          </div>
          <div className="flex gap-8">
            <span className="text-gray-400 w-24">开源协议</span>
            <span>MIT License</span>
          </div>
          <div className="flex gap-8">
            <span className="text-gray-400 w-24">数据存储</span>
            <span>全部本地存储，不上传云端</span>
          </div>
        </div>
      </div>
    </div>
  );
}
