'use client';
import { useState } from 'react';
import DashboardLayout from '@/components/DashboardLayout';

const quickAmounts = ['500', '1,000', '2,500', 'الكل'];

export default function WithdrawPage() {
  const [amount, setAmount] = useState('');
  const [selected, setSelected] = useState('');
  const [done, setDone] = useState(false);
  const handleQuick = (val: string) => { setSelected(val); setAmount(val === 'الكل' ? '8320' : val.replace(',', '')); };

  return (
    <DashboardLayout title="سحب الأرباح" subtitle="تحويل أرباحك إلى حسابك البنكي">
      <div className="max-w-2xl mx-auto">
        <div className="rounded-2xl p-8 mb-6 relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #c9a800 0%, #a88900 100%)' }}>
          <div className="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full translate-x-1/2 -translate-y-1/2 pointer-events-none" />
          <p className="text-white/70 text-sm text-right">الرصيد المتاح للسحب</p>
          <p className="text-white font-black text-5xl text-right mt-3">8,320.00 ريال</p>
          <p className="text-white/60 text-sm text-right mt-3">آخر سحب: منذ 15 يوم</p>
        </div>

        <div className="bg-[#1E2128] rounded-2xl p-6 mb-5">
          <h3 className="text-white font-bold text-right mb-4">المبلغ المراد سحبه</h3>
          <input type="number" value={amount} onChange={e => { setAmount(e.target.value); setSelected(''); }} placeholder="0.00" className="w-full bg-[#13151A] text-white font-black text-5xl text-center py-6 rounded-xl outline-none placeholder-white/20 mb-3" dir="ltr" />
          <p className="text-gray-500 text-sm text-center mb-4">الحد الأدنى 100 ريال · الحد الأقصى 8,320 ريال</p>
          <div className="grid grid-cols-4 gap-3">
            {quickAmounts.map((q) => (
              <button key={q} onClick={() => handleQuick(q)} className={`py-3 rounded-xl text-sm font-semibold cursor-pointer transition-all whitespace-nowrap ${selected === q ? 'bg-[#FCD704]/20 text-[#FCD704] border border-[#FCD704]/50' : 'bg-[#13151A] text-gray-300 hover:bg-white/5'}`}>{q}</button>
            ))}
          </div>
        </div>

        <div className="bg-[#1E2128] rounded-2xl p-6 mb-5">
          <h3 className="text-white font-bold text-right mb-4">إلى الحساب البنكي</h3>
          <div className="flex items-center justify-between bg-[#13151A] rounded-xl p-4">
            <button className="text-[#FCD704] text-sm font-semibold cursor-pointer whitespace-nowrap">تغيير</button>
            <div className="flex items-center gap-3">
              <div className="text-right">
                <p className="text-white font-medium">SA•••••••••1234</p>
                <p className="text-gray-400 text-xs mt-0.5">بنك الراجحي</p>
              </div>
              <div className="w-10 h-10 bg-[#FCD704]/20 rounded-xl flex items-center justify-center">
                <i className="ri-bank-line text-[#FCD704] text-lg" />
              </div>
            </div>
          </div>
          <div className="mt-4 bg-[#FCD704]/10 border border-[#FCD704]/30 rounded-xl p-4 flex items-center justify-end gap-3">
            <span className="text-[#FCD704] text-sm">رسوم التحويل: 0 ريال — مجاني</span>
            <i className="ri-checkbox-circle-line text-[#FCD704] text-xl" />
          </div>
        </div>

        {done && (
          <div className="mb-5 bg-[#FCD704]/15 border border-[#FCD704]/40 rounded-2xl p-5 text-center">
            <i className="ri-checkbox-circle-fill text-[#FCD704] text-4xl" />
            <p className="text-[#FCD704] font-bold text-lg mt-2">تم تقديم طلب السحب بنجاح!</p>
            <p className="text-gray-400 text-sm mt-1">سيصل المبلغ خلال 1-3 أيام عمل</p>
          </div>
        )}

        <button onClick={() => setDone(true)} className="w-full bg-[#FCD704] text-[#13151A] font-bold text-lg py-4 rounded-2xl cursor-pointer whitespace-nowrap">
          تأكيد السحب
        </button>
      </div>
    </DashboardLayout>
  );
}