import { Head } from '@inertiajs/react';
import { ChevronLeft, CalendarDays, ChevronRight, X } from 'lucide-react';
import { useMemo, useState } from 'react';

function VipMedalIcon() {
  return (
    <svg viewBox="0 0 92 92" className="h-[62px] w-[62px]" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="vipRibbon" x1="46" y1="4" x2="46" y2="88" gradientUnits="userSpaceOnUse">
          <stop stopColor="#F8F8F4" />
          <stop offset="1" stopColor="#CFCBC3" />
        </linearGradient>
        <linearGradient id="vipCircle" x1="46" y1="26" x2="46" y2="78" gradientUnits="userSpaceOnUse">
          <stop stopColor="#F2F1ED" />
          <stop offset="1" stopColor="#C9C5BD" />
        </linearGradient>
      </defs>

      <path d="M22 6H70V18L61 28H31L22 18V6Z" fill="url(#vipRibbon)" />
      <rect x="28" y="8" width="36" height="8" rx="2" fill="#B9B3A8" opacity="0.7" />
      <path d="M30 18H40V42L35 47L30 42V18Z" fill="#D7D2CA" />
      <path d="M52 18H62V42L57 47L52 42V18Z" fill="#D7D2CA" />
      <path d="M46 24L72 38L58 46L62 72L46 63L30 72L34 46L20 38L46 24Z" fill="#D9D5CE" />
      <circle cx="46" cy="46" r="19" fill="url(#vipCircle)" stroke="#BFB9AF" strokeWidth="3" />
      <path d="M46 34L49.2 41H57L50.8 45.8L52.9 53L46 48.8L39.1 53L41.2 45.8L35 41H42.8L46 34Z" fill="#EDEAE4" />
    </svg>
  );
}

function BoxNoDataIcon() {
  return (
    <svg viewBox="0 0 220 220" className="h-[220px] w-[220px]" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M110 62L119 90L147 99L119 108L110 136L101 108L73 99L101 90L110 62Z" fill="#2A91E8" opacity="0.9" />
      <circle cx="74" cy="84" r="4" fill="#2A91E8" />
      <circle cx="65" cy="115" r="5" fill="#2A91E8" />
      <circle cx="46" cy="104" r="2.5" fill="#2A91E8" />
      <circle cx="188" cy="76" r="2.5" fill="#2A91E8" />
      <path d="M171 95L178 103L186 95L178 87L171 95Z" fill="#2A91E8" />
      <path d="M61 53L67 60L74 53L67 46L61 53Z" fill="#2A91E8" />
      <path d="M160 116L167 124L175 116L167 108L160 116Z" fill="#2A91E8" />

      <path d="M112 154C112 154 140 144 152 114" stroke="#2290EA" strokeWidth="2.5" strokeDasharray="6 5" strokeLinecap="round" />
      <path d="M124 106L160 84L149 120L142 103L124 106Z" fill="#2791E8" />

      <path
        d="M75 150L90 108H130L145 150V190H75V150Z"
        stroke="#2490E9"
        strokeWidth="3"
        strokeLinejoin="round"
      />
      <path d="M75 150H108C108 159 114 166 122 166C130 166 136 159 136 150H145" stroke="#2490E9" strokeWidth="3" />
    </svg>
  );
}

