import React, { useState, useMemo, useEffect } from 'react';
import { 
  Search, 
  ShoppingCart, 
  User, 
  PlusCircle, 
  MessageSquare, 
  TrendingUp, 
  MapPin, 
  Filter, 
  ChevronRight, 
  Star, 
  Home,
  Store,
  Users,
  Bell,
  Menu,
  MoreVertical,
  CheckCircle,
  ArrowLeft,
  Image as ImageIcon,
  Wifi,
  Battery,
  Signal
} from 'lucide-react';

const MOCK_PRODUCTS = [
  {
    id: 1,
    name: "Premium Basmati",
    seller: "GreenValley Farms",
    price: 4500,
    unit: "Quintal",
    location: "Punjab",
    moisture: "12%",
    stock: "500T",
    rating: 4.8,
    image: "https://images.unsplash.com/photo-1536633104100-349f9976378e?auto=format&fit=crop&q=80&w=400",
    category: "Basmati"
  },
  {
    id: 2,
    name: "Sona Masuri",
    seller: "Krishna Mills",
    price: 3200,
    unit: "Quintal",
    location: "Andhra Pradesh",
    moisture: "14%",
    stock: "1200T",
    rating: 4.5,
    image: "https://images.unsplash.com/photo-1586201375761-83865001e31c?auto=format&fit=crop&q=80&w=400",
    category: "Non-Basmati"
  },
  {
    id: 3,
    name: "Jasmine Fragrant",
    seller: "Thai Delta",
    price: 5800,
    unit: "Quintal",
    location: "Bangkok",
    moisture: "11%",
    stock: "200T",
    rating: 4.9,
    image: "https://images.unsplash.com/photo-1590080876351-941da3576dee?auto=format&fit=crop&q=80&w=400",
    category: "Aromatic"
  },
  {
    id: 4,
    name: "IR64 Long Grain",
    seller: "Global Grains",
    price: 2800,
    unit: "Quintal",
    location: "West Bengal",
    moisture: "13.5%",
    stock: "5000T",
    rating: 4.2,
    image: "https://images.unsplash.com/photo-1511933048017-06c140883d6a?auto=format&fit=crop&q=80&w=400",
    category: "Non-Basmati"
  }
];

const COMMUNITY_POSTS = [
  {
    id: 1,
    author: "Dr. Ramesh Kumar",
    role: "Agronomist",
    content: "Basmati prices expected to rise 5% next month due to lower monsoon yield. Sellers hold inventory.",
    likes: 124,
    comments: 18,
    time: "2h ago",
    avatar: "https://i.pravatar.cc/150?u=ramesh"
  },
  {
    id: 2,
    author: "Kisan Network",
    role: "Farmer Collective",
    content: "Successfully harvested Sona Masuri. Yield is better than expected! Looking for bulk buyers.",
    likes: 245,
    comments: 42,
    time: "1d ago",
    avatar: "https://i.pravatar.cc/150?u=kisan"
  }
];

