import { Link, useForm, usePage } from '@inertiajs/react';
import { SeoHead } from '@/components/seo-head';
import { motion } from 'framer-motion';
import { ArrowRight, Building2, CheckCircle, GraduationCap, User } from 'lucide-react';
import PublicLayout from '@/layouts/public-layout';

interface MembershipTier {
    id: number;
    name: string;
    slug: string;
    type: string;
    duration: string;
    price_usd: string;
    is_active: boolean;
}

interface Benefit { id: number; body: string }
interface MemberCategory { id: number; title: string; summary: string | null; eligibility: string | null }

interface Props {
    tiers: MembershipTier[];
    benefits: Benefit[];
    categories: MemberCategory[];
}

const tierIcons: Record<string, typeof User> = {
    student: GraduationCap,
    individual: User,
    institutional: Building2,
};

export default function Join({ tiers, benefits, categories }: Props) {
    const { errors } = usePage().props as { errors: Record<string, string> };
    const { data, setData, post, processing } = useForm({
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
        tier_id: '' as string | number,
        title: '',
        profession: '',
    });

    // Group tiers by type for display
    const studentTier = tiers.find((t) => t.type === 'student');
    const individualTiers = tiers.filter((t) => t.type === 'individual');
    const institutionalTiers = tiers.filter((t) => t.type === 'institutional');

    function submit(e: React.FormEvent) {
        e.preventDefault();
        post('/join');
    }

    return (
        <div>
            <SeoHead
                title="Join ABEC Africa"
                description="Become a member of the African Biomedical Engineering Consortium. Open to students, individual professionals, and institutions. Access training, research collaboration, and a pan-African network."
                image="/images/african-university-convocation.jpg"
                keywords="join ABEC Africa, ABEC Africa membership, biomedical engineering membership Africa, African biomedical engineering network, ABEC student membership"
                url="https://abecafrica.org/join"
                jsonLd={{
                    '@context': 'https://schema.org',
                    '@type': 'WebPage',
                    url: 'https://abecafrica.org/join',
                    name: 'Join ABEC Africa',
                    description: 'Membership application for the African Biomedical Engineering Consortium.',
                    isPartOf: { '@id': 'https://abecafrica.org/#website' },
                    inLanguage: 'en-GB',
                }}
            />
            {/* HERO */}
            <section className="relative min-h-[65vh] flex items-end overflow-hidden">
                <div className="absolute inset-0">
                    <img
                        src="/images/african-woman-biology-books.jpg"
                        alt="African woman enthusiastically browsing biology books"
                        className="w-full h-full object-cover object-center"
                    />
                    <div
                        className="absolute inset-0"
                        style={{
                            background:
                                'linear-gradient(to top, rgba(17,17,19,0.97) 0%, rgba(27,38,92,0.65) 45%, rgba(27,38,92,0.2) 80%, transparent 100%)',
                        }}
                    />
                </div>
                <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 pt-48 w-full">
                    <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
                        <div className="flex items-center gap-3 mb-4">
                            <div className="w-8 h-px bg-[#d0d4ec]/60" />
                            <span className="text-[#d0d4ec]/70 text-xs tracking-[0.2em] uppercase font-semibold">Become Part of the Movement</span>
                        </div>
                        <h1 className="text-5xl lg:text-7xl font-black text-white tracking-tight leading-tight mb-4">Join ABEC</h1>
                        <p className="text-white/60 text-lg max-w-xl leading-relaxed">
                            Open to students, professionals, universities, industries, researchers, governments, and anyone aligned with our
                            mission.
                        </p>
                    </motion.div>
                </div>
            </section>

            {/* PRICING */}
            <section className="py-20 bg-[#F8F2E6]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="section-rule" />
                    <span className="label-caps block mb-4">Membership Fees</span>
                    <h2 className="text-3xl font-black text-[#1b265c] tracking-tight mb-12">Choose Your Tier</h2>

                    <div className="grid md:grid-cols-3 gap-6 mb-8">
                        {/* Student */}
                        {studentTier && (
                            <motion.div
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.5 }}
                                className="border p-8 bg-[#1b265c] border-[#1b265c]"
                            >
                                <div className="w-10 h-10 mb-6 flex items-center justify-center bg-white/10">
                                    <GraduationCap size={18} className="text-white" />
                                </div>
                                <h3 className="text-2xl font-black tracking-tight mb-1 text-white">Students</h3>
                                <div className="text-4xl font-black mt-4 mb-1 text-[#d0d4ec]">Free</div>
                                <p className="text-xs mb-6 text-white/50">Until graduation</p>
                                <p className="text-sm text-white/60">
                                    No fees until graduation. Join, learn, and connect with Africa's biomedical engineering community at no cost.
                                </p>
                            </motion.div>
                        )}

                        {/* Individual */}
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.5, delay: 0.1 }}
                            className="border p-8 bg-white border-[#d0d4ec] hover:border-[#df2548] transition-colors"
                        >
                            <div className="w-10 h-10 mb-6 flex items-center justify-center bg-[#F8F2E6]">
                                <User size={18} className="text-[#df2548]" />
                            </div>
                            <h3 className="text-2xl font-black tracking-tight mb-1 text-[#1b265c]">Individuals</h3>
                            <div className="text-4xl font-black mt-4 mb-1 text-[#df2548]">$5</div>
                            <p className="text-xs mb-6 text-[#555e8a]">per year</p>
                            <div className="space-y-2 mb-4">
                                {individualTiers.map((t) => (
                                    <div key={t.id} className="flex justify-between items-center py-2 border-b border-[#d0d4ec]">
                                        <span className="text-xs text-[#3a2020]/70">
                                            {t.duration === 'annual' ? 'Annual Subscription' : 'Lifetime Membership'}
                                        </span>
                                        <span className="text-xs font-bold text-[#1b265c]">
                                            ${parseFloat(t.price_usd).toFixed(0)} {t.duration === 'annual' ? '/ yr' : 'once'}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        </motion.div>

                        {/* Institutional */}
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.5, delay: 0.2 }}
                            className="border p-8 bg-white border-[#d0d4ec] hover:border-[#df2548] transition-colors"
                        >
                            <div className="w-10 h-10 mb-6 flex items-center justify-center bg-[#F8F2E6]">
                                <Building2 size={18} className="text-[#df2548]" />
                            </div>
                            <h3 className="text-2xl font-black tracking-tight mb-1 text-[#1b265c]">Institutions</h3>
                            <div className="text-4xl font-black mt-4 mb-1 text-[#df2548]">$100</div>
                            <p className="text-xs mb-6 text-[#555e8a]">per year</p>
                            <div className="space-y-2 mb-4">
                                {institutionalTiers.map((t) => (
                                    <div key={t.id} className="flex justify-between items-center py-2 border-b border-[#d0d4ec]">
                                        <span className="text-xs text-[#3a2020]/70">
                                            {t.duration === 'annual' ? 'Annual Subscription' : 'Lifetime Membership'}
                                        </span>
                                        <span className="text-xs font-bold text-[#1b265c]">
                                            ${parseFloat(t.price_usd).toFixed(0)} {t.duration === 'annual' ? '/ yr' : 'once'}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* REGISTRATION FORM */}
            <section className="py-20 bg-white">
                <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="section-rule" />
                    <span className="label-caps block mb-4">Create Your Account</span>
                    <h2 className="text-3xl font-black text-[#1b265c] tracking-tight mb-8">Join ABEC Today</h2>

                    <form onSubmit={submit} className="space-y-6">
                        {/* Membership tier */}
                        <div>
                            <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-3">
                                Membership Tier *
                            </label>
                            <div className="grid sm:grid-cols-2 gap-3">
                                {tiers.map((tier) => (
                                    <label
                                        key={tier.id}
                                        className={`flex items-center gap-3 p-4 border cursor-pointer transition-colors ${
                                            Number(data.tier_id) === tier.id
                                                ? 'border-[#1b265c] bg-[#F8F2E6]'
                                                : 'border-[#d0d4ec] hover:border-[#df2548]'
                                        }`}
                                    >
                                        <input
                                            type="radio"
                                            name="tier_id"
                                            value={tier.id}
                                            checked={Number(data.tier_id) === tier.id}
                                            onChange={() => setData('tier_id', tier.id)}
                                            className="accent-[#1b265c]"
                                        />
                                        <div>
                                            <div className="text-sm font-bold text-[#1b265c]">{tier.name}</div>
                                            <div className="text-xs text-[#555e8a]">
                                                {parseFloat(tier.price_usd) === 0
                                                    ? 'Free'
                                                    : `$${parseFloat(tier.price_usd).toFixed(0)} ${tier.duration === 'annual' ? '/ year' : 'lifetime'}`}
                                            </div>
                                        </div>
                                    </label>
                                ))}
                            </div>
                            {errors.tier_id && <p className="text-[#df2548] text-xs mt-1">{errors.tier_id}</p>}
                        </div>

                        {/* Name + Email */}
                        <div className="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">Full Name *</label>
                                <input
                                    type="text"
                                    value={data.name}
                                    onChange={(e) => setData('name', e.target.value)}
                                    placeholder="Dr. Jane Mwangi"
                                    className="w-full h-10 px-3 border border-[#D4BC96] text-sm text-[#3a2020] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                />
                                {errors.name && <p className="text-[#df2548] text-xs mt-1">{errors.name}</p>}
                            </div>
                            <div>
                                <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                    Email Address *
                                </label>
                                <input
                                    type="email"
                                    value={data.email}
                                    onChange={(e) => setData('email', e.target.value)}
                                    placeholder="jane@university.ac.ke"
                                    className="w-full h-10 px-3 border border-[#D4BC96] text-sm text-[#3a2020] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                />
                                {errors.email && <p className="text-[#df2548] text-xs mt-1">{errors.email}</p>}
                            </div>
                        </div>

                        {/* Title + Profession */}
                        <div className="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                    Title (optional)
                                </label>
                                <input
                                    type="text"
                                    value={data.title}
                                    onChange={(e) => setData('title', e.target.value)}
                                    placeholder="Dr., Prof., Mr., Ms."
                                    className="w-full h-10 px-3 border border-[#D4BC96] text-sm text-[#3a2020] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                />
                            </div>
                            <div>
                                <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                    Profession (optional)
                                </label>
                                <input
                                    type="text"
                                    value={data.profession}
                                    onChange={(e) => setData('profession', e.target.value)}
                                    placeholder="Biomedical Engineer, Researcher..."
                                    className="w-full h-10 px-3 border border-[#D4BC96] text-sm text-[#3a2020] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                />
                            </div>
                        </div>

                        {/* Password */}
                        <div className="grid sm:grid-cols-2 gap-4">
                            <div>
                                <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">Password *</label>
                                <input
                                    type="password"
                                    value={data.password}
                                    onChange={(e) => setData('password', e.target.value)}
                                    placeholder="Min. 8 characters"
                                    className="w-full h-10 px-3 border border-[#D4BC96] text-sm text-[#3a2020] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                />
                                {errors.password && <p className="text-[#df2548] text-xs mt-1">{errors.password}</p>}
                            </div>
                            <div>
                                <label className="text-[10px] font-bold tracking-[0.15em] uppercase text-[#df2548] block mb-2">
                                    Confirm Password *
                                </label>
                                <input
                                    type="password"
                                    value={data.password_confirmation}
                                    onChange={(e) => setData('password_confirmation', e.target.value)}
                                    placeholder="Repeat password"
                                    className="w-full h-10 px-3 border border-[#D4BC96] text-sm text-[#3a2020] placeholder:text-[#555e8a] focus:outline-none focus:ring-2 focus:ring-[#df2548] focus:border-[#df2548] transition-colors bg-white"
                                />
                            </div>
                        </div>

                        <button
                            type="submit"
                            disabled={processing}
                            className="w-full h-12 bg-[#1b265c] text-white text-xs font-bold tracking-[0.18em] uppercase hover:bg-[#df2548] disabled:opacity-50 transition-colors"
                        >
                            {processing ? 'Creating Account...' : 'Create My ABEC Account'}
                        </button>

                        <p className="text-xs text-[#3a2020]/50 text-center">
                            Already have an account?{' '}
                            <Link href="/login" className="text-[#df2548] hover:underline">
                                Sign in to #MyABEC
                            </Link>
                        </p>
                    </form>
                </div>
            </section>

            {/* BENEFITS */}
            <section className="py-20 bg-[#F8F2E6]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="section-rule" />
                    <span className="label-caps block mb-4">Member Value</span>
                    <h2 className="text-3xl font-black text-[#1b265c] tracking-tight mb-12">Benefits of Membership</h2>
                    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        {benefits.map((benefit, i) => (
                            <motion.div
                                key={benefit.id}
                                initial={{ opacity: 0, y: 12 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.4, delay: i * 0.04 }}
                                className="flex items-start gap-3 p-4 bg-white border border-[#d0d4ec] hover:border-[#df2548] transition-colors"
                            >
                                <CheckCircle size={16} className="text-[#df2548] flex-shrink-0 mt-0.5" />
                                <p className="text-sm text-[#3a2020]/75 leading-relaxed">{benefit.body}</p>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CATEGORIES */}
            <section className="bg-white">
                <div className="grid lg:grid-cols-2">
                    <div className="relative h-72 lg:h-auto overflow-hidden">
                        <img
                            src="/images/african-university-convocation.jpg"
                            alt="University convocation"
                            className="w-full h-full object-cover"
                        />
                        <div className="absolute inset-0 bg-[#1b265c]/70" />
                        <div className="absolute inset-0 flex items-center justify-center">
                            <div className="text-center">
                                <div className="text-6xl font-black text-white/10">5</div>
                                <div className="text-white text-2xl font-black -mt-4">
                                    Membership
                                    <br />
                                    Categories
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="py-16 px-8 lg:px-12 bg-[#F8F2E6]">
                        <div className="section-rule" />
                        <span className="label-caps block mb-6">Membership Structure</span>
                        <div className="space-y-3">
                            {categories.map((cat, i) => (
                                <div key={cat.id} className="flex items-start gap-4 bg-white border border-[#d0d4ec] p-5">
                                    <div className="w-7 h-7 bg-[#1b265c] flex items-center justify-center flex-shrink-0 text-white text-xs font-bold">
                                        {i + 1}
                                    </div>
                                    <div>
                                        <h3 className="text-sm font-extrabold text-[#1b265c] mb-1">{cat.title}</h3>
                                        <p className="text-xs text-[#3a2020]/65 leading-relaxed">{cat.summary}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}

Join.layout = (page: React.ReactNode) => <PublicLayout>{page}</PublicLayout>;