'use client';
import { useState, useEffect } from 'react';

export default function MathCaptcha({ onVerified }: { onVerified: (ok: boolean) => void }) {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  const [mounted, setMounted] = useState(false);
  const [input, setInput] = useState('');
  const [error, setError] = useState(false);
  const [verified, setVerified] = useState(false);

  // Generate angka hanya di client untuk menghindari hydration mismatch
  useEffect(() => {
    setA(Math.floor(Math.random() * 9) + 1);
    setB(Math.floor(Math.random() * 9) + 1);
    setMounted(true);
  }, []);

  const verify = () => {
    if (parseInt(input) === a + b) {
      setVerified(true);
      onVerified(true);
    } else {
      setError(true);
      setInput('');
      setTimeout(() => setError(false), 1500);
    }
  };

  if (verified) {
    return (
      <div className="flex items-center gap-2 text-green-600 text-sm bg-green-50 border border-green-200 rounded-xl px-4 py-2.5">
        <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
        </svg>
        Verifikasi berhasil
      </div>
    );
  }

  // Tampilkan placeholder saat belum mounted (SSR)
  if (!mounted) {
    return (
      <div className="border border-white/30 rounded-xl p-4 bg-white/20 backdrop-blur-sm animate-pulse">
        <div className="h-4 w-32 bg-white/30 rounded mb-3" />
        <div className="h-9 w-48 bg-white/30 rounded" />
      </div>
    );
  }

  return (
    <div className="border border-white/30 rounded-xl p-4 bg-white/20 backdrop-blur-sm">
      <p className="text-xs font-medium mb-2 opacity-80">Verifikasi: Berapa hasil dari</p>
      <div className="flex items-center gap-3">
        <span className="text-lg font-bold bg-white/30 rounded-lg px-3 py-1.5 select-none">
          {a} + {b} = ?
        </span>
        <input type="number" value={input} onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && verify()}
          placeholder="Jawaban"
          className={`w-24 border rounded-lg px-3 py-1.5 text-sm text-center focus:outline-none focus:ring-2 bg-white/80 text-gray-800 ${error ? 'border-red-400 ring-red-300' : 'border-white/50 focus:ring-white/50'}`}
          autoComplete="off" />
        <button type="button" onClick={verify}
          className="bg-white/30 hover:bg-white/50 text-current px-3 py-1.5 rounded-lg text-sm font-medium transition">
          ✓
        </button>
      </div>
      {error && <p className="text-red-200 text-xs mt-1">Jawaban salah, coba lagi.</p>}
    </div>
  );
}