"use client";

import Link from "next/link";
import { useCurrency, type Prices } from "@/components/Providers";

type Tier = { name: string; prices: Prices; features: string[] };
type Service = { id: string; name: string; emoji: string; tiers: Tier[] };
type Combo = { id: string; name: string; prices: Prices; saving: string; desc: string; tag: string | null; features: string[] };

const tierStyles: Record<string, string> = {
  Basic: "border",
  Pro: "border",
  Enterprise: "border",
};
const tierColors: Record<string, { color: string; bg: string; border: string }> = {
  Basic: { color: "#9ca3af", bg: "rgba(156,163,175,0.08)", border: "rgba(156,163,175,0.2)" },
  Pro: { color: "#28c76f", bg: "rgba(40,199,111,0.08)", border: "rgba(40,199,111,0.2)" },
  Enterprise: { color: "#a78bfa", bg: "rgba(167,139,250,0.08)", border: "rgba(167,139,250,0.2)" },
};

export default function PricingClient({ services, combos }: { services: Service[]; combos: Combo[] }) {
  const { format, currency } = useCurrency();

  return (
    <>
      {/* Combo Packages */}
      <section className="py-14" style={{ background: "var(--bg1)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">Bundle & Save</span>
            <h2 className="text-3xl font-bold mb-2" style={{ color: "var(--fg1)" }}>
              All-In-One <span className="gradient-text">Combo Packages</span>
            </h2>
            <p className="text-sm" style={{ color: "var(--fg3)" }}>All 8 services. One dashboard. Massive savings.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
            {combos.map((combo) => (
              <div
                key={combo.id}
                className={`rounded-2xl p-7 flex flex-col card-hover ${combo.tag ? "md:scale-105" : "glass-card"}`}
                style={combo.tag ? { background: "var(--bg3)", border: "2px solid #28c76f", boxShadow: "0 20px 40px rgba(40,199,111,0.1)" } : {}}
              >
                <div className="flex items-start justify-between mb-4">
                  <div>
                    {combo.tag && <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f] text-white text-xs font-semibold mb-2">{combo.tag}</span>}
                    <h3 className="font-bold text-xl" style={{ color: "var(--fg1)" }}>{combo.name}</h3>
                    <p className="text-sm" style={{ color: "var(--fg3)" }}>{combo.desc}</p>
                  </div>
                  <span className="text-xs text-[#28c76f] font-semibold bg-[#28c76f]/10 px-2 py-1 rounded-lg whitespace-nowrap ml-2">{combo.saving}</span>
                </div>
                <div className="text-4xl font-extrabold mb-6" style={{ color: "var(--fg1)" }}>
                  {format(combo.prices)}<span className="text-base font-normal" style={{ color: "var(--fg3)" }}>/mo</span>
                </div>
                <ul className="space-y-2.5 mb-8 flex-1">
                  {combo.features.map((f, j) => (
                    <li key={j} className="flex items-center gap-2 text-sm" style={{ color: "var(--fg2)" }}>
                      <svg className="w-4 h-4 text-[#28c76f] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg>
                      {f}
                    </li>
                  ))}
                </ul>
                <Link href="/contact" className={`block text-center py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 ${combo.tag ? "bg-[#28c76f] hover:bg-[#22b965] text-white shadow-lg shadow-[#28c76f]/20" : ""}`}
                  style={!combo.tag ? { border: "1px solid var(--border-strong)", color: "var(--fg1)" } : {}}>
                  Get Started
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Per-Service Pricing */}
      <section className="py-14" style={{ background: "var(--bg2)" }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <span className="inline-block px-3 py-1 rounded-full bg-[#28c76f]/10 text-[#28c76f] text-xs font-semibold uppercase tracking-widest mb-4">Individual Services</span>
            <h2 className="text-3xl font-bold" style={{ color: "var(--fg1)" }}>
              Pick Only What You <span className="gradient-text">Need</span>
            </h2>
            <p className="text-sm mt-2" style={{ color: "var(--fg3)" }}>Each service has 3 tiers — Basic, Pro, and Enterprise.</p>
          </div>

          <div className="space-y-5">
            {services.map((service) => (
              <div key={service.id} className="rounded-2xl overflow-hidden" style={{ border: "1px solid var(--border)", background: "var(--bg1)" }}>
                <div className="px-6 py-4 flex items-center gap-3" style={{ borderBottom: "1px solid var(--border)" }}>
                  <span className="text-2xl">{service.emoji}</span>
                  <h3 className="font-bold text-lg" style={{ color: "var(--fg1)" }}>{service.name}</h3>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3" style={{ borderTop: "none" }}>
                  {service.tiers.map((tier, idx) => {
                    const tc = tierColors[tier.name];
                    return (
                      <div key={tier.name} className="p-6" style={{ borderRight: idx < 2 ? "1px solid var(--border)" : "none" }}>
                        <div className="flex items-center justify-between mb-3">
                          <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${tierStyles[tier.name]}`}
                            style={{ color: tc.color, background: tc.bg, borderColor: tc.border }}>
                            {tier.name}
                          </span>
                          <span className="font-bold text-lg" style={{ color: "var(--fg1)" }}>
                            {format(tier.prices)}<span className="text-xs font-normal" style={{ color: "var(--fg3)" }}>/mo</span>
                          </span>
                        </div>
                        <ul className="space-y-1.5">
                          {tier.features.map((f, k) => (
                            <li key={k} className="flex items-center gap-2 text-xs" style={{ color: "var(--fg2)" }}>
                              <svg className="w-3 h-3 text-[#28c76f] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg>
                              {f}
                            </li>
                          ))}
                        </ul>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Currency note */}
      <div className="py-4 text-center" style={{ background: "var(--bg2)" }}>
        <p className="text-xs" style={{ color: "var(--fg3)" }}>
          Prices shown in <span className="text-[#28c76f] font-semibold">{currency.toUpperCase()}</span>.
          Switch currency using the selector in the navigation bar.
        </p>
      </div>
    </>
  );
}