'use client';

import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Toaster, toast } from 'react-hot-toast';
import {
  Plus, RefreshCw, Download, Wallet, Clock, CheckCircle2, Shield,
  ChevronDown, FileText, Headphones, Building2, AlertTriangle,
  BadgeCheck, CalendarDays
} from 'lucide-react';
import { StatisticCard } from '@/components/ui/StatisticCard';
import { DataTable, ColumnDef } from '@/components/ui/DataTable';
import { api } from '@/lib/api';

interface WithdrawRequest {
  id: string;
  amount: number;
  account: string;
  status: string;
  risk: string;
  provider: string;
  createdAt: string;
}

interface WithdrawalRecord {
  id: string;
  amount: number;
  status: string;
  bankAccount?: string;
  accountName?: string;
  bankName?: string;
  note?: string;
  requestedAt: string;
}

interface WithdrawalDashboardData {
  availableBalance: number;
  pendingBalance: number;
  totalRevenue: number;
  totalWithdrawn: number;
  totalRejected: number;
  pendingRequests: number;
  totalSuccessfulCount: number;
  todayRevenue: number;
  monthlyRevenue: number;
  walletStatus: string;
  pendingReleaseBalance?: number;
  nextWithdrawalAvailableAt?: string | null;
  instantWithdrawalEnabled?: boolean;
}

interface WithdrawalEligibilityData {
  canWithdraw: boolean;
  availableBalance: number;
  minimumAmount: number;
  pendingReleaseBalance?: number;
  nextWithdrawalAvailableAt?: string | null;
  instantWithdrawalEnabled?: boolean;
  checks: Array<{ key: string; label: string; passed: boolean; reason: string }>;
}

