import React, { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '../../Layouts/EmployerLayout';
import { CreditCard, CheckCircle2, AlertCircle, ArrowRight, Sparkles } from 'lucide-react';

export default function Subscription({ currentPlan, expiresAt, plans }) {
    const [selectedId, setSelectedId] = useState('premium');
    const [showSuccess, setShowSuccess] = useState(false);

    const handleSelect = (id) => {
        setSelectedId(id);
        setShowSuccess(true);
        setTimeout(() => setShowSuccess(false), 4000);
    };

    return (
        <EmployerLayout title="Manage Subscription">
            <Head title="Subscription - Employer Portal" />

            <div className="space-y-8 select-none">
                {/* Current Status Banner */}
                <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div className="flex items-center space-x-4">
                        <div className="w-12 h-12 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center font-bold">
                            <CreditCard className="w-6 h-6" />
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Current Active Plan</div>
                            <div className="text-lg font-bold text-slate-900">{currentPlan}</div>
                            <div className="text-xs text-slate-500 mt-0.5">Renews automatically on <span className="font-bold text-slate-700">{expiresAt}</span></div>
                        </div>
                    </div>

                    <div className="flex items-center space-x-2 bg-emerald-50 border border-emerald-200 text-emerald-800 px-3.5 py-1.5 rounded-xl text-xs font-bold">
                        <CheckCircle2 className="w-4 h-4 text-emerald-600" />
                        <span>Active & Verified</span>
                    </div>
                </div>

                {showSuccess && (
                    <div className="p-4 bg-emerald-500 text-white rounded-xl text-xs font-bold flex items-center space-x-2 shadow-sm animate-fade-in">
                        <Sparkles className="w-4 h-4" />
                        <span>Plan successfully updated! Mock PayTabs billing cycle applied.</span>
                    </div>
                )}

                {/* Pricing Grid */}
                <div className="space-y-4">
                    <div>
                        <h2 className="text-lg font-bold text-slate-900 tracking-tight">Available Subscription Tiers</h2>
                        <p className="text-xs text-slate-500 mt-0.5">Upgrade or change your plan anytime. Zero agency recruitment commissions.</p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-2">
                        {plans.map((plan) => {
                            const isSelected = selectedId === plan.id;

                            return (
                                <div
                                    key={plan.id}
                                    className={`bg-white rounded-2xl border-2 shadow-sm flex flex-col justify-between overflow-hidden transition-all relative ${
                                        isSelected 
                                            ? 'border-[#185FA5] ring-4 ring-[#185FA5]/10' 
                                            : 'border-slate-200 hover:border-slate-300'
                                    }`}
                                >
                                    {plan.popular && (
                                        <div className="bg-[#185FA5] text-white text-[10px] font-bold uppercase tracking-wider text-center py-1 shadow-xs">
                                            Most Popular Tier
                                        </div>
                                    )}

                                    <div className="p-6 space-y-6 flex-1 flex flex-col justify-between">
                                        <div className="space-y-4">
                                            <div>
                                                <h3 className="font-bold text-base text-slate-900">{plan.name}</h3>
                                                <div className="mt-2 flex items-baseline space-x-1">
                                                    <span className="text-3xl font-extrabold text-slate-900">{plan.price}</span>
                                                    <span className="text-xs font-semibold text-slate-500">/ {plan.period}</span>
                                                </div>
                                            </div>

                                            <ul className="space-y-3 pt-4 border-t border-slate-100">
                                                {plan.features.map(f => (
                                                    <li key={f} className="flex items-start space-x-3 text-xs text-slate-600">
                                                        <CheckCircle2 className="w-4 h-4 text-emerald-600 flex-shrink-0 mt-0.5" />
                                                        <span>{f}</span>
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>

                                        <button
                                            type="button"
                                            onClick={() => handleSelect(plan.id)}
                                            className={`w-full h-11 rounded-xl font-bold text-xs flex items-center justify-center transition-colors shadow-sm ${
                                                isSelected
                                                    ? 'bg-emerald-600 hover:bg-emerald-700 text-white'
                                                    : 'bg-[#185FA5] hover:bg-[#144f8a] text-white'
                                            }`}
                                        >
                                            {isSelected ? 'Current Active Tier' : 'Select Plan Tier'}
                                        </button>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
