"use client"

import { useState } from "react"
import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { UserPlus } from "lucide-react"

export default function SignUpPage() {
  const { t } = useLocale()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    // Mock: do nothing for now
  }

  return (
    <div className="mx-auto flex max-w-md flex-col items-center py-12">
      <div className="w-full rounded-lg border border-border bg-card p-8">
        <div className="mb-6 text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary">
            <span className="text-lg font-bold text-primary-foreground">D</span>
          </div>
          <h1 className="text-xl font-bold text-foreground">{t.auth.signUpTitle}</h1>
          <p className="mt-1 text-sm text-muted-foreground">{t.site.name}</p>
        </div>

        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="email">{t.auth.email}</Label>
            <Input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder={t.auth.emailPlaceholder}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="password">{t.auth.password}</Label>
            <Input
              id="password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder={t.auth.passwordPlaceholder}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="confirm-password">{t.auth.confirmPassword}</Label>
            <Input
              id="confirm-password"
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              placeholder={t.auth.passwordPlaceholder}
            />
          </div>

          <Button
            type="submit"
            className="w-full gap-1.5"
            disabled={!email || !password || !confirmPassword}
          >
            <UserPlus className="h-4 w-4" />
            {t.auth.signUpButton}
          </Button>
        </form>

        <p className="mt-6 text-center text-sm text-muted-foreground">
          {t.auth.hasAccount}{" "}
          <Link href="/auth/login" className="font-medium text-primary hover:underline">
            {t.auth.loginButton}
          </Link>
        </p>
      </div>
    </div>
  )
}