"use client";

import { useState } from "react";
import Link from "next/link";
import { useTheme } from "../../context/ThemeContext";
import Button1 from "../../ui/buttons/button1";
import { Client, Account } from "appwrite";

const client = new Client();
client
  .setEndpoint("https://cloud.appwrite.io/v1") // Replace with your Appwrite endpoint
  .setProject("67e1445400053dca1d9b"); // Replace with your Appwrite project ID

const account = new Account(client);

export default function ResetPasswordPage() {
  const { darkMode, toggleDarkMode } = useTheme();
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      await account.createRecovery(email, "http://localhost:3000/reset-password");
      alert("Password reset link sent to your email!");
    } catch (error) {
      console.error("Error:", error);
      alert(`Failed to send reset link: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className={`relative p-6 bg-white z-1 dark:bg-gray-900 sm:p-0 ${darkMode ? 'dark' : ''}`}>
      <div className="relative w-full flex items-center h-screen dark:bg-gray-900 sm:p-0">
        {/* Form */}
        <div className="flex flex-col flex-1 w-full">
          <div className="w-full max-w-md pt-10 mx-auto sm:py-10">
            <Link
              href="/dashboard"
              className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
            >
              Back to dashboard
            </Link>
          </div>
          <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto">
            <div>
              <h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
                Forgot Your Password?
              </h1>
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Enter your email address linked to your account, and we&apos;ll send you a link to reset your password.
              </p>
              <form onSubmit={handleSubmit}>
                <div className="space-y-5">
                  <div>
                    <label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                      Email<span className="text-error-500">*</span>
                    </label>
                    <input
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      placeholder="info@gmail.com"
                      className="h-11 w-full rounded-lg border px-4 py-2.5 text-sm text-gray-800 dark:text-white"
                      required
                      disabled={loading}
                    />
                  </div>
                  <div>
                    <Button1 type="submit" className="w-full px-4 py-3 text-sm font-medium text-white bg-blue-500" disabled={loading}>
                      {loading ? "Sending..." : "Send Reset Link"}
                    </Button1>
                  </div>
                </div>
              </form>
              <p className="text-sm text-center text-gray-700 dark:text-gray-400">
                Wait, I remember my password... <Link href="/signin" className="text-blue-500">Click here</Link>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
