// components/PricingPlans.tsx
"use client";
import React, { useState } from "react";
import AppointmentModal from "../modals/AppointmentModal";

type Plan = {
    name: string;
    sub: string;
    topBg: string;
    price: string;
    unit: string;
    items: string[];
    buttonBg: string;
    ribbon?: { text: string };
};

const plans: Plan[] = [
    {
        name: "Basic",
        sub: "Nippon Matex White\nEntry Level",
        topBg: "bg-[#F6C400]",
        price: "280",
        unit: "/room",
        items: [
            "2 Rm HDB - $599",
            "3 Rm HDB - $649",
            "4 Rm HDB - $699",
            "5 Rm HDB - $899",
            "Executive Apartment - $999",
            "Executive Maisonette - $1249",
        ],
        buttonBg: "bg-[#F6C400]",
    },
    {
        name: "Standard",
        sub: "Nippon Vinilex 5000\nOne Color Whole House",
        topBg: "bg-[#46B7B8]",
        price: "320",
        unit: "/room",
        items: [
            "2 Rm HDB - $649",
            "3 Rm HDB - $699",
            "4 Rm HDB - $799",
            "5 Rm HDB - $999",
            "Executive Apartment - $1099",
            "Executive Maisonette - $1299",
        ],
        buttonBg: "bg-[#46B7B8]",
        ribbon: { text: "SAVE" },
    },
    {
        name: "Superior",
        sub: "Nippon Odourless\nPremium Level",
        topBg: "bg-[#3FB0E4]",
        price: "400",
        unit: "/room",
        items: [
            "2 Rm HDB - $699",
            "3 Rm HDB - $949",
            "4 Rm HDB - $1099",
            "5 Rm HDB - $1249",
            "Executive Apartment - $1299",
            "Executive Maisonette - $1499",
        ],
        buttonBg: "bg-[#3FB0E4]",
    },
    {
        name: "Luxury",
        sub: "Nippon Odourless Ultra Durable\nLuxury Level",
        topBg: "bg-[#7A1414]",
        price: "450",
        unit: "/room",
        items: [
            "2 Rm HDB - $1000",
            "3 Rm HDB - $1200",
            "4 Rm HDB - $1350",
            "5 Rm HDB - $1450",
            "Executive Apartment - $1550",
            "Executive Maisonette - $1900",
        ],
        buttonBg: "bg-[#7A1414]",
    },
];

interface Props {
    submit: (formData: any) => Promise<any>;
}

