import React, { useState, useEffect } from 'react';
import { Check, Star } from 'lucide-react';
import { Button } from '../components/Button';
import { Link } from 'react-router-dom';
import { supabase } from '../lib/supabaseClient';
import { ProductPackage } from '../types';
import { defaultPlans } from '../lib/defaultPlans';

export const Products: React.FC = () => {
  const [packages, setPackages] = useState<ProductPackage[]>(defaultPlans);

  useEffect(() => {
    const fetchPlans = async () => {
      try {
        const { data, error } = await supabase
          .from('plans')
          .select('*')
          .order('price', { ascending: true });
        
        if (!error && data && data.length > 0) {
          setPackages(data);
        }
      } catch (e) {
        console.error("Error fetching plans:", e);
      }
    };
    fetchPlans();
  }, []);

  return (
    <div className="pt-20 bg-gray-50 min-h-screen">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-16">
          <h1 className="text-4xl font-extrabold text-gray-900 mb-4">Csomagajánlataink</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Átlátható árazás, rejtett költségek nélkül. Válassza az Ön céljaihoz leginkább illeszkedő csomagot.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {packages.map((pkg, index) => (
            <div 
              key={index} 
              className={`relative bg-white rounded-2xl shadow-xl flex flex-col p-8 transition-transform hover:-translate-y-2 duration-300 ${pkg.isPopular ? 'border-2 border-primary ring-4 ring-purple-100' : 'border border-gray-100'}`}
            >
              {pkg.isPopular && (
                <div className="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gradient-to-r from-primary to-secondary text-white px-4 py-1 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
                  <Star className="w-4 h-4 fill-current" /> Legnépszerűbb
                </div>
              )}
              
              <div className="mb-6">
                <h3 className="text-2xl font-bold text-gray-900">{pkg.name}</h3>
                <p className="text-gray-500 mt-2 text-sm min-h-[40px]">{pkg.desc}</p>
              </div>

              <div className="mb-8">
                <span className="text-3xl font-extrabold text-gray-900">{pkg.price}</span>
                {pkg.price.includes('Ft') && <span className="text-gray-500 text-sm font-normal"> + ÁFA</span>}
              </div>

              <ul className="space-y-4 mb-8 flex-grow">
                {pkg.features.map((feature, i) => (
                  <li key={i} className="flex items-start text-gray-600">
                    <Check className="w-5 h-5 text-green-500 mr-3 flex-shrink-0 mt-0.5" />
                    <span className="text-sm">{feature}</span>
                  </li>
                ))}
              </ul>

              <div className="mt-auto">
                <Link to="/contact">
                  <Button 
                    variant={pkg.isPopular ? 'primary' : 'outline'} 
                    fullWidth
                  >
                    {pkg.cta}
                  </Button>
                </Link>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-20 bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100 flex flex-col md:flex-row items-center justify-between gap-8">
          <div>
            <h3 className="text-2xl font-bold text-gray-900 mb-2">Egyedi igényei vannak?</h3>
            <p className="text-gray-600">
              Nem találja a megfelelő csomagot? Készítünk Önnek egy teljesen személyre szabott ajánlatot.
            </p>
          </div>
          <Link to="/contact">
            <Button size="lg">Kapcsolatfelvétel</Button>
          </Link>
        </div>
      </div>
    </div>
  );
};