import { useMemo, useState } from 'react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';

import { resetPassword } from './authOperations';
import { detailFromApiError } from '../api/client';
import { clearAccessToken } from '../utils/token';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
import { Alert, AlertDescription } from '../components/ui/alert';
import { AlertCircle, KeyRound } from 'lucide-react';
import { Separator } from '../components/ui/separator';
import { toast } from '../components/ui/sonner';

/**
 * Reset-password page — visual port of fe0/src/pages/ResetPasswordPage.tsx.
 *
 * Markup/className tree preserved verbatim; the `token` is read from the URL query
 * exactly as fe0 does. The data call is rewired from fe0's
 * `authService.confirmPasswordReset` (returning `{ success, message, error }`) to the
 * shared `resetPassword(payload)` which resolves with the server message and throws on
 * error — failures surface via `detailFromApiError`.
 */
export function ResetPasswordPage() {
  const [searchParams] = useSearchParams();
  const tokenFromUrl = useMemo(() => (searchParams.get('token') ?? '').trim(), [searchParams]);
  const [password, setPassword] = useState('');
  const [passwordConfirm, setPasswordConfirm] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    const t = tokenFromUrl;
    if (!t) {
      setError('Thiếu mã trong liên kết. Hãy mở lại đường dẫn từ email.');
      return;
    }
    if (password !== passwordConfirm) {
      setError('Mật khẩu xác nhận không khớp.');
      return;
    }
    setIsLoading(true);
    try {
      const message = await resetPassword({
        token: t,
        newPassword: password,
        newPasswordConfirm: passwordConfirm,
      });
      clearAccessToken();
      toast.success(message || 'Đã đặt lại mật khẩu. Vui lòng đăng nhập lại.');
      navigate('/login', { replace: true });
    } catch (err) {
      setError(detailFromApiError(err, 'Không thể đặt lại mật khẩu.'));
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <div className="w-full max-w-xl">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-foreground">Đặt lại mật khẩu</h1>
          <p className="text-muted-foreground mt-2">Nhập mật khẩu mới (đủ độ phức tạp như khi đăng ký)</p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <KeyRound className="h-5 w-5" />
              Mật khẩu mới
            </CardTitle>
            <CardDescription>Tối thiểu 6 ký tự; chữ hoa, chữ thường, số và ký tự đặc biệt.</CardDescription>
          </CardHeader>
          <CardContent>
            {!tokenFromUrl && (
              <Alert variant="destructive" className="mb-4">
                <AlertCircle className="h-4 w-4" />
                <AlertDescription>
                  Liên kết không hợp lệ. Hãy dùng nút trong email hoặc yêu cầu gửi lại.
                </AlertDescription>
              </Alert>
            )}
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="new-pass">Mật khẩu mới</Label>
                <Input
                  id="new-pass"
                  type="password"
                  autoComplete="new-password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                  minLength={6}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="new-pass2">Xác nhận mật khẩu</Label>
                <Input
                  id="new-pass2"
                  type="password"
                  autoComplete="new-password"
                  value={passwordConfirm}
                  onChange={(e) => setPasswordConfirm(e.target.value)}
                  required
                  minLength={6}
                />
              </div>

              {error && (
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertDescription>{error}</AlertDescription>
                </Alert>
              )}

              <div className="flex justify-center">
                <Button type="submit" disabled={isLoading || !tokenFromUrl}>
                  {isLoading ? 'Đang lưu...' : 'Cập nhật mật khẩu'}
                </Button>
              </div>
            </form>
          </CardContent>
        </Card>

        <Separator className="my-6" />

        <div className="text-center space-y-2">
          <Link to="/login" className="text-sm text-muted-foreground hover:text-foreground block">
            Đăng nhập
          </Link>
        </div>
      </div>
    </div>
  );
}
