'use client';

import { Header } from '@/components/ui/Header';
import { Footer } from '@/components/ui/Footer';
import Link from 'next/link';
import { useState } from 'react';

const paymentMethods = [
  {
    id: 1,
    name: 'bKash',
    accountNumber: '01700123456',
    accountHolder: 'Gaming Tournament',
    icon: '📱',
    color: 'from-pink-500/20 to-pink-500/10',
  },
  {
    id: 2,
    name: 'Nagad',
    accountNumber: '01600123456',
    accountHolder: 'Gaming Tournament',
    icon: '📲',
    color: 'from-orange-500/20 to-orange-500/10',
  },
  {
    id: 3,
    name: 'Rocket',
    accountNumber: '01900123456',
    accountHolder: 'Gaming Tournament',
    icon: '🚀',
    color: 'from-purple-500/20 to-purple-500/10',
  },
];

export default function DepositPage() {
  const [selectedMethod, setSelectedMethod] = useState<number | null>(null);
  const [formData, setFormData] = useState({
    amount: '',
    senderNumber: '',
    transactionId: '',
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const handleMethodSelect = (methodId: number) => {
    setSelectedMethod(methodId);
    setError('');
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setSuccess('');

    if (!selectedMethod) {
      setError('পেমেন্ট পদ্ধতি নির্বাচন করুন');
      return;
    }

    if (!formData.amount || !formData.senderNumber || !formData.transactionId) {
      setError('সব ক্ষেত্র পূরণ করুন');
      return;
    }

    setLoading(true);

    try {
      const response = await fetch('/api/wallet/deposit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId: 1, // TODO: Get from session
          paymentMethodId: selectedMethod,
          amount: formData.amount,
          senderNumber: formData.senderNumber,
          transactionId: formData.transactionId,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        setError(data.message || 'ডিপোজিট ব্যর্থ');
        return;
      }

      setSuccess('ডিপোজিট রিকোয়েস্ট সফলভাবে জমা দেওয়া হয়েছে। Admin এটি অনুমোদন করবে।');
      setFormData({ amount: '', senderNumber: '', transactionId: '' });
      setSelectedMethod(null);

      setTimeout(() => {
        window.location.href = '/dashboard';
      }, 3000);
    } catch (err) {
      setError('ডিপোজিট ব্যর্থ। দয়া করে পরে চেষ্টা করুন।');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex flex-col min-h-screen">
      <Header appName="Gaming Tournament" isLoggedIn={true} />

      <main className="flex-1 py-12">
        <div className="container-max max-w-4xl">
          {/* Header */}
          <div className="mb-8">
            <Link href="/dashboard" className="text-orange-500 hover:underline mb-4 inline-block">
              ← ড্যাশবোর্ডে ফিরুন
            </Link>
            <h1 className="text-4xl font-bold mb-2">ডিপোজিট করুন</h1>
            <p className="text-slate-400">আপনার অ্যাকাউন্টে টাকা যোগ করুন</p>
          </div>

          {/* Main Content */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Left: Instructions */}
            <div className="lg:col-span-1 space-y-6">
              <div className="card-featured">
                <h3 className="font-bold mb-4 flex items-center gap-2">
                  <span>📋</span> ডিপোজিট প্রক্রিয়া
                </h3>
                <ol className="space-y-3 text-sm">
                  <li className="flex gap-3">
                    <span className="font-bold text-orange-500 min-w-6">1</span>
                    <span>পেমেন্ট পদ্ধতি বেছে নিন</span>
                  </li>
                  <li className="flex gap-3">
                    <span className="font-bold text-orange-500 min-w-6">2</span>
                    <span>প্রদর্শিত নম্বরে টাকা পাঠান</span>
                  </li>
                  <li className="flex gap-3">
                    <span className="font-bold text-orange-500 min-w-6">3</span>
                    <span>লেনদেন ID এবং প্রমাণ যোগ করুন</span>
                  </li>
                  <li className="flex gap-3">
                    <span className="font-bold text-orange-500 min-w-6">4</span>
                    <span>Admin অনুমোদনের জন্য অপেক্ষা করুন</span>
                  </li>
                </ol>
              </div>

              <div className="bg-green-500/10 border border-green-500/30 rounded-lg p-4">
                <h4 className="font-semibold mb-2 flex items-center gap-2">
                  <span>✓</span> নিরাপত্তা টিপস
                </h4>
                <ul className="text-sm text-green-300 space-y-2">
                  <li>• সর্বদা সঠিক নম্বর থেকে পাঠান</li>
                  <li>• লেনদেন ID সংরক্ষণ করুন</li>
                  <li>• প্রমাণ স্ক্রিনশট সংরক্ষণ করুন</li>
                  <li>• কখনও PIN শেয়ার করবেন না</li>
                </ul>
              </div>
            </div>

            {/* Right: Form */}
            <div className="lg:col-span-2 space-y-6">
              {/* Payment Methods */}
              <div>
                <h3 className="font-bold mb-4">পেমেন্ট পদ্ধতি নির্বাচন করুন</h3>
                <div className="grid grid-cols-1 gap-4">
                  {paymentMethods.map((method) => (
                    <button
                      key={method.id}
                      onClick={() => handleMethodSelect(method.id)}
                      className={`card text-left transition ${
                        selectedMethod === method.id
                          ? 'border-orange-500 bg-orange-500/10'
                          : 'hover:border-orange-500'
                      }`}
                    >
                      <div className="flex items-start gap-4">
                        <div className="text-3xl">{method.icon}</div>
                        <div className="flex-1">
                          <h4 className="font-bold mb-1">{method.name}</h4>
                          <p className="text-slate-400 text-sm mb-2">{method.accountHolder}</p>
                          <p className="font-mono font-bold">{method.accountNumber}</p>
                        </div>
                        {selectedMethod === method.id && (
                          <div className="w-5 h-5 bg-orange-500 rounded-full flex items-center justify-center text-white text-sm">
                            ✓
                          </div>
                        )}
                      </div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Form */}
              {selectedMethod && (
                <form onSubmit={handleSubmit} className="card space-y-4">
                  <h3 className="font-bold mb-4">ডিপোজিট বিস্তারিত</h3>

                  {error && (
                    <div className="bg-red-500/20 border border-red-500 text-red-300 px-4 py-3 rounded">
                      {error}
                    </div>
                  )}

                  {success && (
                    <div className="bg-green-500/20 border border-green-500 text-green-300 px-4 py-3 rounded">
                      {success}
                    </div>
                  )}

                  {/* Amount */}
                  <div>
                    <label className="block text-sm font-semibold mb-2">পরিমাণ (টাকায়)</label>
                    <input
                      type="number"
                      name="amount"
                      value={formData.amount}
                      onChange={handleChange}
                      required
                      min="10"
                      max="50000"
                      placeholder="যেমন: 500"
                      className="w-full"
                    />
                    <p className="text-xs text-slate-400 mt-1">সর্বনিম্ন: ৳10, সর্বাধিক: ৳50,000</p>
                  </div>

                  {/* Sender Number */}
                  <div>
                    <label className="block text-sm font-semibold mb-2">আপনার মোবাইল নম্বর</label>
                    <input
                      type="tel"
                      name="senderNumber"
                      value={formData.senderNumber}
                      onChange={handleChange}
                      required
                      placeholder="০১XXXXXXXXX"
                      className="w-full"
                    />
                  </div>

                  {/* Transaction ID */}
                  <div>
                    <label className="block text-sm font-semibold mb-2">লেনদেন ID / Ref নম্বর</label>
                    <input
                      type="text"
                      name="transactionId"
                      value={formData.transactionId}
                      onChange={handleChange}
                      required
                      placeholder="যেমন: H5N9G2K1"
                      className="w-full"
                    />
                    <p className="text-xs text-slate-400 mt-1">আপনার পেমেন্ট সেবা দ্বারা প্রদত্ত ID নম্বর</p>
                  </div>

                  {/* Summary */}
                  {formData.amount && (
                    <div className="bg-slate-800/50 border border-slate-700 rounded-lg p-4 space-y-2">
                      <div className="flex justify-between">
                        <span className="text-slate-400">ডিপোজিট পরিমাণ:</span>
                        <span className="font-bold">৳ {formData.amount}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-slate-400">চার্জ:</span>
                        <span className="font-bold text-yellow-400">বিনামূল্যে</span>
                      </div>
                      <div className="border-t border-slate-700 pt-2 flex justify-between">
                        <span className="text-slate-300 font-semibold">আপনি পাবেন:</span>
                        <span className="text-orange-500 font-bold text-lg">৳ {formData.amount}</span>
                      </div>
                    </div>
                  )}

                  {/* Submit */}
                  <button
                    type="submit"
                    disabled={loading}
                    className="btn btn-primary w-full mt-6"
                  >
                    {loading ? 'প্রক্রিয়াধীন...' : 'ডিপোজিট রিকোয়েস্ট জমা দিন'}
                  </button>

                  <p className="text-xs text-slate-400 text-center">
                    আপনার তথ্য নিরাপদ এবং এনক্রিপ্ট করা হয়।
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </main>

      <Footer appName="Gaming Tournament" />
    </div>
  );
}