export default function App() {
  const [view, setView] = useState('home'); 
  const [cart, setCart] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [activeCategory, setActiveCategory] = useState("All");
  const [toast, setToast] = useState(null);
  const [currentTime, setCurrentTime] = useState("12:00");

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setCurrentTime(`${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`);
    };
    updateTime();
    const interval = setInterval(updateTime, 60000);
    return () => clearInterval(interval);
  }, []);

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 3000);
  };

  const addToCart = (product) => {
    setCart(prev => [...prev, { ...product, cartId: Date.now() }]);
    showToast("Added to cart");
  };

  const totalAmount = cart.reduce((sum, item) => sum + item.price, 0);

  const StatusBar = () => (
    <div className="bg-amber-600 text-white px-4 py-1.5 flex justify-between items-center text-[11px] font-medium z-50 relative rounded-t-[2rem] sm:rounded-t-[2rem]">
      <span>{currentTime}</span>
      <div className="flex items-center gap-1.5">
        <Wifi size={12} />
        <Signal size={12} />
        <Battery size={14} className="rotate-90" />
      </div>
    </div>
  );

  const TopAppBar = ({ title, showBack = false }) => (
    <div className="bg-amber-600 text-white px-4 py-3 flex items-center justify-between shadow-md z-40 sticky top-0">
      <div className="flex items-center gap-3">
        {showBack ? (
          <button onClick={() => setView('home')} className="p-1 active:bg-amber-700 rounded-full transition-colors">
             <ArrowLeft size={24} />
          </button>
        ) : (
          <button className="p-1 active:bg-amber-700 rounded-full transition-colors">
            <Menu size={24} />
          </button>
        )}
        <h1 className="text-xl font-bold tracking-tight">{title}</h1>
      </div>
      <div className="flex items-center gap-2">
        <button className="p-1 active:bg-amber-700 rounded-full transition-colors relative">
          <Bell size={22} />
          <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full border border-amber-600"></span>
        </button>
        <button className="p-1 active:bg-amber-700 rounded-full transition-colors">
          <User size={22} />
        </button>
      </div>
    </div>
  );

  const BottomNav = () => (
    <div className="bg-white border-t border-gray-200 flex justify-around items-center pb-safe pt-2 px-2 sticky bottom-0 z-40 shadow-[0_-2px_10px_rgba(0,0,0,0.05)] rounded-b-[2rem] sm:rounded-b-[2rem]">
      {[
        { id: 'home', icon: Home, label: 'Home' },
        { id: 'market', icon: Store, label: 'Market' },
        { id: 'sell', icon: PlusCircle, label: 'Sell', isPrimary: true },
        { id: 'community', icon: Users, label: 'Network' },
        { id: 'cart', icon: ShoppingCart, label: 'Cart', badge: cart.length }
      ].map(tab => (
        <button 
          key={tab.id}
          onClick={() => setView(tab.id)}
          className={`flex flex-col items-center justify-center w-16 py-1 ${tab.isPrimary ? '-mt-6' : ''}`}
        >
          <div className={`relative flex items-center justify-center ${
            tab.isPrimary 
              ? 'bg-amber-600 text-white h-14 w-14 rounded-full shadow-lg border-4 border-gray-50' 
              : view === tab.id ? 'text-amber-600' : 'text-gray-500'
          }`}>
            <tab.icon size={tab.isPrimary ? 28 : 22} className={view === tab.id && !tab.isPrimary ? 'fill-amber-100' : ''} />
            {tab.badge > 0 && (
              <span className="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] font-bold rounded-full h-4 w-4 flex items-center justify-center border border-white">
                {tab.badge}
              </span>
            )}
          </div>
          {!tab.isPrimary && (
            <span className={`text-[10px] mt-1 font-medium ${view === tab.id ? 'text-amber-600' : 'text-gray-500'}`}>
              {tab.label}
            </span>
          )}
        </button>
      ))}
    </div>
  );

  const HomeView = () => (
    <div className="flex flex-col pb-20 bg-gray-50 min-h-full">
      <TopAppBar title="PaddyHub" />
      
      {/* Search Bar */}
      <div className="bg-amber-600 px-4 pb-4 pt-1 rounded-b-3xl shadow-sm">
        <div className="bg-white rounded-full flex items-center px-4 py-2.5 shadow-inner">
          <Search size={18} className="text-gray-400 mr-2" />
          <input 
            type="text" 
            placeholder="Search paddy varieties..." 
            className="bg-transparent border-none outline-none text-sm w-full text-gray-800"
            onClick={() => setView('market')}
          />
        </div>
      </div>

      {/* Quick Stats Grid */}
      <div className="px-4 mt-6 grid grid-cols-2 gap-3">
        <div className="bg-white p-3 rounded-2xl shadow-sm flex items-center gap-3">
          <div className="bg-green-100 p-2 rounded-xl"><TrendingUp size={18} className="text-green-600"/></div>
          <div>
            <p className="text-[10px] text-gray-500 font-medium">Avg Price</p>
            <p className="text-sm font-bold text-gray-800">₹3,450/q</p>
          </div>
        </div>
        <div className="bg-white p-3 rounded-2xl shadow-sm flex items-center gap-3">
          <div className="bg-blue-100 p-2 rounded-xl"><Users size={18} className="text-blue-600"/></div>
          <div>
            <p className="text-[10px] text-gray-500 font-medium">Active Buyers</p>
            <p className="text-sm font-bold text-gray-800">1.2k+</p>
          </div>
        </div>
      </div>

      {/* Featured Section */}
      <div className="mt-6 px-4">
        <div className="flex justify-between items-center mb-3">
          <h2 className="text-lg font-bold text-gray-800">Featured Listings</h2>
          <button onClick={() => setView('market')} className="text-amber-600 text-sm font-semibold flex items-center">
            See all <ChevronRight size={16}/>
          </button>
        </div>
        
        {/* Horizontal Scroll for Mobile */}
        <div className="flex gap-4 overflow-x-auto pb-4 -mx-4 px-4 snap-x hide-scrollbar" style={{ scrollbarWidth: 'none' }}>
          {MOCK_PRODUCTS.map(product => (
            <div key={product.id} className="min-w-[240px] bg-white rounded-2xl shadow-sm overflow-hidden snap-center border border-gray-100">
              <img src={product.image} alt={product.name} className="h-32 w-full object-cover" />
              <div className="p-3">
                <div className="flex justify-between items-start">
                  <h3 className="font-bold text-gray-800 text-sm">{product.name}</h3>
                  <span className="flex items-center text-[10px] bg-green-50 text-green-700 px-1.5 py-0.5 rounded font-bold">
                    <Star size={10} className="fill-current mr-0.5" /> {product.rating}
                  </span>
                </div>
                <p className="text-xs text-gray-500 mt-1 flex items-center gap-1"><MapPin size={12}/> {product.location}</p>
                <div className="mt-3 flex justify-between items-center">
                  <p className="text-amber-600 font-black">₹{product.price}<span className="text-[10px] text-gray-500 font-normal">/q</span></p>
                  <button 
                    onClick={() => addToCart(product)}
                    className="bg-gray-900 active:bg-gray-800 text-white p-1.5 rounded-lg"
                  >
                    <PlusCircle size={18} />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const MarketView = () => {
    const categories = ["All", "Basmati", "Non-Basmati", "Aromatic"];
    
    return (
      <div className="flex flex-col h-full bg-gray-50 pb-20">
        <TopAppBar title="Marketplace" />
        
        <div className="p-4 bg-white shadow-sm z-10 sticky top-[52px]">
           <div className="flex gap-2">
             <div className="flex-1 bg-gray-100 rounded-xl flex items-center px-3 py-2">
                <Search size={18} className="text-gray-400 mr-2" />
                <input 
                  type="text" 
                  placeholder="Search listings..." 
                  className="bg-transparent border-none outline-none text-sm w-full"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
             </div>
             <button className="bg-gray-100 p-2 rounded-xl text-gray-600 active:bg-gray-200">
               <Filter size={20} />
             </button>
           </div>
           
           {/* Chips */}
           <div className="flex overflow-x-auto gap-2 mt-3 hide-scrollbar" style={{ scrollbarWidth: 'none' }}>
             {categories.map(cat => (
               <button
                 key={cat}
                 onClick={() => setActiveCategory(cat)}
                 className={`whitespace-nowrap px-4 py-1.5 rounded-full text-xs font-medium transition-colors ${
                   activeCategory === cat 
                     ? 'bg-amber-600 text-white' 
                     : 'bg-gray-100 text-gray-600 border border-gray-200'
                 }`}
               >
                 {cat}
               </button>
             ))}
           </div>
        </div>

        <div className="p-4 grid grid-cols-2 gap-3">
           {MOCK_PRODUCTS.filter(p => activeCategory === "All" || p.category === activeCategory).map(product => (
             <div key={product.id} className="bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100 flex flex-col">
               <img src={product.image} alt={product.name} className="h-28 w-full object-cover" />
               <div className="p-2.5 flex-1 flex flex-col">
                 <h3 className="font-bold text-gray-800 text-[13px] leading-tight mb-1 line-clamp-2">{product.name}</h3>
                 <p className="text-[10px] text-gray-500 mb-2">{product.stock} available</p>
                 
                 <div className="mt-auto flex justify-between items-center">
                   <p className="text-amber-600 font-bold text-sm">₹{product.price}</p>
                   <button 
                     onClick={() => addToCart(product)}
                     className="bg-gray-100 active:bg-gray-200 text-gray-800 p-1.5 rounded-lg"
                   >
                     <ShoppingCart size={14} />
                   </button>
                 </div>
               </div>
             </div>
           ))}
        </div>
      </div>
    );
  };

  const SellView = () => (
    <div className="flex flex-col h-full bg-white pb-20">
      <TopAppBar title="List Produce" showBack />
      
      <div className="p-4 overflow-y-auto">
        <div className="w-full h-32 border-2 border-dashed border-gray-300 rounded-2xl flex flex-col items-center justify-center bg-gray-50 mb-6 active:bg-gray-100 transition-colors">
          <ImageIcon className="text-gray-400 mb-2" size={28} />
          <p className="text-sm font-medium text-gray-600">Add Photos</p>
        </div>

        <div className="space-y-4">
          <div>
            <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5 block">Variety Name</label>
            <input type="text" placeholder="e.g., Sona Masuri" className="w-full bg-gray-50 border border-gray-200 p-3 rounded-xl text-sm outline-none focus:border-amber-500 focus:bg-white" />
          </div>
          
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5 block">Price (₹/q)</label>
              <input type="number" placeholder="0" className="w-full bg-gray-50 border border-gray-200 p-3 rounded-xl text-sm outline-none focus:border-amber-500 focus:bg-white" />
            </div>
            <div>
              <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5 block">Stock</label>
              <input type="text" placeholder="e.g. 50T" className="w-full bg-gray-50 border border-gray-200 p-3 rounded-xl text-sm outline-none focus:border-amber-500 focus:bg-white" />
            </div>
          </div>

          <div>
            <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-1.5 block">Category</label>
            <select className="w-full bg-gray-50 border border-gray-200 p-3 rounded-xl text-sm outline-none focus:border-amber-500 appearance-none">
              <option>Basmati</option>
              <option>Non-Basmati</option>
              <option>Aromatic</option>
            </select>
          </div>

          <div className="pt-4">
             <button 
                onClick={() => { showToast("Listing Published!"); setView('market'); }}
                className="w-full bg-amber-600 text-white font-bold py-3.5 rounded-xl shadow-lg active:bg-amber-700 transition-colors"
             >
               Publish Listing
             </button>
          </div>
        </div>
      </div>
    </div>
  );

  const CommunityView = () => (
    <div className="flex flex-col h-full bg-gray-100 pb-20 relative">
      <TopAppBar title="Network" />
      
      <div className="p-4 space-y-4">
        {COMMUNITY_POSTS.map(post => (
          <div key={post.id} className="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
            <div className="flex justify-between items-start mb-3">
              <div className="flex gap-3 items-center">
                <img src={post.avatar} alt="avatar" className="w-10 h-10 rounded-full" />
                <div>
                  <h4 className="font-bold text-gray-900 text-sm">{post.author}</h4>
                  <p className="text-[10px] text-amber-600 font-medium">{post.role} • {post.time}</p>
                </div>
              </div>
              <MoreVertical size={16} className="text-gray-400" />
            </div>
            <p className="text-sm text-gray-700 leading-relaxed">{post.content}</p>
            <div className="flex gap-4 mt-3 pt-3 border-t border-gray-50">
               <button className="flex items-center gap-1.5 text-xs font-medium text-gray-500 active:text-amber-600">
                 <Star size={14} /> {post.likes}
               </button>
               <button className="flex items-center gap-1.5 text-xs font-medium text-gray-500 active:text-amber-600">
                 <MessageSquare size={14} /> {post.comments}
               </button>
            </div>
          </div>
        ))}
      </div>

      {/* Floating Action Button */}
      <button className="absolute bottom-6 right-4 bg-amber-600 text-white p-4 rounded-full shadow-xl active:bg-amber-700 transition-transform active:scale-95">
        <MessageSquare size={24} />
      </button>
    </div>
  );

  const CartView = () => (
    <div className="flex flex-col h-full bg-gray-50 pb-20">
      <TopAppBar title="Your Order" showBack />
      
      {cart.length === 0 ? (
        <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
          <div className="bg-gray-100 p-4 rounded-full mb-4">
             <ShoppingCart size={40} className="text-gray-300" />
          </div>
          <h2 className="text-lg font-bold text-gray-800">Cart is empty</h2>
          <p className="text-sm text-gray-500 mt-2 mb-6">Browse the marketplace to find the best paddy deals.</p>
          <button onClick={() => setView('market')} className="bg-amber-600 text-white px-6 py-2.5 rounded-xl font-bold shadow-md">
            Go to Market
          </button>
        </div>
      ) : (
        <div className="flex-1 overflow-y-auto p-4 flex flex-col">
          <div className="space-y-3 flex-1">
            {cart.map((item) => (
              <div key={item.cartId} className="bg-white p-3 rounded-2xl shadow-sm flex gap-3 border border-gray-100">
                <img src={item.image} alt={item.name} className="w-20 h-20 object-cover rounded-xl" />
                <div className="flex-1">
                  <h3 className="font-bold text-sm text-gray-900">{item.name}</h3>
                  <p className="text-xs text-gray-500">{item.seller}</p>
                  <div className="mt-2 flex justify-between items-end">
                    <p className="font-black text-amber-600 text-sm">₹{item.price}</p>
                    <button 
                      onClick={() => setCart(prev => prev.filter(i => i.cartId !== item.cartId))}
                      className="text-xs text-red-500 font-medium active:bg-red-50 px-2 py-1 rounded"
                    >
                      Remove
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-6 bg-white p-4 rounded-2xl shadow-sm border border-gray-200">
            <div className="flex justify-between text-sm mb-2 text-gray-600">
              <span>Subtotal</span>
              <span>₹{totalAmount.toLocaleString()}</span>
            </div>
            <div className="flex justify-between text-sm mb-3 text-gray-600">
              <span>Platform Fee</span>
              <span>₹{(totalAmount * 0.01).toLocaleString()}</span>
            </div>
            <div className="flex justify-between font-bold text-lg pt-3 border-t border-gray-100">
              <span>Total Draft</span>
              <span>₹{(totalAmount * 1.01).toLocaleString()}</span>
            </div>
            <button 
              onClick={() => { showToast("Quote Requested!"); setCart([]); setView('home'); }}
              className="w-full bg-gray-900 active:bg-black text-white py-3.5 rounded-xl font-bold mt-4 shadow-lg"
            >
              Request Final Quote
            </button>
          </div>
        </div>
      )}
    </div>
  );

  return (
    <div className="min-h-screen bg-gray-200 flex items-center justify-center font-sans sm:p-8">
      {/* Phone Frame Simulator */}
      <div className="w-full h-[100dvh] sm:w-[400px] sm:h-[800px] bg-white sm:rounded-[2.5rem] shadow-2xl relative flex flex-col overflow-hidden sm:border-[12px] border-gray-900">
        
        <StatusBar />

        <div className="flex-1 overflow-y-auto bg-gray-50 hide-scrollbar" style={{ scrollbarWidth: 'none' }}>
          <div className="animate-in fade-in zoom-in-95 duration-200 h-full">
            {view === 'home' && <HomeView />}
            {view === 'market' && <MarketView />}
            {view === 'sell' && <SellView />}
            {view === 'community' && <CommunityView />}
            {view === 'cart' && <CartView />}
          </div>
        </div>

        {/* Android-style Toast Notification */}
        {toast && (
          <div className="absolute bottom-24 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-sm px-4 py-2 rounded-full shadow-xl z-50 flex items-center gap-2 animate-in slide-in-from-bottom-5">
            <CheckCircle size={14} className="text-green-400" />
            {toast}
          </div>
        )}

        <BottomNav />
      </div>

      {/* Global styles for hiding scrollbars but allowing scroll */}
      <style dangerouslySetInnerHTML={{__html: `
        .hide-scrollbar::-webkit-scrollbar {
          display: none;
        }
      `}} />
    </div>
  );
}