// src/pages/SubscriptionHistory.jsx
import React from 'react';
import { ArrowBackIosNew,  CalendarToday, AccessTime, CreditCard, Person, Visibility } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { CrownIcon } from 'lucide-react';

const subscriptions = [
  {
    id: "SUB722HSN",
    plan: "Gold Plan",
    profileCount: 150,
    usedCount: 70,
    billingCycle: "Monthly",
    expireDate: "19/11/2025",
    startDate: "19/10/2025",
    startTime: "10:00 AM",
    paymentMethod: "UPI Mode",
    amount: 1800,
    isActive: true
  },
  {
    id: "SUB722HSN",
    plan: "Gold Plan",
    profileCount: 150,
    usedCount: 70,
    billingCycle: "Monthly",
    expireDate: "19/11/2025",
    startDate: "19/10/2025",
    startTime: "10:00 AM",
    paymentMethod: "UPI Mode",
    amount: 1800,
    isActive: false
  },
  
   { id: "SUB722HSN",
    plan: "Gold Plan",
    profileCount: 150,
    usedCount: 70,
    billingCycle: "Monthly",
    expireDate: "19/11/2025",
    startDate: "19/10/2025",
    startTime: "10:00 AM",
    paymentMethod: "UPI Mode",
    amount: 1800,
    isActive: false
  }
];

export default function SubscriptionHistory() {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen ">
      {/* Royal Header */}
      <motion.header
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        className="bg-[#034E08] text-white shadow-2xl rounded-[10px]"
      >
        <div className="flex items-center justify-between px-5 py-8 safe-area-top relative">
          
          <h1 className="text-2xl font-bold">Subscription History</h1>
          <div className="w-12" />
        </div>
      </motion.header>

      {/* Current Plan Title */}
      <div className="px-6 pt-8">
        <motion.h2
          initial={{ opacity: 0, x: -50 }}
          animate={{ opacity: 1, x: 0 }}
          className="text-3xl font-bold text-gray-900 flex items-center gap-3"
        >
          <CrownIcon className="text-amber-500 text-4xl" />
          Current Plan
        </motion.h2>
      </div>

<div className=''>
      {/* Subscription Cards */}
      <div className="px-2 py-8  pb-32 grid grid-cols-1 md:grid-cols-3 gap-2">
        {subscriptions.map((sub, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.2 }}
            className={`relative rounded-3xl overflow-hidden border border-1 border-gray-200 w-full max-w-md ${
              sub.isActive
                ? 'border-amber-400 bg-gradient-to-br from-amber-50 to-pink-50'
                : 'border-pink-200 bg-gradient-to-br from-pink-50 to-rose-50 opacity-90'
            }`}
          >
            {/* Crown Badge */}
            <div className={` text-[12px] absolute z-[999] -top-1 left-1/2 -translate-x-1/2 px-8 py-2 rounded-b-3xl font-bold text-white shadow-xl flex items-center gap-2 ${
              sub.isActive ? 'bg-gradient-to-r from-amber-500 to-orange-600' : 'bg-gradient-to-r from-pink-500 to-rose-600'
            }`}>
              <CrownIcon className="text-[12px]" />
              {sub.plan}
              {sub.isActive && <span className="ml-2 text-[12px] bg-green-400 text-black px-3 py-1 rounded-full">ACTIVE</span>}
            </div>

            <div className="pt-14 pb-8 px-8">
              {/* Subscription ID */}
              <div className="text-center mb-6">
                <p className="text-sm text-gray-600">Subscription ID</p>
                <p className="text-[18px] font-bold text-gray-900">{sub.id}</p>
              </div>

              {/* Stats Row */}
              <div className="grid grid-cols-2 gap-6 mb-4">
                <div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center ">
                  <Person className="text-4xl text-amber-600 mx-auto mb-2" />
                  <p className="text-[18px] font-bold text-gray-900">{sub.profileCount}</p>
                  <p className="text-sm text-gray-600">Profile Count</p>
                </div>
                <div className="bg-white/70 backdrop-blur rounded-2xl p-5 text-center ">
                  <Visibility className="text-4xl text-green-600 mx-auto mb-2" />
                  <p className="text-[18px] font-bold text-gray-900">{sub.usedCount}</p>
                  <p className="text-sm text-gray-600">Used Count</p>
                </div>
              </div>

              {/* Details Grid */}
              <div className="space-y-2 text-lg">
                <div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
                  <span className="flex items-center gap-3 text-gray-700 text-[14px]">
                    <CalendarToday className="text-amber-600" /> Billing Cycle
                  </span>
                  <span className="font-bold text-gray-900 text-[14px]">{sub.billingCycle}</span>
                </div>
                <div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
                  <span className="flex items-center gap-3 text-gray-700 text-[14px]">
                    <CalendarToday className="text-red-600" /> Expire Date
                  </span>
                  <span className="font-bold text-red-600 text-[14px]">{sub.expireDate}</span>
                </div>
                <div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
                  <span className="flex items-center gap-3 text-gray-700 text-[14px]">
                    <AccessTime className="text-green-600" /> Start Date & Time
                  </span>
                  <span className="font-bold text-gray-900 text-[14px]">{sub.startDate} | {sub.startTime}</span>
                </div>
                <div className="flex justify-between items-center bg-white/60 backdrop-blur rounded-xl px-5 py-3">
                  <span className="flex items-center gap-3 text-gray-700 text-[14px]">
                    <CreditCard className="text-purple-600" /> Payment Method
                  </span>
                  <span className="font-bold text-purple-700 text-[14px]">{sub.paymentMethod}</span>
                </div>
              </div>

              {/* Total Amount */}
              <div className="mt-8 text-center flex gap-4 items-center justify-center flex-wrap">
                <p className="text-lg text-gray-600">Total Plan Amount</p>
                <p className="text-[18px] font-bold text-gray-900 bg-white/70 backdrop-blur px-4 py-2 rounded-[10px]">
                  ₹{sub.amount.toLocaleString()}
                </p>
              </div>
            </div>
          </motion.div>
        ))}
      </div>
</div>
      {/* Final Message */}
      {/* <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.6 }}
        className="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-red-600 to-rose-700 text-white py-8 text-center shadow-2xl"
      >
        <p className="text-xl font-bold">Your journey to forever is fully powered</p>
        <p className="text-green-200 mt-2">Enjoy unlimited matches with your Gold Plan</p>
      </motion.div> */}
    </div>
  );
}