"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { createSupabaseBrowserClient } from "@/lib/supabase/client"

export default function ResetPasswordPage() {
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [errorMessage, setErrorMessage] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isPasswordUpdated, setIsPasswordUpdated] = useState(false)
  const router = useRouter()

  async function handlePasswordUpdate(event: React.FormEvent) {
    event.preventDefault()
    setErrorMessage(null)

    if (newPassword !== confirmPassword) {
      setErrorMessage("passwords do not match")
      return
    }

    setIsSubmitting(true)

    const supabaseClient = createSupabaseBrowserClient()

    const { error } = await supabaseClient.auth.updateUser({
      password: newPassword,
    })

    if (error) {
      setErrorMessage(error.message)
      setIsSubmitting(false)
      return
    }

    setIsPasswordUpdated(true)
  }

  if (isPasswordUpdated) {
    return (
      <>
        <div className="space-y-2">
          <h1 className="text-lg text-text-primary">password updated</h1>
          <p className="text-text-secondary">
            your password has been changed successfully
          </p>
        </div>
        <Link
          href="/reader"
          className="block text-text-secondary transition-colors hover:text-text-primary"
        >
          go to reader
        </Link>
      </>
    )
  }

  return (
    <>
      <div className="space-y-2">
        <h1 className="text-lg text-text-primary">reset password</h1>
        <p className="text-text-secondary">enter your new password</p>
      </div>

      <form onSubmit={handlePasswordUpdate} className="space-y-4">
        <div className="space-y-2">
          <label htmlFor="new-password" className="text-text-secondary">
            new password
          </label>
          <input
            id="new-password"
            type="password"
            value={newPassword}
            onChange={(event) => setNewPassword(event.target.value)}
            required
            minLength={8}
            className="w-full border border-border bg-background-secondary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-text-dim"
          />
        </div>

        <div className="space-y-2">
          <label htmlFor="confirm-password" className="text-text-secondary">
            confirm password
          </label>
          <input
            id="confirm-password"
            type="password"
            value={confirmPassword}
            onChange={(event) => setConfirmPassword(event.target.value)}
            required
            minLength={8}
            className="w-full border border-border bg-background-secondary px-3 py-2 text-text-primary outline-none placeholder:text-text-dim focus:border-text-dim"
          />
        </div>

        {errorMessage && (
          <p className="text-status-error">{errorMessage}</p>
        )}

        <button
          type="submit"
          disabled={isSubmitting}
          className="w-full border border-border bg-background-tertiary px-4 py-2 text-text-primary transition-colors hover:bg-border disabled:opacity-50"
        >
          {isSubmitting ? "updating password..." : "update password"}
        </button>
      </form>

      <Link
        href="/sign-in"
        className="block text-text-secondary transition-colors hover:text-text-primary"
      >
        back to sign in
      </Link>
    </>
  )
}