export default function PricingPlans({ submit }: Props) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);

    const openModal = (plan: Plan) => {
        setSelectedPlan(plan);
        setIsModalOpen(true);
    };

    const closeModal = () => {
        setIsModalOpen(false);
        setSelectedPlan(null);
    };

    return (
        <section className="bg-white py-8 ">
            <div className="container mx-auto px-4 sm:px-6">
                {/* Heading */}
                <div className="text-center">
                    <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-extrabold text-gray-800 leading-tight px-2">
                        Our House Painting Services Prices
                    </h2>
                    <p className="mt-3  text-sm sm:text-base text-gray-500 max-w-3xl mx-auto px-4">
                        We only use Nippon paint for our painting services. WHY? It is top quality,
                        reliable and affordable.
                    </p>
                </div>

                {/* Pricing Cards */}
                <div className="mt-8 grid grid-cols-1 gap-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-4">
                    {plans.map((p) => (
                        <PlanCard key={p.name} plan={p} onSelect={openModal} />
                    ))}
                </div>

                {/* 🔴 Additional Charges Section */}
                <div className="mt-10 sm:mt-12 md:mt-14 rounded-lg bg-gray-50 border border-gray-200 p-4 sm:p-6 lg:p-8">
                    <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800 text-center mb-4 sm:mb-6">
                        Additional Charges
                    </h3>
                    <div className="grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2 text-left sm:text-center text-sm sm:text-base text-gray-700 font-medium">
                        {/* Left */}
                        <ul className="space-y-2 sm:space-y-3">
                            <li className="flex justify-between sm:block">
                                <span>Sealer 1 room:</span> <span className="font-semibold">+$50</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Sealer Whole House:</span> <span className="font-semibold">+$150 to $350</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Per Door Frame:</span> <span className="font-semibold">+$30</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Per Door + Door Frame Set:</span> <span className="font-semibold">+$60</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Upgrade to Anti Mould Ceiling:</span> <span className="font-semibold">+$50 / bedroom</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Balcony Painting:</span> <span className="font-semibold">+$80 – $100 per balcony</span>
                            </li>
                        </ul>

                        {/* Right */}
                        <ul className="space-y-2 sm:space-y-3">
                            <li className="flex justify-between sm:block">
                                <span>Major Paint Peeling + Putty:</span> <span className="font-semibold">$50 to $300</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Add Color:</span> <span className="font-semibold">$50 (one wall) to $100 (one room)</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>High Ceiling (&gt;2.8m):</span> <span className="font-semibold">+$100 to $400</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Pipe Painting Per Toilet / Yard:</span> <span className="font-semibold">+$50</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Wallpaper Removal:</span> <span className="font-semibold">$50/wall to $100/room</span>
                            </li>
                            <li className="flex justify-between sm:block">
                                <span>Touch up trip:</span> <span className="font-semibold">$150 to $250</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            {/* Modal */}
            <AppointmentModal
                submit={submit}
                isOpen={isModalOpen}
                onClose={closeModal}
                planName={selectedPlan?.name}
                planPrice={selectedPlan?.price}
                planUnit={selectedPlan?.unit}
                headerBgColor={selectedPlan?.topBg}
            />
        </section>
    );
}

function PlanCard({ plan, onSelect }: { plan: Plan; onSelect: (plan: Plan) => void }) {
    return (
        <div className="relative overflow-hidden rounded-lg bg-white shadow-[0_10px_20px_rgba(0,0,0,0.12)] border border-black/10 hover:shadow-[0_15px_30px_rgba(0,0,0,0.15)] transition-shadow duration-300">
            {/* Ribbon */}
            {plan.ribbon && (
                <div className="absolute right-[-40px] top-[20px] rotate-45 bg-yellow-400 px-10 sm:px-12 py-1 text-xs font-extrabold text-gray-900 shadow-md">
                    {plan.ribbon.text}
                </div>
            )}

            {/* Header */}
            <div className={`${plan.topBg} px-2 py-2 text-center text-white`}>
                <h3 className="text-xl sm:text-2xl font-extrabold">{plan.name}</h3>
                <p className="mt-2 whitespace-pre-line text-xs sm:text-sm font-semibold leading-relaxed">
                    {plan.sub}
                </p>
            </div>

            {/* Content */}
            <div className="px-4 py-4 text-center">
                <div className="flex items-end justify-center gap-1">
                    <span className="text-base sm:text-lg font-semibold">$</span>
                    <span className="text-4xl sm:text-5xl font-extrabold">{plan.price}</span>
                    <span className="pb-1 text-base sm:text-lg font-semibold">{plan.unit}</span>
                </div>

                <div className="mt-5 sm:mt-6 space-y-2 sm:space-y-3 text-xs sm:text-sm text-gray-600">
                    {plan.items.map((t) => (
                        <p key={t} className="leading-relaxed">{t}</p>
                    ))}
                </div>

                <button
                    onClick={() => onSelect(plan)}
                    className={`${plan.buttonBg} mt-6 cursor-pointer sm:mt-8 w-full rounded-md py-2.5 sm:py-3 text-xs sm:text-sm font-extrabold text-white shadow hover:opacity-90 transition-opacity duration-200`}
                >
                    Get Best Price
                </button>
            </div>
        </div>
    );
}