import React, { useMemo, useState } from 'react';
import { Head, router } from '@inertiajs/react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import DepositMethodCard from '@/Components/Ck44/DepositMethodCard';
import DepositAmountGrid from '@/Components/Ck44/DepositAmountGrid';
import PromotionCard from '@/Components/Ck44/PromotionCard';
import BottomNav from '@/Components/Ck44/BottomNav';

export default function Index(props) {
  const methods = props.methods || [
    {
      id: 'bkash',
      title: 'Bkash VIP',
      subtitle: 'Bkash Limits',
      logo: '/images/bkash.png',
    },
    {
      id: 'nagad',
      title: 'NAGAD VIP',
      subtitle: 'Nagad',
      logo: '/images/nagad.png',
    },
  ];

  const channelsByMethod = props.channelsByMethod || {
    bkash: [{ id: 1, name: 'Bkash VIP', code: 'QKP' }],
    nagad: [{ id: 2, name: 'NAGAD VIP', code: 'QKP' }],
  };

  const promotions = props.promotions || [
    {
      id: 1,
      title: 'আপনার প্রথম ডিপোজিটে ৫০% বোনাস উপভোগ করুন',
      minAmount: 100,
      description:
        'সর্বনিম্ন আমানত হল ১০০ টাকা, আপনি সর্বাধিক ৫০% বোনাস এবং লাকি ড্রু পেতে পারেন, সর্বাধিক বোনাস ৫০০০ টাকা পর্যন্ত।',
      bonusMap: {
        100: 50,
        200: 100,
        300: 110,
        400: 110,
        500: 120,
        1000: 150,
        3000: 300,
        5000: 500,
        10000: 1000,
        20000: 2000,
        25000: 2500,
      },
    },
  ];

  const amountOptions = props.amountOptions || [100, 200, 300, 400, 500, 1000, 3000, 5000, 10000, 15000, 20000, 25000];

  const [selectedMethod, setSelectedMethod] = useState(methods?.[0]?.id || 'bkash');
  const [selectedChannel, setSelectedChannel] = useState(channelsByMethod?.[methods?.[0]?.id || 'bkash']?.[0]?.id || null);
  const [selectedAmount, setSelectedAmount] = useState(null);
  const [selectedPromotion, setSelectedPromotion] = useState('none');

  const activeChannels = useMemo(() => {
    return channelsByMethod?.[selectedMethod] || [];
  }, [channelsByMethod, selectedMethod]);

  const activePromotion = useMemo(() => {
    return promotions.find((item) => item.id === selectedPromotion) || null;
  }, [promotions, selectedPromotion]);

  const handleMethodChange = (methodId) => {
    setSelectedMethod(methodId);
    setSelectedChannel(channelsByMethod?.[methodId]?.[0]?.id || null);
  };

  const handleNext = () => {
    if (!selectedAmount || !selectedChannel) return;

    router.post('/deposit/submit', {
      method: selectedMethod,
      channel_id: selectedChannel,
      amount: selectedAmount,
      promotion_id: selectedPromotion === 'none' ? null : selectedPromotion,
    });
  };

  return (
    <div className='pb-20'>
      <Head title="Deposit" />

      <div className="mx-auto min-h-screen max-w-3xl bg-gray-100 pb-28">
        <div className="sticky top-0 z-30 flex items-center justify-between bg-teal-900 px-4 py-4 text-yellow-400 shadow">
          <button type="button" className="text-2xl">←</button>
          <h1 className="text-2xl font-bold">Deposit</h1>
          <div className="flex items-center gap-3 text-xl">
            <span>📋</span>
            <span>💬</span>
          </div>
        </div>

        <div className="space-y-5 p-4">
          <section>
            <h2 className="mb-3 text-xl font-semibold text-gray-900">Deposit Method</h2>
            <div className="grid grid-cols-2 gap-3">
              {methods.map((method) => (
                <DepositMethodCard
                  key={method.id}
                  item={method}
                  selected={selectedMethod === method.id}
                  onClick={() => handleMethodChange(method.id)}
                />
              ))}
            </div>
          </section>

          <div className="rounded-xl border border-red-200 bg-white p-4 text-lg leading-8 text-red-500">
            ❗ ❗ ❗ NOTE: অনুগ্রহ করে আপনার ডিপোজিট করার পরে অবশ্যই আপনার Trx-ID আইটি সাবমিট করবেন। তাহলে খুব দ্রুত আপনার একাউন্টের মধ্যে টাকা যোগ হয়ে যাবে।
          </div>

          <section className="rounded-xl bg-white p-4 shadow-sm">
            <h2 className="mb-3 text-xl font-semibold text-gray-900">Payment channels</h2>

            <div className="space-y-3">
              {activeChannels.map((channel) => (
                <button
                  key={channel.id}
                  type="button"
                  onClick={() => setSelectedChannel(channel.id)}
                  className={`w-full rounded-xl border p-4 text-left ${
                    selectedChannel === channel.id ? 'border-red-500 text-red-600' : 'border-gray-200 text-gray-900'
                  }`}
                >
                  <span className="text-xl font-bold">{channel.name}</span>
                  {channel.code ? <span className="ml-2 text-lg italic">{channel.code}</span> : null}
                </button>
              ))}
            </div>

            <p className="mt-4 text-lg leading-8 text-red-500">
              অনুগ্রহ করে সতর্ক থাকুন যে সম্প্রতি ডিপোজিট পরিষেবা প্রদানের জন্য Telegram বা Facebook এর ভান করে অনেক স্ক্যামার রয়েছে। আমাদের অফিসিয়াল ডিপোজিটগুলো শুধুমাত্র প্ল্যাটফর্মের মধ্যে সম্পন্ন হয়।
            </p>
          </section>

          <section className="rounded-xl bg-white p-4 shadow-sm">
            <h2 className="mb-3 text-xl font-semibold text-gray-900">Deposit Amounts</h2>

            <DepositAmountGrid
              amounts={amountOptions}
              selectedAmount={selectedAmount}
              onSelect={setSelectedAmount}
              bonusMap={activePromotion?.bonusMap || {}}
            />

            <div className="mt-4 rounded-xl border border-gray-200 bg-gray-50 px-4 py-4 text-2xl text-gray-700">
              ৳ {selectedAmount ? Number(selectedAmount).toLocaleString() : '100 - 25,000'}
            </div>

            <p className="mt-3 text-2xl text-red-500">Deposit Info: 24/24</p>
          </section>

          <section className="rounded-xl bg-white p-4 shadow-sm">
            <h2 className="mb-3 text-xl font-semibold text-gray-900">Promotions</h2>

            {promotions.map((promotion) => (
              <div key={promotion.id} className="mb-3">
                <PromotionCard
                  promotion={promotion}
                  checked={selectedPromotion === promotion.id}
                  onChange={() => setSelectedPromotion(promotion.id)}
                  selectedAmount={selectedAmount}
                />
              </div>
            ))}

            <label className="block cursor-pointer rounded-xl border border-red-200 bg-red-50 p-4">
              <div className="flex items-center gap-3">
                <input
                  type="radio"
                  name="promotion"
                  checked={selectedPromotion === 'none'}
                  onChange={() => setSelectedPromotion('none')}
                />
                <span className="text-lg font-semibold text-gray-900">Do not participate in any promotions</span>
              </div>
            </label>
          </section>
        </div>

        <div className="fixed bottom-0 left-0 right-0 border-t bg-white p-4">
          <div className="mx-auto max-w-3xl">
            <button
              type="button"
              onClick={handleNext}
              disabled={!selectedAmount || !selectedChannel}
              className="w-full rounded-xl bg-red-500 px-5 py-4 text-xl font-semibold text-white disabled:cursor-not-allowed disabled:bg-gray-300"
            >
              Next
            </button>
          </div>
        </div>
      </div>
      
    </div>
  );
}