export default function SellerWithdrawPage() {
  const pathname = usePathname();
  const currentLocale = pathname.startsWith('/en') ? 'en' : 'vi';
  const [activeFilter, setActiveFilter] = useState('all');
  const [withdrawals, setWithdrawals] = useState<WithdrawalRecord[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [availableBalance, setAvailableBalance] = useState(0);
  const [pendingBalance, setPendingBalance] = useState(0);
  const [dashboard, setDashboard] = useState<WithdrawalDashboardData | null>(null);
  const [eligibility, setEligibility] = useState<WithdrawalEligibilityData | null>(null);
  const [withdrawAmount, setWithdrawAmount] = useState('');
  const [bankName, setBankName] = useState('');
  const [bankAccount, setBankAccount] = useState('');
  const [accountName, setAccountName] = useState('');
  const [note, setNote] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const minimumWithdrawAmount = eligibility?.minimumAmount ?? 100000;
  const canSubmitWithdraw = Boolean(
    eligibility?.canWithdraw &&
    withdrawAmount &&
    Number(withdrawAmount) >= minimumWithdrawAmount &&
    Number(withdrawAmount) <= availableBalance &&
    bankName &&
    bankAccount &&
    accountName
  );

  const loadData = async () => {
    try {
      setIsLoading(true);
      const [summaryRes, withdrawalsRes, dashboardRes, eligibilityRes] = await Promise.all([
        api.get('/wallet/summary'),
        api.get('/wallet/withdrawals'),
        api.get('/wallet/withdrawals/dashboard'),
        api.get('/wallet/withdrawals/eligibility'),
      ]);

      setAvailableBalance(Number(summaryRes.data.sellerBalance ?? 0));
      setPendingBalance(Number(summaryRes.data.pendingBalance ?? 0));
      setDashboard(dashboardRes.data || null);
      setEligibility(eligibilityRes.data || null);
      setWithdrawals(withdrawalsRes.data || []);
    } catch (error) {
      console.error('Failed to load seller withdraw data', error);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    let isMounted = true;

    void (async () => {
      try {
        await loadData();
      } catch (error) {
        if (isMounted) {
          console.error('Failed to initialize seller withdraw data', error);
        }
      }
    })();

    return () => {
      isMounted = false;
    };
  }, []);

  const handleRequestWithdraw = async () => {
    if (!canSubmitWithdraw) {
      toast.error('Vui lòng hoàn tất tất cả thông tin và đảm bảo đủ điều kiện rút tiền.');
      return;
    }

    try {
      setIsSubmitting(true);
      await api.post('/payment/withdraw', {
        amount: Number(withdrawAmount),
        bankName,
        accountName,
        bankAccount,
        note,
      });
      toast.success('Yêu cầu rút tiền đã được gửi thành công.');
      setWithdrawAmount('');
      setBankName('');
      setBankAccount('');
      setAccountName('');
      setNote('');
      await loadData();
    } catch (error: unknown) {
      const message = (error as any)?.response?.data?.message || 'Không thể gửi yêu cầu rút tiền.';
      toast.error(message);
      console.error('Failed to submit withdraw request', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleVerifyEmailLocal = async () => {
    try {
      await api.post('/auth/verify-email/current');
      toast.success('Email đã được xác minh. Bạn có thể tạo yêu cầu rút tiền.');
      await loadData();
    } catch (error: any) {
      toast.error(error?.response?.data?.message || 'Không thể xác minh email.');
    }
  };

  const columns: ColumnDef<WithdrawRequest>[] = [
    { header: 'Mã rút', accessorKey: 'id' },
    { header: 'Số tiền', accessorKey: 'amount', align: 'right', cell: (item) => `${item.amount} đ` },
    { header: 'Tài khoản nhận', accessorKey: 'account' },
    { header: 'Trạng thái', accessorKey: 'status', align: 'center' },
    { header: 'Rủi ro / kiểm tra', accessorKey: 'risk', align: 'center' },
    { header: 'Provider', accessorKey: 'provider', align: 'center' },
    { header: 'Ngày tạo', accessorKey: 'createdAt', align: 'right' },
  ];

  const filterOptions = [
    { id: 'all', label: 'Tất cả' },
    { id: 'PENDING', label: 'Chờ duyệt' },
    { id: 'APPROVED', label: 'Đã duyệt' },
    { id: 'REJECTED', label: 'Đã từ chối' },
  ];

  const filters = (
    <div className="flex flex-wrap items-center gap-1">
      {filterOptions.map((f) => (
        <button
          key={f.id}
          onClick={() => setActiveFilter(f.id)}
          className={`text-[11px] font-bold px-3 py-2 rounded-lg transition-colors ${
            activeFilter === f.id
              ? 'bg-primary/10 text-primary border border-primary/20'
              : 'text-muted-foreground hover:text-foreground'
          }`}
        >{f.label}</button>
      ))}
    </div>
  );

  const filteredWithdrawals = withdrawals.filter((item) => {
    if (activeFilter === 'all') return true;
    return item.status === activeFilter;
  });
  const latestWithdrawal = withdrawals[0] || null;
  const withdrawalStatus = latestWithdrawal?.status?.toUpperCase() || 'DRAFT';
  const currentStep = withdrawalStatus === 'COMPLETED' ? 4 : withdrawalStatus === 'APPROVED' ? 3 : withdrawalStatus === 'PENDING' ? 2 : 1;
  const formMissingReason = !withdrawAmount || Number(withdrawAmount) < minimumWithdrawAmount
    ? `Nhập tối thiểu ${minimumWithdrawAmount.toLocaleString('vi-VN')} đ`
    : Number(withdrawAmount) > availableBalance
      ? 'Số tiền vượt quá số dư có thể rút'
      : !bankName.trim() || !accountName.trim() || !bankAccount.trim()
        ? 'Điền đủ tên ngân hàng, chủ tài khoản và số tài khoản'
        : !eligibility?.canWithdraw
          ? 'Hoàn tất các điều kiện rút tiền ở bên trái'
          : '';

  return (
    <div className="space-y-6 pb-20">
      <Toaster position="top-right" />
      {/* Header */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-foreground font-bold text-2xl">Rút tiền</h1>
          <p className="text-muted-foreground text-sm mt-1">Rút số dư người bán đã được release và theo dõi tiến trình xử lý.</p>
        </div>
        <div className="flex items-center gap-3">
          <Link href={`/${currentLocale}/wallet`} className="bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded-xl text-sm font-bold flex items-center gap-2 transition-colors shadow-lg shadow-primary/20">
            <Plus className="w-4 h-4" /> Tạo yêu cầu rút
          </Link>
          <button onClick={() => window.location.reload()} className="bg-card border border-border hover:bg-muted text-muted-foreground px-4 py-2 rounded-xl text-sm font-medium flex items-center gap-2 transition-colors">
            <RefreshCw className="w-4 h-4" /> Tải lại
          </button>
          <button disabled className="bg-card border border-border text-muted-foreground/50 px-4 py-2 rounded-xl text-sm font-medium flex items-center gap-2 opacity-50 cursor-not-allowed">
            <Download className="w-4 h-4" /> Xuất lịch sử
          </button>
        </div>
      </div>

      {/* Cards */}
      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
        <StatisticCard
          title="Có thể rút"
          subtitle="Số dư sẵn sàng"
          value={`${(dashboard?.availableBalance ?? availableBalance).toLocaleString('vi-VN')} đ`}
          icon={Wallet}
          colorClass="primary"
          onClick={() => {}}
        />
        <StatisticCard
          title="Đang chờ mở rút"
          subtitle="Tiền bán đang bảo vệ 7 ngày"
          value={`${(dashboard?.pendingReleaseBalance ?? eligibility?.pendingReleaseBalance ?? pendingBalance).toLocaleString('vi-VN')} đ`}
          icon={Clock}
          colorClass="warning"
          onClick={() => {}}
        />
        <StatisticCard
          title="Doanh thu hôm nay"
          subtitle="Tổng phát sinh trong ngày"
          value={`${(dashboard?.todayRevenue ?? 0).toLocaleString('vi-VN')} đ`}
          icon={CalendarDays}
          colorClass="success"
          onClick={() => {}}
        />
        <StatisticCard
          title="Doanh thu tháng"
          subtitle="Tổng phát sinh tháng"
          value={`${(dashboard?.monthlyRevenue ?? 0).toLocaleString('vi-VN')} đ`}
          icon={BadgeCheck}
          colorClass="blue"
          onClick={() => {}}
        />
        <StatisticCard
          title="Yêu cầu đang có"
          subtitle="Số yêu cầu đang chờ"
          value={`${dashboard?.pendingRequests ?? withdrawals.filter((item) => item.status === 'PENDING').length} yêu cầu`}
          icon={Shield}
          colorClass="warning"
          onClick={() => {}}
        />
      </div>

      {/* Main Bottom Section */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">

        {/* Left Column (span 7) */}
        <div className="lg:col-span-7 space-y-6">
          <div className="rounded-2xl border border-cyan-500/25 bg-cyan-500/5 p-5">
            <div className="flex items-start gap-3">
              <Clock className="mt-0.5 h-5 w-5 shrink-0 text-cyan-400" />
              <div>
                <h2 className="font-bold text-foreground">Tiền bán được mở rút sau 7 ngày</h2>
                <p className="mt-1 text-sm leading-6 text-muted-foreground">Mỗi đơn chỉ chuyển sang “Có thể rút” sau 7 ngày kể từ khi đơn hoàn thành. Thời gian chờ giúp bảo vệ giao dịch, xử lý bảo hành và khiếu nại.</p>
                {(dashboard?.pendingReleaseBalance || eligibility?.pendingReleaseBalance) ? <p className="mt-2 text-sm font-semibold text-cyan-300">Đang chờ mở: {Number(dashboard?.pendingReleaseBalance ?? eligibility?.pendingReleaseBalance ?? 0).toLocaleString('vi-VN')} đ{(dashboard?.nextWithdrawalAvailableAt || eligibility?.nextWithdrawalAvailableAt) ? ` · Đợt gần nhất: ${new Date(dashboard?.nextWithdrawalAvailableAt || eligibility?.nextWithdrawalAvailableAt || '').toLocaleString('vi-VN')}` : ''}</p> : <p className="mt-2 text-sm text-emerald-400">Hiện không có tiền bán nào đang chờ mở rút.</p>}
                {(dashboard?.instantWithdrawalEnabled || eligibility?.instantWithdrawalEnabled) && <p className="mt-2 text-xs font-bold text-amber-300">Chế độ kiểm thử đang bật: admin đã cho phép bỏ qua thời gian chờ 7 ngày cho tài khoản này.</p>}
              </div>
            </div>
          </div>

          {/* Điều kiện tạo yêu cầu */}
          <div className="bg-card border border-border rounded-2xl p-6">
            <div className="flex items-center gap-2 mb-1">
              <CheckCircle2 className="w-4 h-4 text-success" />
              <h2 className="text-foreground font-bold text-base">Điều kiện tạo yêu cầu</h2>
            </div>
            <p className="text-muted-foreground text-xs mb-4">Các kiểm tra trước khi tạo yêu cầu rút mới.</p>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {eligibility?.checks.slice(0, 4).map((item) => (
                <div key={item.key} className="bg-background border border-border rounded-xl p-3 flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-muted flex items-center justify-center shrink-0">
                    {item.passed ? <CheckCircle2 className="w-4 h-4 text-success" /> : <AlertTriangle className="w-4 h-4 text-warning" />}
                  </div>
                  <div>
                    <p className="text-foreground text-[11px] font-bold">{item.label}</p>
                    <p className={`text-[10px] font-bold mt-0.5 ${item.passed ? 'text-success' : 'text-warning'}`}>{item.passed ? 'Đạt' : 'Cần bổ sung'}</p>
                  </div>
                </div>
              ))}
            </div>
            {eligibility && !eligibility.canWithdraw && (
              <div className="mt-4 rounded-xl border border-warning/20 bg-warning/10 p-3 text-[11px] text-warning">
                <p className="font-bold">Tồn tại điều kiện chưa đạt:</p>
                <ul className="mt-2 list-disc pl-4 space-y-1">
                  {eligibility.checks.filter((item) => !item.passed).slice(0, 6).map((item) => (
                    <li key={item.key} className="flex flex-wrap items-center gap-2">{item.reason}{item.key === 'emailVerified' && <button type="button" onClick={handleVerifyEmailLocal} className="rounded-md border border-warning/40 px-2 py-0.5 font-bold hover:bg-warning/15">Xác minh email local</button>}</li>
                  ))}
                </ul>
              </div>
            )}
          </div>

          {/* Yêu cầu rút gần đây (Using DataTable) */}
          <DataTable
            title="Yêu cầu rút gần đây"
            columns={columns}
            data={filteredWithdrawals.map((item) => ({
              ...item,
              account: item.bankAccount || 'Không có',
              risk: 'N/A',
              provider: item.bankName || 'N/A',
              createdAt: item.requestedAt,
            }))}
            searchPlaceholder="Tìm theo mã rút, tài khoản, provider..."
            filters={filters}
            emptyMessage={isLoading ? 'Đang tải...' : 'Chưa có yêu cầu rút tiền'}
          />

          {/* Bottom Info Boxes */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="bg-card border border-border rounded-2xl p-4 flex gap-3 items-start relative overflow-hidden">
              <FileText className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
              <div>
                <h4 className="text-foreground font-bold text-[13px]">Quy định rút tiền</h4>
                <p className="text-muted-foreground text-[11px] mt-1.5 leading-relaxed pr-2">Tiền từ đơn hoàn thành được mở rút sau 7 ngày. Mức rút tối thiểu là 100.000 đ.</p>
              </div>
            </div>

            <div className="bg-card border border-border rounded-2xl p-4 flex gap-3 items-start relative overflow-hidden">
              <Clock className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
              <div>
                <h4 className="text-foreground font-bold text-[13px]">Thời gian xử lý</h4>
                <p className="text-muted-foreground text-[11px] mt-1.5 leading-relaxed pr-2">Thông thường 15 phút - 2 giờ làm việc. Có thể lâu hơn khi cần kiểm tra thủ công.</p>
              </div>
            </div>

            <div className="bg-card border border-border rounded-2xl p-4 flex gap-3 items-start relative overflow-hidden group">
              <Headphones className="w-5 h-5 text-muted-foreground shrink-0 mt-0.5" />
              <div>
                <h4 className="text-foreground font-bold text-[13px]">Hỗ trợ</h4>
                <p className="text-muted-foreground text-[11px] mt-1.5 leading-relaxed pr-20">Nếu bạn cần hỗ trợ, vui lòng liên hệ trung tâm hỗ trợ của SHOPMMO.</p>
              </div>
              <button className="absolute right-4 top-1/2 -translate-y-1/2 bg-background border border-border hover:bg-muted text-foreground text-[11px] font-bold px-3 py-1.5 rounded-lg transition-colors">
                Xem chi tiết
              </button>
            </div>
          </div>

        </div>

        {/* Middle Column (span 3): Form Tạo yêu cầu */}
        <div className="lg:col-span-3">
          <div className="bg-card border border-border rounded-2xl p-5 sticky top-6">
            <h2 className="text-foreground font-bold text-base mb-5">Tạo yêu cầu rút</h2>

            <div className="space-y-5">
              <div>
                <label className="block text-muted-foreground text-[11px] font-bold mb-2 uppercase tracking-wider">Tiền tệ</label>
                <button className="w-full bg-background border border-border rounded-xl px-4 py-2.5 flex items-center justify-between text-foreground text-xs font-bold">
                  VND <ChevronDown className="w-4 h-4 text-muted-foreground" />
                </button>
              </div>

              <div>
                <label className="block text-muted-foreground text-[11px] font-bold mb-2 uppercase tracking-wider">Số tiền rút</label>
                <div className="relative">
                  <input
                    type="number"
                    value={withdrawAmount}
                    onChange={(e) => setWithdrawAmount(e.target.value)}
                    min={100000}
                    max={availableBalance}
                    placeholder="0"
                    className="w-full bg-background border border-border rounded-xl pl-4 pr-12 py-3 text-foreground text-sm font-bold focus:outline-none focus:border-primary/50 transition-colors"
                  />
                  <span className="absolute right-4 top-1/2 -translate-y-1/2 text-foreground font-bold text-xs">VND</span>
                </div>
                <p className="text-danger text-[10px] font-bold mt-2">Rút tối thiểu: 100.000 đ - Rút tối đa: {availableBalance.toLocaleString('vi-VN')} đ</p>
              </div>

              <div>
                <label className="block text-muted-foreground text-[11px] font-bold mb-2 uppercase tracking-wider">Tài khoản nhận</label>
                <div className="space-y-3">
                  <input
                    value={bankName}
                    onChange={(e) => setBankName(e.target.value)}
                    placeholder="Tên ngân hàng"
                    className="w-full bg-background border border-border rounded-xl px-4 py-3 text-foreground text-sm focus:outline-none focus:border-primary/50 transition-colors"
                  />
                  <input
                    value={accountName}
                    onChange={(e) => setAccountName(e.target.value)}
                    placeholder="Tên chủ tài khoản"
                    className="w-full bg-background border border-border rounded-xl px-4 py-3 text-foreground text-sm focus:outline-none focus:border-primary/50 transition-colors"
                  />
                  <input
                    value={bankAccount}
                    onChange={(e) => setBankAccount(e.target.value)}
                    placeholder="Số tài khoản"
                    className="w-full bg-background border border-border rounded-xl px-4 py-3 text-foreground text-sm focus:outline-none focus:border-primary/50 transition-colors"
                  />
                </div>
                <p className="text-muted-foreground text-[10px] mb-3 leading-relaxed">Thông tin này sẽ được lưu cùng yêu cầu rút sau khi bạn gửi.</p>
              </div>

              <div>
                <label className="block text-muted-foreground text-[11px] font-bold mb-2 uppercase tracking-wider">Ghi chú (tùy chọn)</label>
                <div className="relative">
                  <textarea
                    value={note}
                    onChange={(e) => setNote(e.target.value.slice(0, 120))}
                    placeholder="Nhập ghi chú cho yêu cầu rút..."
                    className="w-full bg-background border border-border rounded-xl p-3 text-[11px] text-foreground placeholder-muted-foreground focus:outline-none focus:border-primary/50 transition-colors resize-none h-20"
                  ></textarea>
                  <span className="absolute right-3 bottom-3 text-muted-foreground text-[10px] font-bold">{note.length}/120</span>
                </div>
              </div>

              <div className="pt-4 border-t border-border space-y-2">
                <div className="flex justify-between text-[11px]">
                  <span className="text-muted-foreground font-medium">Tạm tính</span>
                  <span className="text-foreground font-bold">{Number(withdrawAmount || 0).toLocaleString('vi-VN')} đ</span>
                </div>
                <div className="flex justify-between text-[11px]">
                  <span className="text-muted-foreground font-medium">Phí xử lý</span>
                  <span className="text-foreground font-bold">-0 đ</span>
                </div>
                <div className="flex justify-between text-[11px] pb-3 border-b border-border">
                  <span className="text-muted-foreground font-medium">Phí chuyển khoản</span>
                  <span className="text-foreground font-bold">-0 đ</span>
                </div>
                <div className="flex justify-between text-[13px] pt-1">
                  <span className="text-muted-foreground font-medium">Số tiền nhận ước tính</span>
                  <span className="text-primary font-bold">{Number(withdrawAmount || 0).toLocaleString('vi-VN')} đ</span>
                </div>
              </div>

              <button
                onClick={handleRequestWithdraw}
                disabled={isSubmitting || !canSubmitWithdraw}
                className={`mt-4 flex w-full items-center justify-center gap-2 rounded-xl border py-3 text-xs font-bold transition-all ${canSubmitWithdraw && !isSubmitting ? 'border-primary bg-primary text-primary-foreground shadow-lg shadow-primary/20 hover:bg-primary/90' : 'cursor-not-allowed border-primary/10 bg-primary/20 text-primary/50 opacity-50'}`}
              >
                <CheckCircle2 className="w-4 h-4" /> {isSubmitting ? 'Đang gửi...' : 'Gửi yêu cầu rút'}
              </button>
              {!canSubmitWithdraw && <p className="mt-2 text-center text-[10px] font-medium text-warning">{formMissingReason}</p>}
            </div>
          </div>
        </div>

        {/* Right Column (span 2): Quy trình rút tiền */}
        <div className="lg:col-span-2">
          <div className="bg-card border border-border rounded-2xl p-5 sticky top-6">
            <h2 className="text-foreground font-bold text-base mb-6">Quy trình rút tiền</h2>

            <div className="relative">
              {/* Dashed Line */}
              <div className="absolute left-3 top-2 bottom-6 w-px border-l border-dashed border-border z-0"></div>

              {latestWithdrawal && <div className="mb-4 rounded-lg border border-primary/20 bg-primary/5 p-3 text-[11px]"><p className="font-bold text-foreground">Yêu cầu #{latestWithdrawal.id.slice(0, 8).toUpperCase()}</p><p className="mt-1 text-muted-foreground">Trạng thái thực tế: <span className="font-bold text-primary">{withdrawalStatus === 'PENDING' ? 'Chờ duyệt' : withdrawalStatus === 'APPROVED' ? 'Đã duyệt, chờ chuyển tiền' : withdrawalStatus === 'COMPLETED' ? 'Đã hoàn tất' : withdrawalStatus === 'REJECTED' ? 'Đã từ chối và hoàn tiền' : withdrawalStatus}</span></p></div>}
              <div className="space-y-7 relative z-10">
                <div className="flex gap-3">
                  <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 font-bold text-[11px] shadow-[0_0_0_4px_var(--card)] ${currentStep >= 1 ? 'bg-primary text-primary-foreground' : 'bg-card border border-border text-muted-foreground'}`}>1</div>
                  <div>
                    <h4 className="text-foreground font-bold text-xs">Yêu cầu</h4>
                    <p className="text-muted-foreground text-[10px] mt-1 leading-relaxed">Tạo yêu cầu rút tiền và xác nhận thông tin.</p>
                  </div>
                </div>

                <div className="flex gap-3">
                  <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 font-bold text-[11px] shadow-[0_0_0_4px_var(--card)] ${currentStep >= 2 ? 'bg-primary text-primary-foreground' : 'bg-card border border-border text-muted-foreground'}`}>2</div>
                  <div>
                    <h4 className="text-foreground font-bold text-xs">Kiểm tra / duyệt</h4>
                    <p className="text-muted-foreground text-[10px] mt-1 leading-relaxed">Admin kiểm tra thông tin ngân hàng và duyệt yêu cầu.</p>
                  </div>
                </div>

                <div className="flex gap-3">
                  <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 font-bold text-[11px] shadow-[0_0_0_4px_var(--card)] ${currentStep >= 3 ? 'bg-primary text-primary-foreground' : 'bg-card border border-border text-muted-foreground'}`}>3</div>
                  <div>
                    <h4 className="text-foreground font-bold text-xs">Chuyển tiền</h4>
                    <p className="text-muted-foreground text-[10px] mt-1 leading-relaxed">Tiền sẽ được chuyển đến tài khoản của bạn.</p>
                  </div>
                </div>

                <div className="flex gap-3">
                  <div className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 font-bold text-[11px] shadow-[0_0_0_4px_var(--card)] ${currentStep >= 4 ? 'bg-primary text-primary-foreground' : 'bg-card border border-border text-muted-foreground'}`}>4</div>
                  <div>
                    <h4 className="text-foreground font-bold text-xs">Hoàn tất</h4>
                    <p className="text-muted-foreground text-[10px] mt-1 leading-relaxed">Bạn sẽ nhận được thông báo khi giao dịch thành công.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  );
}