artifacts/design-studio/src/pages/ForgotPassword.tsx

import React, { useState } from "react";
import { useLocation } from "wouter";
import { supabase } from "../lib/supabase";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "../components/ui/card";
import { toast } from "sonner";

export default function ForgotPassword() {
  const [, setLocation] = useLocation();
  const [email, setEmail] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      const redirectTo = `${window.location.origin}${
        import.meta.env.BASE_URL?.replace(/\/$/, "") ?? ""
      }/reset-password`;

      const { error } = await supabase.auth.resetPasswordForEmail(email, {
        redirectTo,
      });

      if (error) {
        toast.error(error.message);
      } else {
        setSent(true);
        toast.success("Password reset link sent to your email");
      }
    } catch {
      toast.error("Connection error. Please try again.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="space-y-1 text-center">
          <CardTitle className="text-2xl font-bold">Forgot your password?</CardTitle>
          <CardDescription>
            {sent
              ? "Email sent! Check your inbox and click the link to reset your password."
              : "Enter your email and we'll send you a password reset link."}
          </CardDescription>
        </CardHeader>

        {!sent && (
          <form onSubmit={handleSubmit}>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="forgot-email">Email address</Label>
                <Input
                  id="forgot-email"
                  type="email"
                  placeholder="example@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                  dir="ltr"
                />
              </div>
            </CardContent>
            <CardFooter className="flex flex-col space-y-4">
              <Button type="submit" className="w-full" disabled={isLoading}>
                {isLoading ? "Sending..." : "Send reset link"}
              </Button>
              <Button
                type="button"
                variant="link"
                className="p-0 text-muted-foreground"
                onClick={() => setLocation("/login")}
              >
                Back to sign in
              </Button>
            </CardFooter>
          </form>
        )}

        {sent && (
          <CardFooter className="flex flex-col space-y-4 pt-0">
            <Button
              type="button"
              variant="outline"
              className="w-full"
              onClick={() => {
                setSent(false);
                setEmail("");
              }}
            >
              Resend email
            </Button>
            <Button
              type="button"
              variant="link"
              className="p-0 text-muted-foreground"
              onClick={() => setLocation("/login")}
            >
              Back to sign in
            </Button>
          </CardFooter>
        )}
      </Card>
    </div>
  );
}