function RewardsHistoryOverlay({ open, onClose }) {
  if (!open) return null;

  return (
    <div className="absolute inset-0 z-40 bg-[#ececf1]">
      <div className="sticky top-0 z-20 bg-[#04585a]">
        <div className="mx-auto flex h-[68px] max-w-md items-center justify-between px-4">
          <button type="button" onClick={onClose} className="text-[#ffbf18]">
            <ChevronLeft size={30} strokeWidth={2.4} />
          </button>
          <h1 className="text-[22px] font-extrabold text-[#ffbf18]">Rewards History</h1>
          <div className="w-[32px]" />
        </div>
      </div>

      <div className="mx-auto max-w-md">
        <div className="flex items-center justify-between bg-[#e8e8eb] px-4 py-3">
          <div className="flex rounded-[10px] bg-[#f6f6f6] p-[2px]">
            <button className="rounded-[8px] bg-gradient-to-b from-[#d6dce4] to-[#c3ccd6] px-5 py-2 text-[14px] font-bold text-white shadow-inner">
              1 day
            </button>
            <button className="px-5 py-2 text-[14px] font-bold text-[#565656]">7 days</button>
            <button className="px-5 py-2 text-[14px] font-bold text-[#565656]">30 days</button>
          </div>

          <button className="flex items-center gap-3 rounded-[8px] border border-[#6a6a6a] bg-[#f6f6f6] px-3 py-[9px] text-[14px] font-bold text-[#555]">
            <CalendarDays size={18} />
            <span>04/06- 04/06</span>
          </button>
        </div>

        <div className="flex min-h-[calc(100vh-120px)] flex-col items-center justify-center px-4 pb-16">
          <BoxNoDataIcon />
          <p className="-mt-2 text-[28px] font-normal text-[#2490E9]">No data</p>
        </div>
      </div>
    </div>
  );
}

