"use client";

import { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { useTranslation } from "@/lib/i18n";
import { ArrowLeft, Mail } from "lucide-react";

export default function ForgotPasswordPage() {
  const { t } = useTranslation();
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-background px-4 sm:px-6 py-8 sm:py-12">
      <div className="w-full max-w-sm sm:max-w-md space-y-4 sm:space-y-6">
        {/* Back to Login - Mobile friendly top placement */}
        <div className="sm:hidden">
          <Link
            href="/login"
            className="text-sm text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
          >
            <ArrowLeft className="h-4 w-4" />
            {t("auth.forgot.backLogin")}
          </Link>
        </div>

        <div className="text-center space-y-2">
          <div className="mx-auto w-12 h-12 sm:w-14 sm:h-14 bg-primary/10 rounded-full flex items-center justify-center mb-4">
            <Mail className="h-6 w-6 sm:h-7 sm:w-7 text-primary" />
          </div>
          <h1 className="text-2xl sm:text-3xl font-bold">{t("auth.forgot.title")}</h1>
          <p className="text-sm sm:text-base text-muted-foreground">{t("auth.forgot.subtitle")}</p>
        </div>

        <Card className="border-0 shadow-lg">
          <CardContent className="pt-6 p-4 sm:p-6 space-y-4">
            {submitted && (
              <Alert className="bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
                <AlertDescription className="text-green-700 dark:text-green-300">
                  {t("auth.forgot.success")}
                </AlertDescription>
              </Alert>
            )}

            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="email" className="text-sm sm:text-base">
                  {t("auth.forgot.fields.email")}
                </Label>
                <Input
                  id="email"
                  type="email"
                  value={email}
                  onChange={(event) => setEmail(event.target.value)}
                  placeholder={t("auth.forgot.fields.emailPlaceholder")}
                  required
                  className="h-10 sm:h-11"
                />
              </div>

              <Button type="submit" className="w-full h-10 sm:h-11">
                {t("auth.forgot.submit")}
              </Button>
            </form>
          </CardContent>
        </Card>

        {/* Back to Login - Desktop */}
        <div className="hidden sm:block text-center">
          <Link
            href="/login"
            className="text-sm text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
          >
            <ArrowLeft className="h-4 w-4" />
            {t("auth.forgot.backLogin")}
          </Link>
        </div>
      </div>
    </div>
  );
}

