"use client"

import { useState } from "react"
import Link from "next/link"

export default function RegisterPage() {
  const [step, setStep] = useState(1)

  return (
    <div className="max-w-md mx-auto mt-8">
      <div className="bg-card border border-border rounded-lg overflow-hidden">
        <div className="bg-primary px-6 py-4">
          <h1 className="text-base font-black text-primary-foreground uppercase tracking-wide">Create Account</h1>
          <p className="text-[11px] text-primary-foreground/70 mt-0.5">Join Harifsport today</p>
        </div>

        {/* Steps */}
        <div className="flex border-b border-border">
          {["Personal Info", "Account Details", "Verification"].map((s, i) => (
            <div
              key={s}
              className={`flex-1 py-2 text-center text-[10px] font-semibold uppercase transition-colors ${
                i + 1 === step ? "bg-muted text-primary border-b-2 border-primary" :
                i + 1 < step ? "text-muted-foreground bg-primary/5" : "text-muted-foreground"
              }`}
            >
              {i + 1}. {s}
            </div>
          ))}
        </div>

        <div className="p-6 space-y-4">
          {step === 1 && (
            <>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">First Name</label>
                  <input type="text" placeholder="First name" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
                </div>
                <div>
                  <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Last Name</label>
                  <input type="text" placeholder="Last name" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
                </div>
              </div>
              <div>
                <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Phone Number</label>
                <input type="tel" placeholder="+251 xxx xxx xxxx" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
              </div>
              <div>
                <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Date of Birth</label>
                <input type="date" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary" />
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div>
                <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Username</label>
                <input type="text" placeholder="Choose a username" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
              </div>
              <div>
                <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Email</label>
                <input type="email" placeholder="your@email.com" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
              </div>
              <div>
                <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Password</label>
                <input type="password" placeholder="Min 8 characters" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
              </div>
              <div>
                <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-1">Confirm Password</label>
                <input type="password" placeholder="Repeat password" className="w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary" />
              </div>
            </>
          )}

          {step === 3 && (
            <div className="text-center py-4">
              <div className="text-4xl mb-3">✅</div>
              <h3 className="font-bold text-foreground mb-2">Account Created!</h3>
              <p className="text-[11px] text-muted-foreground">Please verify your phone number to start betting.</p>
              <input type="text" placeholder="Enter OTP code" className="mt-4 w-full bg-input border border-border rounded px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-primary text-center tracking-widest" maxLength={6} />
            </div>
          )}

          <div className="flex gap-3">
            {step > 1 && (
              <button onClick={() => setStep(step - 1)} className="flex-1 bg-secondary text-secondary-foreground font-semibold py-2.5 rounded uppercase text-sm hover:bg-muted transition-colors">
                Back
              </button>
            )}
            <button
              onClick={() => step < 3 ? setStep(step + 1) : null}
              className="flex-1 bg-primary text-primary-foreground font-bold py-2.5 rounded uppercase text-sm hover:opacity-90 transition-opacity"
            >
              {step === 3 ? "Verify & Start" : "Next"}
            </button>
          </div>

          {step === 1 && (
            <p className="text-center text-[11px] text-muted-foreground">
              Already have an account?{" "}
              <Link href="/login" className="text-primary hover:underline font-semibold">Login</Link>
            </p>
          )}
        </div>
      </div>
    </div>
  )
}