import React from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { SimProduct } from '../types';

const BuySimView: React.FC = () => {
  const navigate = useNavigate();
  const popularSims: SimProduct[] = [
    { id: 'p1', country: 'China', flag: 'cn', originalPrice: '$0.94', discountPrice: '$0.85', discountLabel: '-10%' },
    { id: 'p2', country: 'Hong Kong', flag: 'hk', originalPrice: '$4.43', discountPrice: '$4.21', discountLabel: '-5%' },
    { id: 'p3', country: 'Japan', flag: 'jp', originalPrice: '$1.44', discountPrice: '$1.3', discountLabel: '-10%' },
    { id: 'p4', country: 'Singapore', flag: 'sg', originalPrice: '$4.43', discountPrice: '$4.21', discountLabel: '-5%' },
    { id: 'p5', country: 'South Korea', flag: 'kr', originalPrice: '$0.94', discountPrice: '$0.85', discountLabel: '-10%' },
    { id: 'p6', country: 'Taiwan', flag: 'tw', originalPrice: '$2.04', discountPrice: '$1.84', discountLabel: '-10%' },
    { id: 'p7', country: 'Thailand', flag: 'th', originalPrice: '$1.89', discountPrice: '$1.78', discountLabel: '-6%' },
    { id: 'p8', country: 'United States', flag: 'us', originalPrice: '$2.16', discountPrice: '$1.94', discountLabel: '-10%' },
  ];

  const handleSelect = (p: SimProduct) => {
    navigate(`/product/${p.country.toLowerCase()}`, { state: {
      country: p.country,
      flag: p.flag,
      image: p.isRegion 
        ? 'https://images.unsplash.com/photo-1526772662000-3f88f10c053b?q=80&w=1000&auto=format&fit=crop'
        : (p.country === 'Thailand' 
           ? 'https://images.unsplash.com/photo-1528181304800-2f140819898f?q=80&w=1000&auto=format&fit=crop' 
           : `https://images.unsplash.com/photo-1526772662000-3f88f10c053b?q=80&w=1000&auto=format&fit=crop`)
    }});
  };

  const ProductCard: React.FC<{ p: SimProduct }> = ({ p }) => (
    <div 
      onClick={() => handleSelect(p)}
      className="bg-white border border-slate-100 rounded-[20px] p-4 md:p-6 shadow-sm hover:shadow-lg transition-all relative flex items-center space-x-4 group cursor-pointer"
    >
      <div className="absolute top-0 right-0 bg-[#EE0434] text-white text-[10px] font-black px-3 py-1.5 rounded-tr-[19px] rounded-bl-[14px]">
        {p.discountLabel}
      </div>
      <div className="w-12 h-12 rounded-full overflow-hidden shrink-0 border border-slate-50 bg-slate-50">
        <img src={`https://flagcdn.com/w160/${p.flag}.png`} alt={p.country} className="w-full h-full object-cover scale-150" />
      </div>
      <div className="flex-1">
        <h3 className="text-slate-900 font-black text-base md:text-lg mb-0.5 group-hover:text-[#EE0434] transition-colors">{p.country}</h3>
        <p className="text-[#EE0434] font-bold text-sm md:text-lg">from: <span className="font-black">{p.discountPrice}</span></p>
      </div>
    </div>
  );

  return (
    <div className="bg-[#fcfdfe] min-h-screen">
      <div className="max-w-7xl mx-auto px-4 py-4 md:py-6 border-b border-slate-50">
        <nav className="flex items-center space-x-2 text-xs md:text-sm text-slate-500">
          <Link to="/" className="hover:text-[#EE0434]">Home</Link>
          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round"/></svg>
          <span className="text-slate-900 font-bold">Buy Sim</span>
        </nav>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-8 md:py-12">
        <div className="flex justify-center mb-12 md:mb-20">
          <div className="w-full max-w-3xl relative group">
            <input type="text" placeholder="Choose country you're going to" className="w-full bg-white rounded-full py-4 md:py-6 px-10 md:px-12 text-base md:text-xl text-slate-700 shadow-sm border border-slate-100 outline-none focus:ring-4 focus:ring-red-50 transition-all placeholder:text-slate-300" />
            <button className="absolute right-2 md:right-3 top-2 md:top-3 bottom-2 md:bottom-3 aspect-square bg-[#EE0434] rounded-full flex items-center justify-center text-white shadow-lg shadow-red-200 hover:scale-105 transition-all">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </div>
        </div>
        <section className="mb-12">
          <h2 className="text-xl md:text-[32px] font-black text-slate-900 mb-6 md:mb-8 tracking-tight">SIM Popular</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
            {popularSims.map(p => <ProductCard key={p.id} p={p} />)}
          </div>
        </section>
      </div>
    </div>
  );
};

export default BuySimView;