import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/Card';
import { cn } from '@/lib/utils';
import { useResetPassword } from './useResetPassword';

export function ResetPassword() {
  const { formRef, isValid, tokenStatus, isSubmitting, handleSubmit } = useResetPassword();
  const loading = tokenStatus === 'loading';
  const invalid = tokenStatus === 'invalid';
  const hideform = loading || invalid;

  return (
    <>
      {loading && (
        <Card className="py-12 px-24 flex flex-col gap-6">
          <div className="text-center text-duck-dark/60">Verifying...</div>
        </Card>
      )}

      {invalid && (
        <Card className="py-12 px-24 flex flex-col gap-6">
          <div className="text-center">
            <div className="text-duck-dark text-2xl font-bold">Invalid Link</div>
            <div className="text-duck-dark/60">This reset link is invalid or has expired.</div>
          </div>
        </Card>
      )}

      <Card className={cn('flex flex-col gap-6', hideform && 'hidden')}>
        <div className="text-center">
          <div className="text-duck-dark text-2xl font-bold">Reset Password</div>
          <div className="text-duck-dark/60">Enter your new password</div>
        </div>

        <form ref={formRef} onSubmit={handleSubmit} className="grid gap-4">
          <div className="grid md:flex gap-4">
            <Label className="grid gap-2 flex-1">
              <span className="text-duck-dark/70">Password</span>
              <Input
                className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
                type="password"
                name="password"
                placeholder="Min 12 characters"
                autoComplete="new-password"
              />
            </Label>

            <Label className="grid gap-2 flex-1">
              <span className="text-duck-dark/70">Confirm Password</span>
              <Input
                className="h-11 bg-background/60 border-duck-dark/20 text-duck-dark placeholder:text-duck-dark/40"
                type="password"
                name="confirmPassword"
                placeholder="Confirm your password"
                autoComplete="new-password"
              />
            </Label>
          </div>

          <div className="pt-2">
            <Button
              type="submit"
              disabled={!isValid || isSubmitting}
              className="w-full h-11 bg-duck-yellow hover:bg-duck-yellow/90 text-duck-teal font-bold text-lg transition-all duration-200 hover:scale-105 cursor-pointer disabled:opacity-50 disabled:hover:scale-100"
            >
              {isSubmitting ? 'Resetting...' : 'Reset Password'}
            </Button>
          </div>
        </form>
      </Card>
    </>
  );
}
