"use client"

import { cn } from "@/lib/utils"
import { Info, Tag, Check, Shield } from "lucide-react"
import { useLanguage } from "@/lib/language-context"

interface PricingRow {
    persons: string
    express: string
    private: string
    classic?: string
}

interface SpecialPackage {
    name: string
    price: string
    description: string
}

interface PricingTableProps {
    route: string
    rows: PricingRow[]
    specials?: SpecialPackage[]
    vipInfo?: string[]
    effectiveFrom?: string
}

const PricingTable = ({
    route,
    rows,
    specials,
    vipInfo,
    effectiveFrom
}: PricingTableProps) => {
    const { t } = useLanguage()

    return (
        <div className="w-full space-y-8 mb-24">
            {/* Route Header matching FeatureSection style */}
            <div className="space-y-2 mb-8">
                <h3 className="text-5xl md:text-7xl font-black uppercase tracking-tighter opacity-10 text-primary">
                    {route.includes("BÉCS") || route.includes("VIENNA") ? "VIENNA" : "BUDAPEST"}
                </h3>
                <h2 className="text-2xl md:text-3xl font-black tracking-tight -mt-8 md:-mt-10 ml-1 text-slate-900 max-w-2xl uppercase">
                    {route}
                </h2>
            </div>

            <div className="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full text-left border-collapse">
                        <thead>
                            <tr className="bg-slate-50/50 text-slate-500 text-[10px] uppercase tracking-[0.2em] border-b border-slate-100">
                                <th className="py-8 px-10 font-bold">{t.pricing.table.passengers}</th>
                                <th className="py-8 px-4 font-bold text-center">
                                    <div className="flex flex-col items-center gap-1 opacity-40">
                                        <span className="text-slate-400">{t.pricing.table.classic}</span>
                                        <span className="text-[10px] lowercase normal-case tracking-normal">{t.pricing.table.classicNote}</span>
                                    </div>
                                </th>
                                <th className="py-8 px-4 font-bold text-center">
                                    <div className="flex items-center justify-center gap-2">
                                        <span className="text-primary font-black">{t.pricing.table.express}</span>
                                        <div className="bg-primary/10 p-1 rounded-md">
                                            <Tag className="w-3 h-3 text-primary" />
                                        </div>
                                    </div>
                                </th>
                                <th className="py-8 px-10 font-bold text-center">
                                    <div className="flex items-center justify-center gap-2">
                                        <span className="text-secondary font-black">{t.pricing.table.private}</span>
                                        <div className="bg-secondary/10 p-1 rounded-md">
                                            <Shield className="w-3 h-3 text-secondary" />
                                        </div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody className="text-slate-700">
                            {rows.map((row, idx) => (
                                <tr
                                    key={idx}
                                    className={cn(
                                        "border-b border-slate-50 transition-colors hover:bg-slate-50/80",
                                        idx % 2 === 0 ? "bg-white" : "bg-slate-50/20"
                                    )}
                                >
                                    <td className="py-5 px-10 font-bold text-slate-900">
                                        <div className="flex items-center gap-3">
                                            <div className="w-1.5 h-1.5 rounded-full bg-primary" />
                                            {row.persons}
                                        </div>
                                    </td>
                                    <td className="py-5 px-4 text-center text-slate-300">
                                        <span className="text-xs">—</span>
                                    </td>
                                    <td className="py-5 px-4 text-center">
                                        <div className="flex items-center justify-center gap-2">
                                            <span className="font-extrabold text-blue-950">{row.express}</span>
                                            <Info className="w-3 h-3 text-slate-300 hover:text-primary cursor-help transition-colors" />
                                        </div>
                                    </td>
                                    <td className="py-5 px-10 text-center">
                                        <span className="font-extrabold text-white px-5 py-1.5 bg-secondary rounded-full text-xs tracking-wider shadow-sm">
                                            {row.private}
                                        </span>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {specials && specials.length > 0 && (
                    <div className="bg-gradient-to-r from-slate-950 to-slate-900 text-white p-10 space-y-8">
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
                            {specials.map((special, idx) => (
                                <div key={idx} className="space-y-3 group">
                                    <div className="flex items-center gap-4">
                                        <div className="bg-primary p-2 rounded-xl group-hover:scale-110 transition-transform duration-300 shadow-lg shadow-primary/20">
                                            <Check className="w-4 h-4 text-white" />
                                        </div>
                                        <span className="font-black text-xl text-white group-hover:text-primary transition-colors tracking-tight">
                                            {special.name} — {special.price}
                                        </span>
                                    </div>
                                    <p className="text-slate-400 text-sm leading-relaxed pl-12 font-medium">
                                        {special.description}
                                    </p>
                                </div>
                            ))}
                        </div>

                        {(vipInfo && vipInfo.length > 0) && (
                            <div className="pt-8 border-t border-white/5">
                                <h4 className="text-[10px] uppercase tracking-[0.3em] text-primary font-black mb-6">{t.pricing.table.premium}</h4>
                                <div className="flex flex-wrap gap-x-12 gap-y-4">
                                    {vipInfo.map((info, idx) => (
                                        <div key={idx} className="flex items-center gap-3 text-sm text-slate-300 font-bold italic">
                                            <div className="w-2 h-2 rounded-full bg-primary shadow-[0_0_10px_rgba(217,163,33,0.5)]" />
                                            {info}
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                )}
            </div>

            {effectiveFrom && (
                <div className="text-right text-slate-400 text-[10px] uppercase tracking-[0.2em] font-black">
                    {effectiveFrom}
                </div>
            )}
        </div>
    )
}

export default PricingTable