import { Head } from '@inertiajs/react';
import { useState } from 'react';
import RewardHeader, { RewardHelpIcon } from '@/Components/Ck44/RewardHeader';
import Ck44Layout from '@/Layouts/Ck44Layout';

export default function RescueFundDetails({
  type,
  accumulatedNegativeProfit,
  claimableAmount,
  helpText,
  table,
}) {
  const [showHelp, setShowHelp] = useState(false);

  return (
    <>
      <Head title="Rescue fund" />

      <div className="min-h-screen overflow-hidden bg-[#edf1fa]">
        <RewardHeader
          title="Rescue fund"
          right={
            <button
              type="button"
              onClick={() => setShowHelp((v) => !v)}
              className="transition-transform duration-200 active:scale-95"
            >
              <RewardHelpIcon />
            </button>
          }
        />

        <div className="mx-auto max-w-md pb-10">
          {/* TOP HERO */}
          <section className="relative overflow-hidden bg-gradient-to-b from-[#8fa5ff] via-[#b8ccff] to-[#eef4ff] pb-6">
            {/* background beams */}
            <div className="pointer-events-none absolute inset-0">
              <div className="absolute left-1/2 top-0 h-[260px] w-[260px] -translate-x-1/2 rounded-full bg-white/30 blur-3xl" />

              <div className="absolute left-[10%] top-[5%] h-[220px] w-[2px] rotate-[25deg] bg-white/35 blur-[1px]" />
              <div className="absolute left-[30%] top-[0%] h-[260px] w-[2px] rotate-[18deg] bg-white/25 blur-[1px]" />
              <div className="absolute left-[52%] top-[0%] h-[280px] w-[2px] rotate-[0deg] bg-white/30 blur-[1px]" />
              <div className="absolute left-[73%] top-[3%] h-[240px] w-[2px] -rotate-[20deg] bg-white/25 blur-[1px]" />
              <div className="absolute left-[88%] top-[6%] h-[210px] w-[2px] -rotate-[28deg] bg-white/35 blur-[1px]" />
            </div>

            {/* floating icons */}
            <div className="pointer-events-none absolute inset-0 overflow-hidden">
              <div className="float-slow absolute left-[4%] top-[28px] flex h-16 w-16 items-center justify-center rounded-full border border-white/50 bg-white/20 shadow-[0_8px_20px_rgba(255,255,255,0.2)] backdrop-blur-sm">
                <span className="text-[30px]">🎟️</span>
              </div>

              <div className="float-medium absolute right-[8%] top-[34px] flex h-16 w-16 items-center justify-center rounded-full border border-white/50 bg-white/20 shadow-[0_8px_20px_rgba(255,255,255,0.2)] backdrop-blur-sm">
                <span className="text-[30px]">🪙</span>
              </div>

              <div className="float-fast absolute left-[14px] top-[170px] flex h-14 w-14 items-center justify-center rounded-full border border-white/40 bg-white/15 backdrop-blur-sm">
                <span className="text-[24px]">💵</span>
              </div>

              <div className="float-medium absolute right-[14px] top-[170px] flex h-14 w-14 items-center justify-center rounded-full border border-white/40 bg-white/15 backdrop-blur-sm">
                <span className="text-[24px]">💰</span>
              </div>

              <div className="float-fast absolute left-[92px] top-[108px] text-[34px] drop-shadow-[0_10px_16px_rgba(255,105,180,0.35)]">
                💗
              </div>
            </div>

            {/* gift visual */}
            <div className="relative z-10 px-4 pt-4">
              <div className="relative mx-auto flex h-[230px] items-center justify-center">
                <div className="absolute bottom-[6px] h-20 w-[88%] rounded-full bg-white/40 blur-2xl" />

                <div className="relative scale-[1.04]">
                  <div className="absolute -left-16 bottom-[15px] text-[72px] opacity-85">🫶</div>
                  <div className="absolute -right-16 bottom-[15px] scale-x-[-1] text-[72px] opacity-85">🫶</div>

                  <div className="absolute left-1/2 top-[18px] -translate-x-1/2 text-[74px]">🎁</div>
                  <div className="absolute left-[50%] top-[72px] -translate-x-1/2 text-[82px]">🪙</div>
                  <div className="absolute left-[39%] top-[86px] text-[48px]">🪙</div>
                  <div className="absolute left-[59%] top-[89px] text-[44px]">🪙</div>
                </div>
              </div>

              <p className="-mt-1 text-center text-[27px] font-extrabold tracking-tight text-[#24314f]">
                Today
              </p>

              {showHelp ? (
                <div className="mx-2 mt-3 rounded-[18px] border border-white/70 bg-white/90 p-4 text-[14px] font-semibold leading-6 text-[#48536b] shadow-[0_12px_24px_rgba(80,108,170,0.12)] backdrop-blur-sm">
                  {helpText}
                </div>
              ) : null}

              <div className="mt-3 grid grid-cols-2 gap-2 px-2">
                <div className="rounded-[18px] border border-[#cfdaef] bg-[#f5f8ff]/90 px-3 py-3 text-center shadow-[0_8px_18px_rgba(119,144,205,0.10)] backdrop-blur-sm">
                  <div className="mb-1 flex items-center justify-center gap-1 text-[#7ea0ee]">
                    <span>✦</span>
                    <span>✦</span>
                  </div>
                  <p className="text-[13px] font-extrabold leading-4 text-[#2f3952]">
                    Accumulated Negative Profit
                  </p>
                  <p className="mt-2 text-[20px] font-black text-[#3158ff]">
                    {accumulatedNegativeProfit}
                  </p>
                </div>

                <div className="rounded-[18px] border border-[#cfdaef] bg-[#f5f8ff]/90 px-3 py-3 text-center shadow-[0_8px_18px_rgba(119,144,205,0.10)] backdrop-blur-sm">
                  <div className="mb-1 flex items-center justify-center gap-1 text-[#7ea0ee]">
                    <span>✦</span>
                    <span>✦</span>
                  </div>
                  <p className="text-[13px] font-extrabold leading-4 text-[#2f3952]">
                    Claimable Amount
                  </p>
                  <p className="mt-2 text-[20px] font-black text-[#3158ff]">
                    {claimableAmount}
                  </p>
                </div>
              </div>
            </div>
          </section>

          {/* CLAIM SAFE AREA */}
          <section className="relative overflow-hidden px-5 py-9 text-center">
            <div className="pointer-events-none absolute inset-0">
              <svg
                className="absolute left-0 top-8 w-full opacity-60"
                viewBox="0 0 400 200"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0 130C45 108 83 104 124 120C169 137 202 165 245 159C294 152 332 112 400 84"
                  stroke="rgba(255,205,86,0.35)"
                  strokeWidth="6"
                  strokeLinecap="round"
                />
                <path
                  d="M12 150C64 129 107 127 148 143C190 159 228 175 272 167C317 159 355 126 390 107"
                  stroke="rgba(255,205,86,0.20)"
                  strokeWidth="4"
                  strokeLinecap="round"
                />
              </svg>
            </div>

            <div className="relative mx-auto w-fit">
              <div className="float-slow absolute -left-10 top-6 text-[62px] rotate-[-18deg]">⚡</div>
              <div className="float-medium absolute -right-10 top-8 text-[56px]">💗</div>

              <div className="absolute -left-5 bottom-3 text-[62px]">🪙</div>
              <div className="absolute -right-5 bottom-3 text-[62px]">🪙</div>

              <div className="relative flex h-[190px] w-[190px] items-center justify-center rounded-[30px] bg-gradient-to-br from-[#79c1ff] via-[#5da8f0] to-[#3d7fe0] shadow-[0_22px_40px_rgba(63,127,224,0.32)]">
                <div className="absolute inset-[18px] rounded-[24px] border border-[#1f62bc]/30 bg-gradient-to-br from-[#8fd1ff] to-[#5f9fe7] shadow-inner" />
                <div className="absolute inset-[28px] rounded-[18px] border-[3px] border-[#2b67b6]" />
                <div className="absolute right-[18px] top-[48px] h-10 w-3 rounded-full bg-[#79baf7] shadow-inner" />
                <div className="absolute right-[18px] bottom-[36px] h-10 w-3 rounded-full bg-[#79baf7] shadow-inner" />
                <div className="absolute right-[42px] top-1/2 h-6 w-8 -translate-y-1/2 rounded-full bg-[#78b7f6] shadow-inner" />

                <div className="relative z-10 flex h-20 w-20 items-center justify-center rounded-full border-[6px] border-[#3d7dca] bg-gradient-to-br from-[#4f92df] to-[#3678cb] shadow-inner">
                  <div className="relative h-10 w-10">
                    <span className="absolute left-1/2 top-0 -translate-x-1/2 text-[28px]">✨</span>
                    <span className="absolute left-0 top-1/2 -translate-y-1/2 text-[22px]">⭐</span>
                    <span className="absolute right-0 top-1/2 -translate-y-1/2 text-[22px]">⭐</span>
                    <span className="absolute bottom-0 left-1/2 -translate-x-1/2 text-[22px]">⭐</span>
                  </div>
                </div>
              </div>
            </div>

            <button
              type="button"
              className="-mt-2 inline-flex min-w-[190px] items-center justify-center rounded-full bg-gradient-to-b from-[#f2f2f2] to-[#bcbcbc] px-10 py-3 text-[20px] font-black tracking-wide text-[#5e5e5e] shadow-[inset_0_2px_0_rgba(255,255,255,0.95),0_8px_15px_rgba(0,0,0,0.12)] transition-all duration-200 active:translate-y-[1px] active:scale-[0.98]"
            >
              Claim
            </button>
          </section>

          {/* TYPE */}
          <div className="px-4 text-center text-[18px] font-extrabold text-[#2f3445]">
            Game type : <span className="text-[#3d3d3d]">{type}</span>
          </div>

          {/* TABLE */}
          <div className="mt-4 px-3">
            <div className="overflow-hidden rounded-[18px] border border-[#d4def4] bg-white shadow-[0_10px_24px_rgba(104,126,180,0.10)]">
              <div className="px-3 py-3 text-[15px] font-semibold text-[#4a57d3]">
                Reward Cycle
              </div>

              <div className="overflow-x-auto">
                <table className="w-full min-w-[640px] text-center text-[14px]">
                  <thead>
                    <tr className="border-t border-[#e8eefb]">
                      <th className="bg-[#6b8cf5] px-4 py-4 text-left font-extrabold text-white">
                        Deposit Amounts
                      </th>
                      {table.depositAmounts.map((item, i) => (
                        <th
                          key={i}
                          className="bg-[#ffffff] px-3 py-4 font-bold text-[#3e4760]"
                        >
                          {item}
                        </th>
                      ))}
                    </tr>
                  </thead>

                  <tbody>
                    <tr className="border-t border-[#e8eefb]">
                      <td className="bg-[#eef3ff] px-4 py-4 font-extrabold leading-5 text-[#55607a]">
                        Net loss ≥
                      </td>
                      {table.netLoss.map((item, i) => (
                        <td
                          key={i}
                          className="px-3 py-4 font-bold leading-5 text-[#3c4359]"
                        >
                          {item}
                        </td>
                      ))}
                    </tr>

                    <tr className="border-t border-[#e8eefb]">
                      <td className="bg-[#eef3ff] px-4 py-4 font-extrabold leading-5 text-[#55607a]">
                        Bonus Giving Ratio %
                      </td>
                      {table.bonusRatio.map((item, i) => (
                        <td key={i} className="px-3 py-4 text-[#3c4359]">
                          {item}
                        </td>
                      ))}
                    </tr>

                    <tr className="border-t border-[#e8eefb]">
                      <td className="bg-[#eef3ff] px-4 py-4 font-extrabold leading-5 text-[#55607a]">
                        Points Giving Ratio %
                      </td>
                      {table.pointsRatio.map((item, i) => (
                        <td key={i} className="px-3 py-4 text-[#3c4359]">
                          {item}
                        </td>
                      ))}
                    </tr>

                    <tr className="border-t border-[#e8eefb]">
                      <td className="bg-[#eef3ff] px-4 py-4 font-extrabold leading-5 text-[#55607a]">
                        Ticket
                      </td>
                      {table.ticket.map((item, i) => (
                        <td
                          key={i}
                          className="px-3 py-4 font-semibold leading-5 text-[#3c4359]"
                        >
                          {item}
                        </td>
                      ))}
                    </tr>
                  </tbody>
                </table>
              </div>

              <div className="flex items-center justify-center gap-2 px-3 py-2">
                <span className="text-[#888]">◀</span>
                <div className="h-[8px] w-[170px] rounded-full bg-[#d4d4d4]">
                  <div className="h-[8px] w-[82%] rounded-full bg-[#7f7f7f]" />
                </div>
                <span className="text-[#888]">▶</span>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          .float-slow {
            animation: floatSlow 5.8s ease-in-out infinite;
          }

          .float-medium {
            animation: floatMedium 4.6s ease-in-out infinite;
          }

          .float-fast {
            animation: floatFast 3.5s ease-in-out infinite;
          }

          @keyframes floatSlow {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
          }

          @keyframes floatMedium {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
          }

          @keyframes floatFast {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-6px); }
          }
        `}</style>
      </div>
    </>
  );
}

 