"use client"

import { useState } from "react"

const methods = [
  { id: "telebirr", name: "Telebirr", icon: "📱", desc: "Ethiopian mobile payment" },
  { id: "cbe", name: "CBE Birr", icon: "🏦", desc: "Commercial Bank of Ethiopia" },
  { id: "awash", name: "Awash Bank", icon: "🏛️", desc: "Awash Bank transfer" },
  { id: "abyssinia", name: "Bank of Abyssinia", icon: "💳", desc: "Bank of Abyssinia" },
]

const quickAmounts = [50, 100, 200, 500, 1000, 2000]

export default function DepositPage() {
  const [method, setMethod] = useState("telebirr")
  const [amount, setAmount] = useState("")

  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">Deposit</h1>
          <p className="text-[11px] text-primary-foreground/70 mt-0.5">Add funds to your account</p>
        </div>

        <div className="p-6 space-y-5">
          {/* Balance */}
          <div className="bg-secondary/50 border border-border rounded p-3 flex justify-between items-center">
            <span className="text-[11px] text-muted-foreground uppercase font-semibold">Current Balance</span>
            <span className="font-bold text-primary text-lg">0.00 ETB</span>
          </div>

          {/* Payment methods */}
          <div>
            <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-2">Payment Method</label>
            <div className="grid grid-cols-2 gap-2">
              {methods.map((m) => (
                <button
                  key={m.id}
                  onClick={() => setMethod(m.id)}
                  className={`flex items-center gap-2 p-2.5 rounded border transition-all text-left ${
                    method === m.id
                      ? "border-primary bg-primary/10 text-foreground"
                      : "border-border bg-secondary/30 text-muted-foreground hover:border-primary/50"
                  }`}
                >
                  <span className="text-xl">{m.icon}</span>
                  <div>
                    <div className="text-[11px] font-semibold">{m.name}</div>
                    <div className="text-[10px] opacity-70">{m.desc}</div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* Amount */}
          <div>
            <label className="text-[11px] font-semibold text-muted-foreground uppercase block mb-2">Amount (ETB)</label>
            <input
              type="number"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              placeholder="Enter amount"
              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"
              min="50"
            />
            <div className="flex flex-wrap gap-1.5 mt-2">
              {quickAmounts.map((a) => (
                <button
                  key={a}
                  onClick={() => setAmount(String(a))}
                  className={`text-[11px] px-2.5 py-1 rounded border transition-colors font-semibold ${
                    amount === String(a)
                      ? "bg-primary text-primary-foreground border-primary"
                      : "border-border text-muted-foreground hover:border-primary hover:text-primary"
                  }`}
                >
                  {a} ETB
                </button>
              ))}
            </div>
          </div>

          <p className="text-[10px] text-muted-foreground">Min deposit: 50 ETB · Max deposit: 50,000 ETB</p>

          <button className="w-full bg-primary text-primary-foreground font-bold py-3 rounded uppercase text-sm hover:opacity-90 transition-opacity">
            Deposit {amount ? `${amount} ETB` : ""}
          </button>
        </div>
      </div>
    </div>
  )
}