import React, { useState, useEffect } from 'react';
import { 
  Zap, LayoutDashboard, Package, Users, FileText, 
  Plus, Trash2, Search, Download, Printer, 
  ChevronLeft, PlusCircle, ShoppingCart, UserPlus, CheckCircle
} from 'lucide-react';

const App = () => {
  // --- State Management ---
  const [activeSection, setActiveSection] = useState('dash');
  const [inventory, setInventory] = useState([
    { id: 1, name: "פרוז'קטור 50W", cat: 'תאורת חוץ', price: 280, qty: 15 },
    { id: 2, name: 'ספוט לד שקוע', cat: 'תאורת פנים', price: 45, qty: 120 }
  ]);
  const [clients, setClients] = useState([
    { id: 1, name: 'ישראל ישראלי', phone: '050-1234567', email: 'israel@example.com' }
  ]);
  const [quotes, setQuotes] = useState([]);
  
  // State for forms
  const [newProduct, setNewProduct] = useState({ name: '', cat: '', price: '', qty: '' });
  const [newClient, setNewClient] = useState({ name: '', phone: '', email: '' });
  const [newQuote, setNewQuote] = useState({ clientId: '', items: [], discount: 0 });

  // --- Logic Functions ---
  const addProduct = () => {
    if (!newProduct.name || !newProduct.price) return;
    setInventory([...inventory, { ...newProduct, id: Date.now(), price: Number(newProduct.price), qty: Number(newProduct.qty) }]);
    setNewProduct({ name: '', cat: '', price: '', qty: '' });
  };

  const addClient = () => {
    if (!newClient.name || !newClient.phone) return;
    setClients([...clients, { ...newClient, id: Date.now() }]);
    setNewClient({ name: '', phone: '', email: '' });
  };

  const deleteItem = (id, type) => {
    if (type === 'inventory') setInventory(inventory.filter(item => item.id !== id));
    if (type === 'clients') setClients(clients.filter(item => item.id !== id));
  };

  const createQuote = () => {
    if (!newQuote.clientId || newQuote.items.length === 0) return;
    const client = clients.find(c => c.id === Number(newQuote.clientId));
    const subtotal = newQuote.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    const total = subtotal * 1.17; // מע"מ
    
    const quoteData = {
      ...newQuote,
      id: `INV-${Date.now()}`,
      clientName: client.name,
      subtotal,
      total,
      date: new Date().toLocaleDateString('he-IL')
    };
    
    setQuotes([quoteData, ...quotes]);
    setNewQuote({ clientId: '', items: [], discount: 0 });
    setActiveSection('quotes');
  };

  // --- UI Components ---
  const NavItem = ({ id, icon: Icon, label }) => (
    <button 
      onClick={() => setActiveSection(id)}
      className={`flex items-center gap-3 p-4 rounded-2xl transition-all w-full ${
        activeSection === id ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-500 hover:bg-slate-100'
      }`}
    >
      <Icon size={20} />
      <span className="font-bold">{label}</span>
    </button>
  );

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col md:flex-row font-sans" dir="rtl">
      
      {/* Sidebar / Mobile Nav */}
      <aside className="w-full md:w-64 bg-white border-l p-4 flex flex-col gap-2 z-50">
        <div className="flex items-center gap-3 px-4 py-6 mb-4">
          <div className="bg-blue-600 text-white p-2 rounded-xl"><Zap size={24} /></div>
          <h1 className="text-xl font-black text-slate-800 tracking-tighter">מאור לבית</h1>
        </div>
        
        <nav className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible">
          <NavItem id="dash" icon={LayoutDashboard} label="לוח בקרה" />
          <NavItem id="inventory" icon={Package} label="מלאי" />
          <NavItem id="clients" icon={Users} label="לקוחות" />
          <NavItem id="quotes" icon={FileText} label="הצעות מחיר" />
        </nav>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-4 md:p-8 max-w-6xl mx-auto w-full">
        
        {/* DASHBOARD */}
        {activeSection === 'dash' && (
          <div className="space-y-8 animate-in fade-in duration-500">
            <header>
              <h2 className="text-3xl font-black text-slate-900">שלום, מאור</h2>
              <p className="text-slate-500">מה נרצה לעשות היום?</p>
            </header>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="bg-white p-6 rounded-3xl border shadow-sm">
                <p className="text-slate-400 font-bold text-sm">מוצרים במלאי</p>
                <h3 className="text-4xl font-black mt-2 text-blue-600">{inventory.length}</h3>
              </div>
              <div className="bg-white p-6 rounded-3xl border shadow-sm">
                <p className="text-slate-400 font-bold text-sm">לקוחות רשומים</p>
                <h3 className="text-4xl font-black mt-2 text-green-600">{clients.length}</h3>
              </div>
              <div className="bg-white p-6 rounded-3xl border shadow-sm">
                <p className="text-slate-400 font-bold text-sm">הצעות מחיר</p>
                <h3 className="text-4xl font-black mt-2 text-orange-600">{quotes.length}</h3>
              </div>
            </div>

            <div className="bg-blue-700 text-white p-8 rounded-[2.5rem] shadow-xl flex flex-col md:flex-row justify-between items-center gap-6">
              <div>
                <h4 className="text-2xl font-bold mb-2">צריך להוציא הצעת מחיר?</h4>
                <p className="opacity-80">בחר לקוח, בחר מוצרים ושלח לו וואטסאפ תוך דקה.</p>
              </div>
              <button 
                onClick={() => setActiveSection('createQuote')}
                className="bg-white text-blue-700 px-8 py-4 rounded-2xl font-black hover:scale-105 transition-transform"
              >
                צור הצעה עכשיו
              </button>
            </div>
          </div>
        )}

        {/* INVENTORY */}
        {activeSection === 'inventory' && (
          <div className="space-y-6 animate-in slide-in-from-bottom-4 duration-500">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-black">ניהול מלאי מוצרים</h2>
            </div>
            
            <div className="bg-white p-6 rounded-3xl border shadow-sm grid grid-cols-1 md:grid-cols-5 gap-4">
              <input 
                className="md:col-span-2 border rounded-xl px-4 py-3 outline-none focus:ring-2 ring-blue-100" 
                placeholder="שם המוצר"
                value={newProduct.name}
                onChange={e => setNewProduct({...newProduct, name: e.target.value})}
              />
              <input 
                className="border rounded-xl px-4 py-3 outline-none focus:ring-2 ring-blue-100" 
                placeholder="מחיר"
                type="number"
                value={newProduct.price}
                onChange={e => setNewProduct({...newProduct, price: e.target.value})}
              />
              <input 
                className="border rounded-xl px-4 py-3 outline-none focus:ring-2 ring-blue-100" 
                placeholder="כמות"
                type="number"
                value={newProduct.qty}
                onChange={e => setNewProduct({...newProduct, qty: e.target.value})}
              />
              <button onClick={addProduct} className="bg-blue-600 text-white rounded-xl font-bold flex items-center justify-center gap-2">
                <PlusCircle size={20}/> הוסף
              </button>
            </div>

            <div className="bg-white rounded-3xl border shadow-sm overflow-hidden">
              <table className="w-full text-right">
                <thead className="bg-slate-50 border-b">
                  <tr>
                    <th className="p-4 font-bold text-slate-500">מוצר</th>
                    <th className="p-4 font-bold text-slate-500">מחיר</th>
                    <th className="p-4 font-bold text-slate-500">מלאי</th>
                    <th className="p-4"></th>
                  </tr>
                </thead>
                <tbody>
                  {inventory.map(item => (
                    <tr key={item.id} className="border-b last:border-0 hover:bg-slate-50 transition-colors">
                      <td className="p-4 font-bold">{item.name}</td>
                      <td className="p-4">₪{item.price}</td>
                      <td className="p-4"><span className={`px-3 py-1 rounded-full text-xs font-bold ${item.qty < 5 ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'}`}>{item.qty} יח'</span></td>
                      <td className="p-4 text-left">
                        <button onClick={() => deleteItem(item.id, 'inventory')} className="text-slate-300 hover:text-red-500 transition-colors"><Trash2 size={18}/></button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* CLIENTS */}
        {activeSection === 'clients' && (
          <div className="space-y-6 animate-in slide-in-from-bottom-4 duration-500">
            <h2 className="text-2xl font-black">ניהול לקוחות</h2>
            
            <div className="bg-white p-6 rounded-3xl border shadow-sm grid grid-cols-1 md:grid-cols-4 gap-4">
              <input 
                className="border rounded-xl px-4 py-3 outline-none focus:ring-2 ring-blue-100" 
                placeholder="שם הלקוח"
                value={newClient.name}
                onChange={e => setNewClient({...newClient, name: e.target.value})}
              />
              <input 
                className="border rounded-xl px-4 py-3 outline-none focus:ring-2 ring-blue-100" 
                placeholder="טלפון"
                value={newClient.phone}
                onChange={e => setNewClient({...newClient, phone: e.target.value})}
              />
              <input 
                className="border rounded-xl px-4 py-3 outline-none focus:ring-2 ring-blue-100" 
                placeholder="אימייל"
                value={newClient.email}
                onChange={e => setNewClient({...newClient, email: e.target.value})}
              />
              <button onClick={addClient} className="bg-green-600 text-white rounded-xl font-bold flex items-center justify-center gap-2">
                <UserPlus size={20}/> הוסף לקוח
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {clients.map(client => (
                <div key={client.id} className="bg-white p-6 rounded-3xl border shadow-sm flex justify-between items-center group hover:border-blue-200 transition-all">
                  <div>
                    <h4 className="font-bold text-lg">{client.name}</h4>
                    <p className="text-slate-500 text-sm">{client.phone} | {client.email}</p>
                  </div>
                  <button onClick={() => deleteItem(client.id, 'clients')} className="p-3 text-slate-300 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all">
                    <Trash2 size={20}/>
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* QUOTES VIEW */}
        {activeSection === 'quotes' && (
          <div className="space-y-6 animate-in slide-in-from-bottom-4 duration-500">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-black">היסטוריית הצעות מחיר</h2>
              <button onClick={() => setActiveSection('createQuote')} className="bg-blue-600 text-white px-6 py-3 rounded-2xl font-bold flex items-center gap-2 shadow-lg shadow-blue-100">
                <Plus size={20}/> הצעה חדשה
              </button>
            </div>

            {quotes.length === 0 ? (
              <div className="bg-white p-20 rounded-[2.5rem] border text-center text-slate-400">
                <FileText size={48} className="mx-auto mb-4 opacity-20" />
                <p>עדיין לא הופקו הצעות מחיר במערכת.</p>
              </div>
            ) : (
              <div className="space-y-4">
                {quotes.map(quote => (
                  <div key={quote.id} className="bg-white p-6 rounded-3xl border shadow-sm hover:shadow-md transition-all flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                    <div>
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded uppercase">{quote.id}</span>
                        <span className="text-xs text-slate-400 font-bold">{quote.date}</span>
                      </div>
                      <h4 className="text-xl font-black text-slate-800">{quote.clientName}</h4>
                      <p className="text-slate-500 text-sm">סה"כ לתשלום (כולל מע"מ): <span className="font-bold text-slate-700">₪{quote.total.toLocaleString()}</span></p>
                    </div>
                    <div className="flex gap-2 w-full md:w-auto">
                      <button className="flex-1 md:flex-none border px-4 py-2.5 rounded-xl font-bold text-slate-600 flex items-center justify-center gap-2 hover:bg-slate-50 transition-colors">
                        <Printer size={18}/> הדפס
                      </button>
                      <button className="flex-1 md:flex-none bg-green-500 text-white px-4 py-2.5 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-green-600 transition-colors">
                        שלח בוואטסאפ
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* CREATE QUOTE FLOW */}
        {activeSection === 'createQuote' && (
          <div className="space-y-6 animate-in slide-in-from-left-4 duration-500">
            <div className="flex items-center gap-4">
              <button onClick={() => setActiveSection('quotes')} className="p-2 hover:bg-slate-200 rounded-full transition-colors"><ChevronLeft /></button>
              <h2 className="text-2xl font-black">הפקת הצעה חדשה</h2>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Left Column: Form */}
              <div className="lg:col-span-2 space-y-6">
                <div className="bg-white p-6 rounded-3xl border shadow-sm space-y-4">
                  <label className="block font-bold text-slate-700">בחר לקוח</label>
                  <select 
                    className="w-full border rounded-xl px-4 py-3 outline-none focus:ring-2 ring-blue-100 appearance-none bg-slate-50"
                    value={newQuote.clientId}
                    onChange={e => setNewQuote({...newQuote, clientId: e.target.value})}
                  >
                    <option value="">-- בחר לקוח מרשימה --</option>
                    {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </select>

                  <div className="pt-4 border-t space-y-4">
                    <label className="block font-bold text-slate-700">הוסף מוצרים להצעה</label>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {inventory.map(item => (
                        <button 
                          key={item.id}
                          onClick={() => {
                            const existing = newQuote.items.find(i => i.id === item.id);
                            if (existing) {
                              setNewQuote({
                                ...newQuote,
                                items: newQuote.items.map(i => i.id === item.id ? {...i, quantity: i.quantity + 1} : i)
                              });
                            } else {
                              setNewQuote({...newQuote, items: [...newQuote.items, {...item, quantity: 1}]});
                            }
                          }}
                          className="flex justify-between items-center p-4 border rounded-2xl hover:bg-blue-50 hover:border-blue-200 transition-all text-right"
                        >
                          <div>
                            <p className="font-bold text-slate-800">{item.name}</p>
                            <p className="text-sm text-blue-600">₪{item.price}</p>
                          </div>
                          <PlusCircle size={20} className="text-slate-300" />
                        </button>
                      ))}
                    </div>
                  </div>
                </div>

                {newQuote.items.length > 0 && (
                  <div className="bg-white rounded-3xl border shadow-sm overflow-hidden">
                    <table className="w-full text-right">
                      <thead className="bg-slate-50 border-b">
                        <tr>
                          <th className="p-4 font-bold">פריט</th>
                          <th className="p-4 font-bold">כמות</th>
                          <th className="p-4 font-bold">סה"כ</th>
                          <th className="p-4"></th>
                        </tr>
                      </thead>
                      <tbody>
                        {newQuote.items.map(item => (
                          <tr key={item.id} className="border-b">
                            <td className="p-4 font-bold">{item.name}</td>
                            <td className="p-4">
                              <input 
                                type="number" 
                                className="w-16 border rounded p-1" 
                                value={item.quantity}
                                onChange={(e) => {
                                  setNewQuote({
                                    ...newQuote,
                                    items: newQuote.items.map(i => i.id === item.id ? {...i, quantity: Number(e.target.value)} : i)
                                  });
                                }}
                              />
                            </td>
                            <td className="p-4 font-bold text-blue-600">₪{item.price * item.quantity}</td>
                            <td className="p-4">
                              <button 
                                onClick={() => setNewQuote({...newQuote, items: newQuote.items.filter(i => i.id !== item.id)})}
                                className="text-red-400 hover:text-red-600"
                              >
                                <Trash2 size={16}/>
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>

              {/* Right Column: Summary */}
              <div className="space-y-6">
                <div className="bg-slate-900 text-white p-8 rounded-[2.5rem] shadow-xl sticky top-8">
                  <h4 className="text-xl font-bold mb-6 border-b border-white/10 pb-4">סיכום הצעה</h4>
                  
                  <div className="space-y-3 mb-8">
                    <div className="flex justify-between opacity-70">
                      <span>סה"כ מוצרים:</span>
                      <span>₪{newQuote.items.reduce((sum, item) => sum + (item.price * item.quantity), 0).toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between opacity-70">
                      <span>מע"מ (17%):</span>
                      <span>₪{(newQuote.items.reduce((sum, item) => sum + (item.price * item.quantity), 0) * 0.17).toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between text-2xl font-black pt-4 border-t border-white/10">
                      <span>סה"כ:</span>
                      <span>₪{(newQuote.items.reduce((sum, item) => sum + (item.price * item.quantity), 0) * 1.17).toLocaleString()}</span>
                    </div>
                  </div>

                  <button 
                    onClick={createQuote}
                    disabled={!newQuote.clientId || newQuote.items.length === 0}
                    className={`w-full py-5 rounded-2xl font-black flex items-center justify-center gap-2 transition-all ${
                      (!newQuote.clientId || newQuote.items.length === 0) 
                      ? 'bg-white/10 text-white/30 cursor-not-allowed' 
                      : 'bg-green-500 text-white hover:scale-105 shadow-lg shadow-green-900/20'
                    }`}
                  >
                    <CheckCircle size={24}/> שמור והפק הצעה
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}

      </main>
    </div>
  );
};

export default App;