import { useState } from 'react';

export function Workspace() {
  const [projectDir, setProjectDir] = useState('~/.openclaw/zclaw-workspace');
  const [restrictFiles, setRestrictFiles] = useState(true);
  const [autoSaveContext, setAutoSaveContext] = useState(true);
  const [fileWatching, setFileWatching] = useState(true);

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-2">工作区</h1>
      <p className="text-sm text-gray-500 mb-6">配置本地项目目录与上下文持久化行为。</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">ZCLAW 项目和上下文文件的保存位置。</p>
        <div className="flex gap-2">
          <input
            type="text"
            value={projectDir}
            onChange={(e) => setProjectDir(e.target.value)}
            className="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-orange-500"
          />
          <button className="border border-gray-300 rounded-lg px-4 py-2 text-sm hover:bg-gray-100">浏览</button>
        </div>
      </div>

      <div className="space-y-4">
        <ToggleCard
          title="限制文件访问范围"
          description="开启后，Agent 的工作空间将限制在工作目录内。关闭后可访问更大范围，可能导致数据操作。无论开关状态，均建议提前备份重要文件。注意：受技术限制，我们无法保证完全阻止目录外执行或由此带来的外部影响；请自行评估风险并谨慎使用。"
          checked={restrictFiles}
          onChange={setRestrictFiles}
          highlight
        />
        <ToggleCard
          title="自动保存上下文"
          description="自动将聊天记录和提取的产物保存到本地工作区文件夹。"
          checked={autoSaveContext}
          onChange={setAutoSaveContext}
        />
        <ToggleCard
          title="文件监听"
          description="监听本地文件变更，实时更新 Agent 上下文。"
          checked={fileWatching}
          onChange={setFileWatching}
        />
      </div>

      <div className="mt-6 bg-gray-50 rounded-xl p-5">
        <div className="flex justify-between items-center">
          <div>
            <h2 className="text-sm font-bold text-gray-900">从 OpenClaw 迁移</h2>
            <p className="text-xs text-gray-500 mt-1">将 OpenClaw 的配置、对话记录、技能等数据迁移到 ZCLAW</p>
          </div>
          <button className="border border-gray-300 rounded-lg px-4 py-2 text-sm hover:bg-gray-100">开始迁移</button>
        </div>
      </div>
    </div>
  );
}

function ToggleCard({ title, description, checked, onChange, highlight }: {
  title: string; description: string; checked: boolean; onChange: (v: boolean) => void; highlight?: boolean;
}) {
  return (
    <div className={`rounded-xl p-5 ${highlight ? 'bg-orange-50 border border-orange-200' : 'bg-gray-50'}`}>
      <div className="flex justify-between items-start">
        <div className="flex-1 mr-4">
          <h3 className={`text-sm font-bold ${highlight ? 'text-orange-700' : 'text-gray-900'}`}>{title}</h3>
          <p className="text-xs text-gray-500 mt-1 leading-relaxed">{description}</p>
        </div>
        <button
          onClick={() => onChange(!checked)}
          className={`w-11 h-6 rounded-full transition-colors relative flex-shrink-0 mt-0.5 ${checked ? 'bg-orange-500' : 'bg-gray-300'}`}
        >
          <span className={`block w-5 h-5 bg-white rounded-full shadow absolute top-0.5 transition-all ${checked ? 'left-[22px]' : 'left-0.5'}`} />
        </button>
      </div>
    </div>
  );
}
