import React, { useState, useEffect, useMemo } from 'react';
import { 
  Plus, 
  Minus, 
  Package, 
  ShoppingCart, 
  Download, 
  Trash2, 
  History, 
  TrendingUp, 
  AlertTriangle,
  ClipboardCheck,
  Search,
  ChevronDown,
  ChevronUp
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  onSnapshot, 
  addDoc, 
  updateDoc, 
  deleteDoc, 
  query, 
  serverTimestamp 
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged 
} from 'firebase/auth';

// --- Firebase Configuration ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'sneaker-inventory-app';

export default function App() {
  const [user, setUser] = useState(null);
  const [sneakers, setSneakers] = useState([]);
  const [transactions, setTransactions] = useState([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  
  // Form states
  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
  const [isSaleModalOpen, setIsSaleModalOpen] = useState(null); // stores sneaker object
  const [newSneaker, setNewSneaker] = useState({ model: '', brand: '', size: '', price: '', stock: '' });
  const [saleQuantity, setSaleQuantity] = useState(1);
  const [view, setView] = useState('inventory'); // 'inventory' | 'history'

  // 1. Auth & Initial Load
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
      }
    };
    initAuth();

    const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
      setUser(user);
      if (!user) setLoading(false);
    });

    return () => unsubscribeAuth();
  }, []);

  // 2. Data Listeners
  useEffect(() => {
    if (!user) return;

    const sneakersCol = collection(db, 'artifacts', appId, 'public', 'data', 'sneakers');
    const historyCol = collection(db, 'artifacts', appId, 'public', 'data', 'transactions');

    const unsubSneakers = onSnapshot(sneakersCol, 
      (snapshot) => {
        const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        setSneakers(data);
        setLoading(false);
      },
      (err) => console.error("Firestore error:", err)
    );

    const unsubHistory = onSnapshot(historyCol, 
      (snapshot) => {
        const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        // Sort in memory by timestamp descending
        data.sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
        setTransactions(data);
      },
      (err) => console.error("Firestore history error:", err)
    );

    return () => {
      unsubSneakers();
      unsubHistory();
    };
  }, [user]);

  // Actions
  const handleAddSneaker = async (e) => {
    e.preventDefault();
    if (!newSneaker.model || !newSneaker.price || !newSneaker.stock) return;
    
    try {
      const sneakersCol = collection(db, 'artifacts', appId, 'public', 'data', 'sneakers');
      await addDoc(sneakersCol, {
        ...newSneaker,
        price: Number(newSneaker.price),
        stock: Number(newSneaker.stock),
        createdAt: serverTimestamp()
      });
      setNewSneaker({ model: '', brand: '', size: '', price: '', stock: '' });
      setIsAddModalOpen(false);
    } catch (err) {
      console.error(err);
    }
  };

  const handleSale = async () => {
    if (!isSaleModalOpen || saleQuantity <= 0) return;
    const sneaker = isSaleModalOpen;
    
    if (sneaker.stock < saleQuantity) {
      alert("Недостаточно товара на складе!");
      return;
    }

    try {
      const sneakerRef = doc(db, 'artifacts', appId, 'public', 'data', 'sneakers', sneaker.id);
      const historyCol = collection(db, 'artifacts', appId, 'public', 'data', 'transactions');

      // Update Stock
      await updateDoc(sneakerRef, {
        stock: sneaker.stock - saleQuantity
      });

      // Log Transaction
      await addDoc(historyCol, {
        sneakerId: sneaker.id,
        model: sneaker.model,
        brand: sneaker.brand,
        size: sneaker.size,
        quantity: saleQuantity,
        totalPrice: sneaker.price * saleQuantity,
        type: 'sale',
        timestamp: serverTimestamp()
      });

      setIsSaleModalOpen(null);
      setSaleQuantity(1);
    } catch (err) {
      console.error(err);
    }
  };

  const handleDelete = async (id) => {
    if (!confirm("Удалить этот товар из базы?")) return;
    try {
      await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'sneakers', id));
    } catch (err) {
      console.error(err);
    }
  };

  // Export to CSV Function
  const exportToCSV = () => {
    const headers = ["Модель", "Бренд", "Размер", "Цена", "Остаток"];
    const rows = sneakers.map(s => [s.model, s.brand, s.size, s.price, s.stock]);
    
    let csvContent = "\uFEFF"; // UTF-8 BOM for Excel
    csvContent += headers.join(",") + "\n";
    rows.forEach(row => {
      csvContent += row.join(",") + "\n";
    });

    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.setAttribute("href", url);
    link.setAttribute("download", `sneakers_stock_${new Date().toISOString().split('T')[0]}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // Copy for Google Sheets (Tab-separated)
  const copyForSheets = () => {
    const headers = "Модель\tБренд\tРазмер\tЦена\tОстаток";
    const rows = sneakers.map(s => `${s.model}\t${s.brand}\t${s.size}\t${s.price}\t${s.stock}`).join("\n");
    const fullText = headers + "\n" + rows;
    
    const textarea = document.createElement('textarea');
    textarea.value = fullText;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert("Данные скопированы! Просто вставьте их (Ctrl+V) в Google Таблицу.");
  };

  const filteredSneakers = useMemo(() => {
    return sneakers.filter(s => 
      s.model.toLowerCase().includes(searchTerm.toLowerCase()) || 
      s.brand.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [sneakers, searchTerm]);

  const stats = useMemo(() => {
    return {
      totalItems: sneakers.reduce((acc, curr) => acc + Number(curr.stock), 0),
      totalValue: sneakers.reduce((acc, curr) => acc + (Number(curr.stock) * Number(curr.price)), 0),
      lowStock: sneakers.filter(s => s.stock <= 3).length
    };
  }, [sneakers]);

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-600"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900 font-sans p-4 md:p-8">
      <div className="max-w-6xl mx-auto">
        
        {/* Header */}
        <header className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
          <div>
            <h1 className="text-3xl font-bold flex items-center gap-2 text-indigo-700">
              <Package className="w-8 h-8" />
              SneakerFlow
            </h1>
            <p className="text-gray-500">Система учета кроссовок v1.0</p>
          </div>
          
          <div className="flex flex-wrap gap-2">
            <button 
              onClick={() => setIsAddModalOpen(true)}
              className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-sm"
            >
              <Plus size={18} /> Добавить товар
            </button>
            <button 
              onClick={copyForSheets}
              className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-sm"
            >
              <ClipboardCheck size={18} /> Для Google Таблиц
            </button>
            <button 
              onClick={exportToCSV}
              className="bg-white border border-gray-200 hover:bg-gray-50 px-4 py-2 rounded-lg flex items-center gap-2 transition-colors shadow-sm"
            >
              <Download size={18} /> CSV
            </button>
          </div>
        </header>

        {/* Dashboard Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4">
            <div className="p-3 bg-blue-100 text-blue-600 rounded-lg"><Package /></div>
            <div>
              <p className="text-sm text-gray-500 uppercase tracking-wider">Всего пар</p>
              <p className="text-2xl font-bold">{stats.totalItems}</p>
            </div>
          </div>
          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4">
            <div className="p-3 bg-green-100 text-green-600 rounded-lg"><TrendingUp /></div>
            <div>
              <p className="text-sm text-gray-500 uppercase tracking-wider">Оценка склада</p>
              <p className="text-2xl font-bold">{stats.totalValue.toLocaleString()} ₽</p>
            </div>
          </div>
          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center gap-4">
            <div className="p-3 bg-red-100 text-red-600 rounded-lg"><AlertTriangle /></div>
            <div>
              <p className="text-sm text-gray-500 uppercase tracking-wider">Мало остатков</p>
              <p className="text-2xl font-bold">{stats.lowStock}</p>
            </div>
          </div>
        </div>

        {/* Navigation Tabs */}
        <div className="flex border-b border-gray-200 mb-6">
          <button 
            onClick={() => setView('inventory')}
            className={`px-6 py-3 font-medium flex items-center gap-2 transition-all ${view === 'inventory' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-gray-700'}`}
          >
            <Package size={18} /> Склад
          </button>
          <button 
            onClick={() => setView('history')}
            className={`px-6 py-3 font-medium flex items-center gap-2 transition-all ${view === 'history' ? 'text-indigo-600 border-b-2 border-indigo-600' : 'text-gray-500 hover:text-gray-700'}`}
          >
            <History size={18} /> История продаж
          </button>
        </div>

        {/* Inventory View */}
        {view === 'inventory' && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-4 border-b border-gray-100 bg-gray-50/50 flex flex-col md:flex-row justify-between gap-4">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                <input 
                  type="text" 
                  placeholder="Поиск по модели или бренду..." 
                  className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-all"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
            </div>

            <div className="overflow-x-auto">
              <table className="w-full text-left">
                <thead className="bg-gray-50 text-gray-600 text-sm uppercase">
                  <tr>
                    <th className="px-6 py-4 font-semibold">Модель</th>
                    <th className="px-6 py-4 font-semibold">Бренд</th>
                    <th className="px-6 py-4 font-semibold">Размер</th>
                    <th className="px-6 py-4 font-semibold text-right">Цена</th>
                    <th className="px-6 py-4 font-semibold text-center">Остаток</th>
                    <th className="px-6 py-4 font-semibold text-right">Действия</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {filteredSneakers.map((item) => (
                    <tr key={item.id} className="hover:bg-gray-50 transition-colors">
                      <td className="px-6 py-4 font-medium">{item.model}</td>
                      <td className="px-6 py-4">
                        <span className="px-2 py-1 bg-gray-100 rounded text-xs text-gray-600 uppercase">
                          {item.brand}
                        </span>
                      </td>
                      <td className="px-6 py-4">{item.size}</td>
                      <td className="px-6 py-4 text-right font-mono">{item.price.toLocaleString()} ₽</td>
                      <td className="px-6 py-4 text-center">
                        <span className={`inline-block px-3 py-1 rounded-full text-sm font-bold ${
                          item.stock <= 3 ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'
                        }`}>
                          {item.stock}
                        </span>
                      </td>
                      <td className="px-6 py-4 text-right flex justify-end gap-2">
                        <button 
                          onClick={() => setIsSaleModalOpen(item)}
                          className="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors"
                          title="Продать"
                        >
                          <ShoppingCart size={18} />
                        </button>
                        <button 
                          onClick={() => handleDelete(item.id)}
                          className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                          title="Удалить"
                        >
                          <Trash2 size={18} />
                        </button>
                      </td>
                    </tr>
                  ))}
                  {filteredSneakers.length === 0 && (
                    <tr>
                      <td colSpan="6" className="px-6 py-12 text-center text-gray-400 italic">
                        Ничего не найдено
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {/* History View */}
        {view === 'history' && (
          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left">
                <thead className="bg-gray-50 text-gray-600 text-sm uppercase">
                  <tr>
                    <th className="px-6 py-4 font-semibold">Дата</th>
                    <th className="px-6 py-4 font-semibold">Товар</th>
                    <th className="px-6 py-4 font-semibold text-center">Кол-во</th>
                    <th className="px-6 py-4 font-semibold text-right">Сумма</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {transactions.map((t) => (
                    <tr key={t.id} className="hover:bg-gray-50 transition-colors">
                      <td className="px-6 py-4 text-sm text-gray-500">
                        {t.timestamp?.toDate ? t.timestamp.toDate().toLocaleString() : 'Обработка...'}
                      </td>
                      <td className="px-6 py-4 font-medium">
                        {t.brand} {t.model} (р.{t.size})
                      </td>
                      <td className="px-6 py-4 text-center font-bold">-{t.quantity}</td>
                      <td className="px-6 py-4 text-right text-green-600 font-bold">
                        +{t.totalPrice.toLocaleString()} ₽
                      </td>
                    </tr>
                  ))}
                  {transactions.length === 0 && (
                    <tr>
                      <td colSpan="4" className="px-6 py-12 text-center text-gray-400 italic">
                        Продаж пока не было
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* Add Sneaker Modal */}
      {isAddModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden animate-in zoom-in duration-300">
            <div className="p-6 border-b border-gray-100">
              <h2 className="text-xl font-bold">Добавить новые кроссовки</h2>
            </div>
            <form onSubmit={handleAddSneaker} className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Модель</label>
                <input 
                  required
                  type="text" 
                  className="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500" 
                  value={newSneaker.model}
                  onChange={e => setNewSneaker({...newSneaker, model: e.target.value})}
                  placeholder="Напр. Air Force 1"
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Бренд</label>
                  <input 
                    required
                    type="text" 
                    className="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500" 
                    value={newSneaker.brand}
                    onChange={e => setNewSneaker({...newSneaker, brand: e.target.value})}
                    placeholder="Nike"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Размер</label>
                  <input 
                    required
                    type="text" 
                    className="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500" 
                    value={newSneaker.size}
                    onChange={e => setNewSneaker({...newSneaker, size: e.target.value})}
                    placeholder="42 EU"
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Цена (₽)</label>
                  <input 
                    required
                    type="number" 
                    className="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500" 
                    value={newSneaker.price}
                    onChange={e => setNewSneaker({...newSneaker, price: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Кол-во</label>
                  <input 
                    required
                    type="number" 
                    className="w-full px-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500" 
                    value={newSneaker.stock}
                    onChange={e => setNewSneaker({...newSneaker, stock: e.target.value})}
                  />
                </div>
              </div>
              <div className="flex gap-3 pt-4">
                <button 
                  type="button" 
                  onClick={() => setIsAddModalOpen(false)}
                  className="flex-1 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                >
                  Отмена
                </button>
                <button 
                  type="submit" 
                  className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
                >
                  Сохранить
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Sale Modal */}
      {isSaleModalOpen && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 animate-in fade-in">
          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden animate-in zoom-in">
            <div className="p-6 border-b border-gray-100 flex items-center gap-3">
              <ShoppingCart className="text-indigo-600" />
              <h2 className="text-xl font-bold">Оформить продажу</h2>
            </div>
            <div className="p-6 space-y-4">
              <div className="p-4 bg-gray-50 rounded-lg">
                <p className="font-bold text-lg">{isSaleModalOpen.brand} {isSaleModalOpen.model}</p>
                <p className="text-sm text-gray-500">Размер: {isSaleModalOpen.size} | На складе: {isSaleModalOpen.stock}</p>
              </div>
              
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Количество к продаже</label>
                <div className="flex items-center gap-4">
                  <button 
                    onClick={() => setSaleQuantity(Math.max(1, saleQuantity - 1))}
                    className="p-2 border border-gray-200 rounded-lg hover:bg-gray-100"
                  >
                    <Minus size={20} />
                  </button>
                  <span className="text-2xl font-bold w-12 text-center">{saleQuantity}</span>
                  <button 
                    onClick={() => setSaleQuantity(Math.min(isSaleModalOpen.stock, saleQuantity + 1))}
                    className="p-2 border border-gray-200 rounded-lg hover:bg-gray-100"
                  >
                    <Plus size={20} />
                  </button>
                </div>
              </div>

              <div className="pt-4 border-t border-gray-100">
                <div className="flex justify-between items-center mb-6">
                  <span className="text-gray-500 uppercase text-xs font-bold">Итого к оплате</span>
                  <span className="text-2xl font-black text-indigo-600">{(isSaleModalOpen.price * saleQuantity).toLocaleString()} ₽</span>
                </div>
                
                <div className="flex gap-3">
                  <button 
                    onClick={() => setIsSaleModalOpen(null)}
                    className="flex-1 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
                  >
                    Отмена
                  </button>
                  <button 
                    onClick={handleSale}
                    className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-lg"
                  >
                    Подтвердить
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}