import React, { useState } from 'react';
import { LogIn, Compass, ArrowRight, Map as MapIcon, UserPlus } from 'lucide-react';
import { LoginModal } from './LoginModal';

interface LandingPageProps {
  onContinue?: () => void;
  onGoToSignup?: () => void;
  onGoToMap?: () => void;
}

export const LandingPage: React.FC<LandingPageProps> = ({ onContinue, onGoToSignup, onGoToMap }) => {
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);

  return (
    <div className="flex h-screen w-full flex-col md:flex-row overflow-hidden font-sans bg-gray-50">
      {/* Nửa bên trái: Hiển thị lưới ảnh du lịch */}
      <div className="hidden md:grid md:w-1/2 grid-cols-2 gap-2 p-2 bg-gray-200 relative h-full">
        <div className="space-y-2 h-full">
          <img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?auto=format&fit=crop&q=80" className="w-full h-64 object-cover rounded-xl" alt="Travel 1" />
          <img src="https://images.unsplash.com/photo-1513581166391-887a96df91e7?auto=format&fit=crop&q=80" className="w-full h-96 object-cover rounded-xl" alt="Travel 2" />
        </div>
        <div className="space-y-2 mt-8 h-full">
          <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?auto=format&fit=crop&q=80" className="w-full h-96 object-cover rounded-xl" alt="Travel 3" />
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80" className="w-full h-64 object-cover rounded-xl" alt="Travel 4" />
        </div>
        <div className="absolute inset-0 bg-gradient-to-r from-transparent to-gray-50/50 pointer-events-none" />
      </div>

      {/* Nửa bên phải: Nội dung chào mừng và Hành động */}
      <div className="flex-1 md:w-1/2 flex flex-col justify-center items-center bg-white p-8 lg:p-16 h-full overflow-y-auto">
        <div className="max-w-md w-full space-y-12">
          <div className="flex items-center gap-3 text-blue-600 mb-8">
            <Compass className="w-10 h-10" />
            <span className="text-2xl font-black tracking-tighter uppercase">Travel Planner</span>
          </div>

          <div className="space-y-4">
            <h1 className="text-4xl font-extrabold text-gray-900 leading-tight">
              Lên kế hoạch cho hành trình tiếp theo
            </h1>
            <p className="text-lg text-gray-500 leading-relaxed">
              Khám phá các địa điểm nổi bật qua bản đồ cộng đồng hoặc đăng nhập để bắt đầu tự tạo chuyến đi cho riêng mình.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-4">
            {/* Nút Khám phá Bản đồ (Cho khách công cộng) */}
            <button 
              onClick={onGoToMap}
              className="flex items-center justify-center gap-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-2xl transition-all shadow-lg shadow-indigo-100"
            >
              <MapIcon className="w-5 h-5" />
              Xem Bản đồ Công cộng
            </button>

            <div className="grid grid-cols-2 gap-4">
              <button 
                onClick={() => setIsLoginModalOpen(true)}
                className="flex items-center justify-center gap-2 bg-blue-50 hover:bg-blue-100 text-blue-700 font-bold py-4 rounded-2xl transition-all"
              >
                <LogIn className="w-5 h-5" />
                Đăng nhập
              </button>
              <button 
                onClick={onGoToSignup}
                className="flex items-center justify-center gap-2 bg-gray-50 hover:bg-gray-100 text-gray-700 font-bold py-4 rounded-2xl border border-gray-100 transition-all"
              >
                <UserPlus className="w-5 h-5" />
                Đăng ký
              </button>
            </div>

            <button 
              onClick={onContinue}
              className="flex items-center justify-center gap-3 text-gray-400 hover:text-gray-600 py-2 transition-all text-sm font-medium"
            >
              Tiếp tục tham quan ảnh
              <ArrowRight className="w-5 h-5" />
            </button>
          </div>

          <div className="pt-12 flex items-center gap-4 text-sm text-gray-400 border-t border-gray-100">
            <div className="flex -space-x-3">
              {[1, 2, 3, 4].map(i => (
                <img key={i} className="w-10 h-10 rounded-full border-4 border-white" src={`https://i.pravatar.cc/100?img=${i+20}`} alt="user" />
              ))}
            </div>
            <p className="font-medium">Tham gia cùng +2,400 người du lịch khác</p>
          </div>
        </div>
      </div>

      {/* Login Modal Component */}
      <LoginModal 
        isOpen={isLoginModalOpen} 
        onClose={() => setIsLoginModalOpen(false)} 
        onSwitchToSignup={onGoToSignup}
      />
    </div>
  );
};