import { useState } from 'react'
import { Save, CheckCircle, Loader2 } from 'lucide-react'

export default function AdminSettings() {
  const [saving, setSaving] = useState(false)
  const [saved, setSaved] = useState(false)

  const handleSave = async (e) => {
    e.preventDefault()
    setSaving(true)
    setSaved(false)
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    setSaving(false)
    setSaved(true)
    setTimeout(() => setSaved(false), 3000)
  }

  return (
    <div className="flex flex-col gap-8 max-w-[800px]">
      <div>
        <h2 className="text-2xl font-black text-text-primary tracking-tight m-0 mb-1">Platform Settings</h2>
        <p className="text-text-secondary text-sm font-semibold m-0">
          Configure business rules, global limits, and pricing structures.
        </p>
      </div>

      <form onSubmit={handleSave} className="neu-raised rounded-2xl p-6 md:p-8 flex flex-col gap-8">
        
        <div className="flex flex-col gap-6">
          <h3 className="text-base font-black text-text-primary border-b border-white/5 pb-2">Global Defaults</h3>
          
          <div className="grid grid-cols-2 gap-6">
            <div className="flex flex-col gap-2">
              <label className="text-xs font-black uppercase tracking-wider text-text-secondary px-1">Free Trial Credits</label>
              <input type="number" defaultValue={10} className="neu-input" />
            </div>

            <div className="flex flex-col gap-2">
              <label className="text-xs font-black uppercase tracking-wider text-text-secondary px-1">Max OTP Length limit</label>
              <div className="neu-inset rounded-lg overflow-hidden flex bg-base">
                <select className="w-full bg-transparent border-none outline-none text-sm font-bold text-text-primary px-3 py-2 cursor-pointer appearance-none">
                  <option>6 Digits</option>
                  <option>8 Digits</option>
                  <option>10 Digits</option>
                </select>
              </div>
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-6">
          <h3 className="text-base font-black text-text-primary border-b border-white/5 pb-2">Pricing Baseline</h3>
          
          <div className="flex flex-col gap-2 max-w-[250px]">
            <label className="text-xs font-black uppercase tracking-wider text-text-secondary px-1">Cost per OTP (INR)</label>
            <div className="neu-input flex items-center gap-2 px-4 py-0">
              <span className="font-black text-text-muted shrink-0">₹</span>
              <input type="number" step="0.01" defaultValue={0.20} className="flex-1 bg-transparent border-none outline-none py-2.5 text-sm font-semibold text-text-primary" />
            </div>
            <p className="text-[10px] font-bold text-text-muted mt-1 px-1">Used to calculate bulk package discounts.</p>
          </div>
        </div>

        <div className="pt-4 flex justify-end">
          <button 
            type="submit" 
            disabled={saving}
            className={`neu-btn-accent px-8 py-3 gap-2 flex items-center min-w-[220px] justify-center ${saved ? 'bg-green-500/10 text-green-600' : ''}`}
          >
            {saving ? <Loader2 size={18} className="animate-spin" /> : saved ? <><CheckCircle size={18} /> Settings Updated</> : <><Save size={18} /> Update Platform Config</>}
          </button>
        </div>

      </form>
    </div>
  )
}