import { useEffect, useState } from "react";
import { api } from "../../api/client";
import { GlassCard } from "../ui/GlassCard";
import { Button } from "../ui/Button";
import { Check } from "lucide-react";
import { Link } from "react-router-dom";

interface Tariff { id: number; name: string; duration_days: number; price_rub: number; }

export function PricingSection() {
  const [tariffs, setTariffs] = useState<Tariff[]>([]);

  useEffect(() => {
    api.action("tariffs").then((r) => { if (r.ok) setTariffs(r.tariffs); });
  }, []);

  const perks = ["Неограниченный трафик", "До 5 устройств", "WireGuard + VLESS", "Поддержка 24/7"];

  return (
    <section id="pricing" className="py-24 max-w-6xl mx-auto px-4">
      <h2 className="text-4xl font-bold text-center mb-4">Тарифы</h2>
      <p className="text-white/40 text-center mb-12">Без скрытых платежей</p>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 justify-items-center">
        {tariffs.map((t, i) => {
          const popular = i === 1;
          return (
            <GlassCard key={t.id} className={`w-full max-w-xs relative ${popular ? "border-accent/40 bg-accent/5" : ""}`}>
              {popular && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-accent text-xs font-bold">
                  Популярный
                </div>
              )}
              <div className="text-white/50 text-sm mb-2">{t.name}</div>
              <div className="text-4xl font-black mb-1">{t.price_rub} <span className="text-xl text-white/40">₽</span></div>
              <div className="text-sm text-white/30 mb-5">{t.duration_days} дней</div>
              <ul className="space-y-2 mb-6">
                {perks.map((p) => (
                  <li key={p} className="flex items-center gap-2 text-sm text-white/70">
                    <Check size={15} className="text-green-400 shrink-0" /> {p}
                  </li>
                ))}
              </ul>
              <Link to="/register">
                <Button className="w-full" variant={popular ? "primary" : "secondary"}>
                  Выбрать
                </Button>
              </Link>
            </GlassCard>
          );
        })}
      </div>
    </section>
  );
}