"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Coins, Loader2 } from "lucide-react"
import { api } from "@/lib/api"
import { ApiError } from "@/lib/errors"
import i18n from "@/lib/i18n";

export default function SignUpPage() {
  const router = useRouter()
  const [fullName, setFullName] = useState("")
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirm, setConfirm] = useState("")
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault()
    setLoading(true)
    setError(null)
    if (password !== confirm) {
      setError(i18n.t('app.auth.sign-up.page.text_1'))
      setLoading(false)
      return
    }
    try {
      await api.post('users', {
        email,
        password,
        full_name_ar: fullName,
        auto_approve: false,
      })
      router.push("/auth/sign-up-success")
    } catch (err: unknown) {
      if (err instanceof ApiError) {
        setError(err.message || i18n.t('app.auth.sign-up.page.text_2'))
      } else if (err instanceof Error) {
        setError(err.message || i18n.t('app.auth.sign-up.page.text_3'))
      } else {
        setError(i18n.t('app.auth.sign-up.page.text_4'))
      }
    } finally {
      setLoading(false)
    }
  }

  return (
    <div dir="rtl" className="min-h-screen flex items-center justify-center px-6 py-10 bg-background">
      <div className="w-full max-w-md">
        <div className="flex items-center gap-3 mb-8">
          <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-gold-400 to-gold-600">
            <Coins className="h-6 w-6 text-[#1f1604]" strokeWidth={2.25} />
          </div>
          <div>
            <div className="text-[17px] font-bold">Gold Wallet</div>
            <div className="text-[12px] text-muted-foreground">{i18n.t('app.auth.sign-up.page.text_6')}</div>
          </div>
        </div>

        <h1 className="text-[26px] font-bold mb-2">{i18n.t('app.auth.sign-up.page.text_7')}</h1>
        <p className="text-[13.5px] text-muted-foreground mb-6">
          {i18n.t('app.auth.sign-up.page.text_8')}</p>

        <form className="space-y-4" onSubmit={onSubmit}>
          <div>
            <label className="block text-[12.5px] font-semibold mb-1.5">{i18n.t('app.auth.sign-up.page.text_9')}</label>
            <input
              required
              value={fullName}
              onChange={(e) => setFullName(e.target.value)}
              className="w-full h-11 px-4 rounded-lg border border-border bg-card text-[13.5px] focus:outline-none focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20"
            />
          </div>
          <div>
            <label className="block text-[12.5px] font-semibold mb-1.5">{i18n.t('app.auth.sign-up.page.text_10')}</label>
            <input
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full h-11 px-4 rounded-lg border border-border bg-card text-[13.5px] focus:outline-none focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20"
            />
          </div>
          <div>
            <label className="block text-[12.5px] font-semibold mb-1.5">{i18n.t('app.auth.sign-up.page.text_11')}</label>
            <input
              type="password"
              required
              minLength={8}
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full h-11 px-4 rounded-lg border border-border bg-card text-[13.5px] focus:outline-none focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20"
            />
          </div>
          <div>
            <label className="block text-[12.5px] font-semibold mb-1.5">{i18n.t('app.auth.sign-up.page.text_12')}</label>
            <input
              type="password"
              required
              minLength={8}
              value={confirm}
              onChange={(e) => setConfirm(e.target.value)}
              className="w-full h-11 px-4 rounded-lg border border-border bg-card text-[13.5px] focus:outline-none focus:border-gold-500 focus:ring-2 focus:ring-gold-500/20"
            />
          </div>
          {error && (
            <div className="rounded-lg bg-red-50 border border-red-200 px-3 py-2.5 text-[12.5px] text-red-700">
              {error}
            </div>
          )}
          <button
            type="submit"
            disabled={loading}
            className="w-full h-11 rounded-lg bg-gradient-to-b from-gold-500 to-gold-600 hover:from-gold-600 hover:to-gold-700 text-white font-semibold text-[13.5px] inline-flex items-center justify-center gap-2 shadow-[0_4px_14px_rgba(201,162,39,0.3)] disabled:opacity-70"
          >
            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : i18n.t('app.auth.sign-up.page.text_5')}
          </button>
          <div className="text-center text-[12.5px] text-muted-foreground">
            {i18n.t('app.auth.sign-up.page.text_13')}{" "}
            <Link href="/login" className="font-semibold text-gold-700 hover:text-gold-800">
              {i18n.t('app.auth.sign-up.page.text_14')}</Link>
          </div>
        </form>
      </div>
    </div>
  )
}