function UpgradePopup({ open, onClose, activeLevel }) {
  if (!open) return null;

  return (
    <div className="absolute inset-0 z-50 bg-black/30">
      <div className="mx-auto flex min-h-screen max-w-md items-end justify-center p-4 pb-16">
        <div className="relative w-full rounded-[18px] bg-white p-6 shadow-xl">
          <button
            type="button"
            onClick={onClose}
            className="absolute -bottom-16 left-1/2 flex h-11 w-11 -translate-x-1/2 items-center justify-center rounded-full bg-white text-[#7d7d7d] shadow"
          >
            <X size={22} />
          </button>

          <div className="flex items-start justify-between gap-4">
            <div>
              <h3 className="text-[18px] font-extrabold text-[#333]">Upgrade</h3>
              <p className="mt-2 text-[16px] leading-6 text-[#555]">
                To level up, all conditions must be fulfilled
              </p>
            </div>
            <div className="shrink-0">
              <VipMedalIcon />
            </div>
          </div>

          <div className="mt-8">
            <p className="text-[16px] font-bold text-[#8a8a8a]">Total bet</p>

            <div className="mt-3">
              <p className="text-[16px] font-bold text-[#555]">
                {activeLevel?.current?.bet ?? '0.00'} / {activeLevel?.next?.bet ?? '10,000.00'}
              </p>

              <div className="mt-3 h-3 w-full rounded-full bg-[#efefef]">
                <div
                  className="h-3 rounded-full bg-[#d8d8d8]"
                  style={{ width: `${Math.max(0, Math.min(activeLevel?.progress ?? 0, 100))}%` }}
                />
              </div>

              <div className="mt-5 flex items-center justify-between">
                <span className="text-[24px] font-bold text-[#999]">{activeLevel?.progress ?? 0}%</span>
                <button
                  type="button"
                  className="rounded-full bg-[#333] px-6 py-2 text-[16px] font-bold text-white"
                >
                  GO
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ProgressDots({ active = 0, count = 3 }) {
  return (
    <div className="mt-4 flex justify-center gap-2">
      {Array.from({ length: count }).map((_, i) => (
        <span
          key={i}
          className={`h-[10px] rounded-full ${i === active ? 'w-[18px] bg-[#9d9a94]' : 'w-[10px] bg-[#d0d0d0]'}`}
        />
      ))}
    </div>
  );
}

export default function Index({ currentVip = 0, levels = [] }) {
  const [activeIndex, setActiveIndex] = useState(currentVip);
  const [showHistory, setShowHistory] = useState(false);
  const [showUpgrade, setShowUpgrade] = useState(false);

  const vipLabels = useMemo(() => Array.from({ length: 51 }, (_, i) => `VIP${i}`), []);

  const activeLevel = useMemo(() => {
    const fromLevels = levels[activeIndex];
    if (fromLevels) return fromLevels;

    return {
      name: `VIP${activeIndex}`,
      current: {
        deposit: '-',
        deposit_count: '-',
        bet: '0.00',
      },
      next: {
        deposit: '-',
        deposit_count: '-',
        bet: '10,000.00',
      },
      progress: 0,
    };
  }, [levels, activeIndex]);

  return (
    <>
      <Head title="VIP" />

      <div className="relative min-h-screen overflow-hidden bg-[#ececf1]">
        <div className="sticky top-0 z-30 bg-[#04585a]">
          <div className="mx-auto flex h-[68px] max-w-md items-center justify-between px-4">
            <button type="button" onClick={() => window.history.back()} className="text-[#ffbf18]">
              <ChevronLeft size={30} strokeWidth={2.4} />
            </button>
            <div className="w-[80px]" />
            <button type="button" className="text-[18px] font-extrabold text-[#ffbf18]">
              Rules
            </button>
          </div>
        </div>

        <div className="mx-auto max-w-md px-5 pb-10 pt-3">
          {/* top card */}
          <div className="relative overflow-hidden rounded-[18px] bg-gradient-to-br from-[#d7dbe2] via-[#f0f1f4] to-[#d2d6dd] px-5 py-4 shadow-[0_1px_2px_rgba(0,0,0,0.03)]">
            <div className="pointer-events-none absolute inset-0">
              <div className="absolute right-[40px] top-[18px] h-[70px] w-[120px] rotate-[-20deg] rounded-full bg-white/40 blur-[18px]" />
              <div className="absolute left-[180px] top-0 h-full w-[120px] -skew-x-[28deg] bg-white/10" />
            </div>

            <div className="relative flex items-center justify-between">
              <div className="flex items-center gap-3">
                <VipMedalIcon />
                <h2 className="text-[32px] font-extrabold tracking-[0.3px] text-[#303030]">
                  {activeLevel?.name || `VIP${activeIndex}`}
                </h2>
              </div>

              <button
                type="button"
                onClick={() => setShowUpgrade(true)}
                className="flex h-[50px] min-w-[160px] items-center justify-center gap-2 rounded-full bg-gradient-to-b from-[#f8f8f9] to-[#dfe3e8] px-6 text-[14px] font-bold text-[#4f5660] shadow-[inset_0_1px_0_rgba(255,255,255,0.95)]"
              >
                <span>Upgrade</span>
                <ChevronRight size={18} strokeWidth={3} />
              </button>
            </div>
          </div>

          {/* vip labels 0-50 */}
          <div className="mt-4 overflow-x-auto rounded-[14px] bg-white/70 px-2 py-2 shadow-[0_1px_2px_rgba(0,0,0,0.03)]">
            <div className="flex min-w-max gap-2">
              {vipLabels.map((label, index) => {
                const isActive = index === activeIndex;
                return (
                  <button
                    key={label}
                    type="button"
                    onClick={() => setActiveIndex(index)}
                    className={`rounded-full px-4 py-2 text-[13px] font-bold transition-all ${
                      isActive
                        ? 'bg-[#04585a] text-[#ffbf18]'
                        : 'bg-[#eef1f4] text-[#5b6168]'
                    }`}
                  >
                    {label}
                  </button>
                );
              })}
            </div>
          </div>

          {/* salary section */}
          <div className="mt-10">
            <div className="flex items-center gap-3">
              <span className="h-[22px] w-[5px] bg-[#ff3131]" />
              <h3 className="text-[20px] font-bold text-[#4f5660]">Salary</h3>
            </div>

            <button
              type="button"
              onClick={() => setShowHistory(true)}
              className="mt-5 inline-flex h-[34px] items-center gap-2 rounded-[8px] bg-gradient-to-b from-[#cfd7e0] to-[#bcc7d3] px-4 text-[14px] font-bold text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.7)]"
            >
              <svg viewBox="0 0 24 24" className="h-[17px] w-[17px]" fill="none">
                <path d="M12 7V12L15 14" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M4 12A8 8 0 1 0 6.3 6.3" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
                <path d="M4 4V9H9" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span>History</span>
            </button>

            <p className="mt-5 text-[14px] text-[#5d6672]">Remaining unlock time:</p>
          </div>

          {/* level up */}
          <div className="mt-14">
            <div className="flex items-center gap-3">
              <span className="h-[22px] w-[5px] bg-[#ff3131]" />
              <h3 className="text-[20px] font-bold text-[#4f5660]">Level Up Requirements</h3>
            </div>

            <p className="mt-4 text-[14px] text-[#5d6672]">
              To level up, all conditions must be fulfilled
            </p>

            <div className="mt-5 overflow-hidden rounded-[18px] bg-[#fcfcfc] shadow-[0_1px_2px_rgba(0,0,0,0.03)]">
              <div className="grid grid-cols-[1.15fr_1fr_1fr]">
                <div className="bg-[#fcfcfc] p-4" />
                <div className="flex flex-col items-center justify-center gap-1 border-l border-[#f0f0f0] p-4">
                  <VipMedalIcon />
                  <div className="-mt-2 text-[18px] font-extrabold text-[#111]">
                    {activeLevel?.name || `VIP${activeIndex}`}
                  </div>
                </div>
                <div className="flex flex-col items-center justify-center gap-1 border-l border-[#f0f0f0] p-4 opacity-35">
                  <VipMedalIcon />
                  <div className="-mt-2 text-[18px] font-extrabold text-[#8d8d8d]">
                    VIP{Math.min(activeIndex + 1, 50)}
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-[1.15fr_1fr_1fr] border-t border-[#f1f1f1]">
                <div className="bg-[#f5f6f8] p-4 text-[18px] font-bold leading-6 text-[#4f5660]">
                  Total deposit
                </div>
                <div className="border-l border-[#f1f1f1] p-4 text-right text-[22px] text-[#a7a29b]">
                  {activeLevel?.current?.deposit ?? '-'}
                </div>
                <div className="border-l border-[#f1f1f1] p-4 text-right text-[22px] text-[#dad7d3]">
                  {activeLevel?.next?.deposit ?? '-'}
                </div>
              </div>

              <div className="grid grid-cols-[1.15fr_1fr_1fr] border-t border-[#f1f1f1]">
                <div className="bg-[#f5f6f8] p-4 text-[18px] font-bold leading-6 text-[#4f5660]">
                  Total deposit
                  <br />
                  count
                </div>
                <div className="border-l border-[#f1f1f1] p-4 text-right text-[22px] text-[#a7a29b]">
                  {activeLevel?.current?.deposit_count ?? '-'}
                </div>
                <div className="border-l border-[#f1f1f1] p-4 text-right text-[22px] text-[#dad7d3]">
                  {activeLevel?.next?.deposit_count ?? '-'}
                </div>
              </div>

              <div className="grid grid-cols-[1.15fr_1fr_1fr] border-t border-[#f1f1f1]">
                <div className="bg-[#f5f6f8] p-4 text-[18px] font-bold leading-6 text-[#4f5660]">
                  Total bet
                </div>

                <div className="border-l border-[#f1f1f1] p-4">
                  <div className="text-[16px] font-bold text-[#9e9a95]">
                    {activeLevel?.current?.bet ?? '0.00'}
                  </div>
                  <div className="mt-1 text-right text-[14px] font-bold text-[#a8a4a0]">
                    /2,000.00
                  </div>
                  <div className="mt-10 text-right text-[18px] font-bold text-[#7b7b7b]">
                    {activeLevel?.progress ?? 0}%
                  </div>
                </div>

                <div className="border-l border-[#f1f1f1] p-4">
                  <div className="text-[16px] font-bold text-[#d2cfcb]">
                    {activeLevel?.next?.bet ?? '10,000.00'}
                  </div>
                  <div className="mt-1 text-right text-[14px] font-bold text-[#d2cfcb]">
                    /10,000.00
                  </div>
                  <div className="mt-10 text-right text-[18px] font-bold text-[#7b7b7b]">
                    0%
                  </div>
                </div>
              </div>
            </div>

            <ProgressDots active={Math.min(activeIndex % 3, 2)} count={3} />
          </div>
        </div>

        <RewardsHistoryOverlay open={showHistory} onClose={() => setShowHistory(false)} />
        <UpgradePopup open={showUpgrade} onClose={() => setShowUpgrade(false)} activeLevel={activeLevel} />
      </div>
    </>
  );
}