import { Head, Link } from '@inertiajs/react';
import { ChevronLeft, Copy, CheckSquare, Gift, CalendarCheck2, Coins, UserPlus, BadgePercent, ChevronRight, Pencil, CircleHelp } from 'lucide-react';

function RewardHeader() {
  const goBack = () => {
    if (typeof window !== 'undefined' && window.history.length > 1) {
      window.history.back();
      return;
    }

    window.location.href = '/';
  };

  return (
    <div className="relative overflow-hidden rounded-b-[36px] bg-gradient-to-br from-[#ffb08f] via-[#ff814f] to-[#ff5a27] px-4 pb-24 pt-5 text-white shadow-[0_12px_30px_rgba(255,110,60,0.28)]">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute -left-10 top-14 h-28 w-28 rounded-full bg-[#ffc44d]/55 blur-[2px]" />
        <div className="absolute -right-6 top-4 h-20 w-20 rounded-full bg-[#ffb13c]/65 blur-[2px]" />
        <div className="absolute -left-24 -top-16 h-72 w-72 rounded-full bg-white/10" />
        <div className="absolute right-[-70px] top-[110px] h-56 w-56 rounded-full bg-[#ff4e33]/22" />
        <div className="absolute right-[26px] top-[145px] h-10 w-10 rounded-full bg-[#ffad3b]/30 blur-sm" />
        <div className="absolute left-1/2 top-[62px] -translate-x-1/2 text-[72px] font-black tracking-[0.14em] text-white/8 sm:text-[88px]">
          REWARD
        </div>
      </div>

      <div className="relative z-10 flex items-center justify-between">
        <button
          type="button"
          onClick={goBack}
          className="inline-flex h-9 w-9 items-center justify-center rounded-full bg-white/10 backdrop-blur-sm transition hover:bg-white/20"
        >
          <ChevronLeft className="h-5 w-5" />
        </button>
        <h1 className="text-[19px] font-bold tracking-[0.01em]">Reward Center</h1>
        <div className="w-9" />
      </div>
    </div>
  );
}

function RewardCenterProfileCard({ user }) {
  return (
    <div className="relative -mt-16 overflow-hidden rounded-[24px] border border-[#c7cbd4] bg-[#dfe3ea]/95 px-4 pb-5 pt-3 shadow-[0_14px_28px_rgba(38,44,66,0.10)] backdrop-blur-sm">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute inset-y-0 right-0 w-[58%] opacity-[0.07]">
          <svg viewBox="0 0 320 220" className="h-full w-full">
            <path d="M184 30c28 0 50 20 50 45 0 14-7 27-18 35l48 67h-48l-34-48c-5 1-10 2-16 2-29 0-52-20-52-46s23-55 70-55Z" fill="currentColor" />
            <path d="M245 62c21 0 39 14 39 33 0 18-18 32-39 32s-39-14-39-32c0-19 18-33 39-33Z" fill="currentColor" />
            <path d="M248 149c16 0 30 12 30 27s-14 27-30 27-30-12-30-27 14-27 30-27Z" fill="currentColor" />
            <path d="M206 159l-38 24v-48l38 24Z" fill="currentColor" />
          </svg>
        </div>
      </div>

      <div className="relative z-10 flex items-start justify-between gap-3">
        <div className="flex min-w-0 items-start gap-3">
          <div className="h-[76px] w-[76px] shrink-0 overflow-hidden rounded-full border-[3px] border-[#d8b45b] bg-white shadow-sm">
            <img
              src={user?.avatar || 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=300&auto=format&fit=crop'}
              alt={user?.name || 'Profile'}
              className="h-full w-full object-cover"
            />
          </div>

          <div className="min-w-0 pt-1 text-[#38414f]">
            <div className="flex items-center gap-2">
              <h2 className="truncate text-[18px] font-bold leading-none text-black">
                {user?.username || user?.phone || '01792618309'}
              </h2>
              <button type="button" className="text-[#2a2f38]">
                <Copy className="h-4 w-4" />
              </button>
            </div>

            <div className="mt-2 flex items-start gap-2">
              <div>
                <p className="text-[14px] font-semibold text-[#6b7280]">Nickname:</p>
                <p className="text-[14px] leading-none text-[#6b7280]">
                  {user?.nickname || user?.username || '01792618309'}
                </p>
              </div>
              <button type="button" className="mt-1 text-[#6b7280]">
                <Pencil className="h-4 w-4" />
              </button>
            </div>

            <div className="mt-2 flex items-end gap-2 text-[#5b6575]">
              <span className="text-[18px] leading-none">৳</span>
              <span className="text-[18px] font-semibold leading-none">0.00</span>
              <span className="text-[52px] font-medium leading-[0.72] text-[#606975]">C</span>
            </div>
          </div>
        </div>

        <Link
          href={user?.signInHref || '#'}
          className="absolute right-0 top-0 inline-flex h-[42px] items-center gap-2 rounded-bl-[20px] rounded-tr-[24px] bg-gradient-to-r from-[#d61f2f] via-[#e43339] to-[#c51522] px-4 text-[14px] font-semibold text-white shadow-[0_8px_18px_rgba(197,22,34,0.30)]"
        >
          <CheckSquare className="h-4 w-4" />
          <span>Sign In</span>
          <ChevronRight className="h-4 w-4" />
        </Link>
      </div>

      <div className="relative z-10 mt-5 flex items-center justify-between text-[#596272]">
        <div className="flex items-center gap-1.5 text-[14px] font-semibold">
          <span className="text-[22px] leading-none">♛</span>
          <span>VIP0</span>
        </div>
        <button type="button" className="flex items-center gap-1 text-[14px]">
          <span>Benefits</span>
          <CircleHelp className="h-4 w-4" />
        </button>
      </div>

      <div className="relative z-10 mt-2 flex items-center gap-2">
        <div className="h-[5px] flex-1 rounded-full bg-[#b8bec9]">
          <div className="h-[5px] w-[2%] rounded-full bg-[#8791a0]" />
        </div>
        <span className="text-[14px] font-medium text-[#596272]">0 / 1</span>
      </div>
    </div>
  );
}

function RewardMenuCard({ item }) {
  const icons = {
    bonus: <Gift className="h-8 w-8" />,
    signin: <CalendarCheck2 className="h-8 w-8" />,
    rescue: <Coins className="h-8 w-8" />,
    invite: <UserPlus className="h-8 w-8" />,
    promo: <BadgePercent className="h-8 w-8" />,
  };

  return (
    <Link
      href={item.href || '#'}
      className={`group relative flex aspect-[1/0.82] overflow-hidden rounded-[18px] bg-gradient-to-br ${item.gradient} p-5 text-white shadow-[0_12px_24px_rgba(50,60,90,0.10)] transition duration-200 hover:-translate-y-0.5`}
    >
      <div className="absolute inset-0">
        <div className="absolute -left-5 top-8 h-16 w-16 rounded-full bg-white/12" />
        <div className="absolute bottom-3 right-4 h-14 w-14 rounded-full bg-white/10" />
        <div className="absolute left-5 top-5 opacity-20">
          <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
            <circle cx="8" cy="8" r="2" fill="white" />
            <circle cx="20" cy="8" r="2" fill="white" />
            <circle cx="32" cy="8" r="2" fill="white" />
            <circle cx="8" cy="20" r="2" fill="white" />
            <circle cx="20" cy="20" r="2" fill="white" />
            <circle cx="32" cy="20" r="2" fill="white" />
            <circle cx="8" cy="32" r="2" fill="white" />
            <circle cx="20" cy="32" r="2" fill="white" />
            <circle cx="32" cy="32" r="2" fill="white" />
          </svg>
        </div>
        <svg className="absolute inset-0 h-full w-full opacity-[0.18]" viewBox="0 0 200 200" preserveAspectRatio="none">
          <path d="M-10 165 C60 105, 85 80, 144 32" stroke="white" strokeWidth="18" strokeLinecap="round" fill="none" />
          <path d="M145 28 C160 23, 174 23, 190 32" stroke="white" strokeWidth="18" strokeLinecap="round" fill="none" opacity="0.6" />
        </svg>
      </div>

      <div className="relative z-10 flex h-full w-full flex-col items-center justify-center text-center">
        <div className="mb-4 flex h-[64px] w-[64px] items-center justify-center rounded-full bg-white text-[#f19b1e] shadow-[0_8px_18px_rgba(255,255,255,0.25)]">
          {icons[item.key] || <Gift className="h-8 w-8" />}
        </div>
        <span className="text-[17px] font-semibold tracking-[0.01em]">{item.title}</span>
      </div>
    </Link>
  );
}

export default function Index({ user, menus = [] }) {
  const menuData = menus.length
    ? menus
    : [
        { key: 'bonus', title: 'Bonus', href: '#', gradient: 'from-[#1ac88c] to-[#3edb84]' },
        { key: 'signin', title: 'Sign In', href: '#', gradient: 'from-[#38a7ff] to-[#5e79ff]' },
        { key: 'rescue', title: 'Rescue fund', href: '#', gradient: 'from-[#f5b339] to-[#ffcf2d]' },
        { key: 'invite', title: 'Invite Friends', href: '#', gradient: 'from-[#ff8a6b] to-[#c51d6f]' },
        { key: 'promo', title: 'Promo Code', href: '#', gradient: 'from-[#12b9d8] to-[#04d2ef]' },
      ];

  return (
    <>
      <Head title="Reward Center" />
      <div className="min-h-screen bg-[#ececf1]">
        <RewardHeader />

        <div className="mx-auto max-w-md px-4 pb-10">
          <RewardCenterProfileCard user={user} />

          <div className="mt-10 grid grid-cols-2 gap-[18px]">
            {menuData.map((item) => (
              <RewardMenuCard key={item.title} item={item} />
            ))}
          </div>
        </div>
      </div>
    </>
  );
}