'use client';

import { FormEvent, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Cloud, HardDrive, Loader2 } from 'lucide-react';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { loginAnonymousProfile } from '@/lib/anonymous-client';

export function HomeModeSelector() {
  const router = useRouter();
  const [codeName, setCodeName] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  const startLocal = () => {
    router.push('/questionnaire');
  };

  const startAnonymous = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setLoading(true);
    try {
      await loginAnonymousProfile({ codeName: codeName.trim(), password });
      toast.success('已进入匿名加密档案');
      router.push('/questionnaire');
    } catch (error) {
      toast.error(error instanceof Error ? error.message : '匿名档案进入失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="grid gap-3">
      <div className="border p-4">
        <div className="mb-3 flex items-center gap-2 font-medium">
          <HardDrive className="h-4 w-4" />
          本地加密模式
        </div>
        <p className="mb-4 text-sm leading-6 text-muted-foreground">
          记录只保存在当前浏览器，写入前自动加密。适合单设备使用，最快开始。
        </p>
        <Button className="w-full" onClick={startLocal}>
          直接开始
        </Button>
      </div>

      <form className="border p-4" onSubmit={startAnonymous}>
        <div className="mb-3 flex items-center gap-2 font-medium">
          <Cloud className="h-4 w-4" />
          匿名加密同步
        </div>
        <p className="mb-4 text-sm leading-6 text-muted-foreground">
          输入代号和恢复口令后，测评记录会先在浏览器加密，再同步到服务器。
        </p>
        <div className="grid gap-2">
          <Input
            value={codeName}
            onChange={(event) => setCodeName(event.target.value)}
            placeholder="代号，不填真实姓名"
            autoComplete="username"
          />
          <Input
            value={password}
            onChange={(event) => setPassword(event.target.value)}
            placeholder="恢复口令"
            type="password"
            autoComplete="current-password"
          />
          <Button className="w-full" disabled={loading || !codeName.trim() || password.length < 4}>
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Cloud className="h-4 w-4" />}
            进入并同步
          </Button>
        </div>
      </form>
    </div>
  );
}