import React, { useState, useEffect, useMemo } from 'react';
import { 
  Plus, 
  Search, 
  ShoppingCart, 
  History, 
  Download, 
  TrendingUp, 
  Package, 
  Store, 
  Users, 
  ChevronRight,
  LogOut,
  Trash2,
  AlertCircle,
  FileSpreadsheet
} from 'lucide-react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  doc, 
  setDoc, 
  getDoc, 
  getDocs, 
  onSnapshot, 
  updateDoc, 
  addDoc,
  deleteDoc,
  query,
  orderBy
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged 
} from 'firebase/auth';

// --- 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-sales-manager';

// --- PRE-DEFINED DATA FROM CSV (Fallback & Initial Seed) ---
const INITIAL_INVENTORY = [
  { id: "1", sku: "DC0774-001", size: "38.5", count: 1, price: 6400 },
  { id: "2", sku: "DC0774-001", size: "38", count: 1, price: 6000 },
  { id: "3", sku: "DC0774-001", size: "37.5", count: 1, price: 5700 },
  { id: "4", sku: "MR530AD", size: "40", count: 1, price: 6500 },
  { id: "5", sku: "MR530AD", size: "39.5", count: 1, price: 6000 },
  { id: "6", sku: "MR530AD", size: "38.5", count: 1, price: 6000 },
  { id: "7", sku: "DC0774-105", size: "39", count: 1, price: 6775 },
  { id: "8", sku: "DD1503-103", size: "40", count: 1, price: 5720 },
  { id: "9", sku: "DD1391-103", size: "45", count: 1, price: 6072 },
];

export default function App() {
  const [user, setUser] = useState(null);
  const [inventory, setInventory] = useState([]);
  const [sales, setSales] = useState([]);
  const [loading, setLoading] = useState(true);
  const [view, setView] = useState('inventory'); // 'inventory' | 'sales' | 'stats'
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedItem, setSelectedItem] = useState(null);
  const [showSaleModal, setShowSaleModal] = useState(false);
  const [saleChannel, setSaleChannel] = useState('Личная встреча');
  const [customPrice, setCustomPrice] = useState('');

  // 1. Auth Init
  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 unsubscribe = onAuthStateChanged(auth, (u) => {
      setUser(u);
    });
    return () => unsubscribe();
  }, []);

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

    const invCol = collection(db, 'artifacts', appId, 'public', 'data', 'inventory');
    const salesCol = collection(db, 'artifacts', appId, 'public', 'data', 'sales');

    const unsubInv = onSnapshot(invCol, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      // If empty, seed from initial data
      if (data.length === 0) {
        INITIAL_INVENTORY.forEach(async (item) => {
          await setDoc(doc(invCol, item.id), item);
        });
      }
      setInventory(data);
      setLoading(false);
    }, (err) => console.error(err));

    const unsubSales = onSnapshot(salesCol, (snapshot) => {
      const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setSales(data.sort((a, b) => b.timestamp - a.timestamp));
    }, (err) => console.error(err));

    return () => {
      unsubInv();
      unsubSales();
    };
  }, [user]);

  // Handlers
  const handleSale = async () => {
    if (!selectedItem || !user) return;

    const salePrice = parseFloat(customPrice) || selectedItem.price;
    const saleData = {
      sku: selectedItem.sku,
      size: selectedItem.size,
      originalPrice: selectedItem.price,
      salePrice: salePrice,
      channel: saleChannel,
      timestamp: Date.now(),
      sellerId: user.uid
    };

    try {
      // 1. Add to sales
      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'sales'), saleData);

      // 2. Update inventory (decrement count)
      const invDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'inventory', selectedItem.id);
      if (selectedItem.count > 1) {
        await updateDoc(invDocRef, { count: selectedItem.count - 1 });
      } else {
        await deleteDoc(invDocRef);
      }

      setShowSaleModal(false);
      setSelectedItem(null);
      setCustomPrice('');
    } catch (err) {
      alert("Ошибка при сохранении продажи: " + err.message);
    }
  };

  const exportToCSV = () => {
    const headers = ["Дата", "Артикул", "Размер", "Цена закупа", "Цена продажи", "Канал"];
    const rows = sales.map(s => [
      new Date(s.timestamp).toLocaleString('ru-RU'),
      s.sku,
      s.size,
      s.originalPrice,
      s.salePrice,
      s.channel
    ]);

    let csvContent = "data:text/csv;charset=utf-8," 
      + [headers, ...rows].map(e => e.join(",")).join("\n");

    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `sales_export_${new Date().toLocaleDateString()}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const filteredInventory = useMemo(() => {
    return inventory.filter(item => 
      item.sku.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [inventory, searchTerm]);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen bg-slate-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-slate-50 text-slate-900 pb-20">
      {/* Header */}
      <header className="bg-white border-b sticky top-0 z-10 px-4 py-4 flex items-center justify-between shadow-sm">
        <div className="flex items-center gap-2">
          <div className="bg-indigo-600 p-2 rounded-lg">
            <Package className="text-white w-6 h-6" />
          </div>
          <h1 className="font-bold text-xl tracking-tight">SneakerSales</h1>
        </div>
        <button 
          onClick={exportToCSV}
          className="flex items-center gap-2 bg-emerald-50 text-emerald-700 px-3 py-2 rounded-lg hover:bg-emerald-100 transition-colors font-medium text-sm"
        >
          <FileSpreadsheet size={18} />
          <span className="hidden sm:inline">Выгрузить в CSV</span>
        </button>
      </header>

      {/* Main Content */}
      <main className="max-w-3xl mx-auto p-4">
        {view === 'inventory' && (
          <div className="space-y-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 w-5 h-5" />
              <input 
                type="text" 
                placeholder="Поиск по артикулу..." 
                className="w-full pl-10 pr-4 py-3 bg-white border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all shadow-sm"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>

            <div className="grid gap-3">
              {filteredInventory.length > 0 ? (
                filteredInventory.map((item) => (
                  <div 
                    key={item.id} 
                    onClick={() => {
                      setSelectedItem(item);
                      setShowSaleModal(true);
                    }}
                    className="bg-white p-4 rounded-xl border border-slate-200 flex items-center justify-between hover:border-indigo-300 hover:shadow-md transition-all cursor-pointer active:scale-[0.98]"
                  >
                    <div>
                      <h3 className="font-bold text-lg text-indigo-900">{item.sku}</h3>
                      <div className="flex gap-3 text-sm text-slate-500 mt-1">
                        <span className="bg-slate-100 px-2 py-0.5 rounded">Размер: {item.size}</span>
                        <span className="bg-slate-100 px-2 py-0.5 rounded">В наличии: {item.count}</span>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-bold text-lg">{item.price} ₽</div>
                      <div className="text-xs text-indigo-500 font-semibold uppercase tracking-wider">Продать →</div>
                    </div>
                  </div>
                ))
              ) : (
                <div className="py-20 text-center text-slate-400">
                  <Package className="w-12 h-12 mx-auto mb-3 opacity-20" />
                  <p>Ничего не найдено</p>
                </div>
              )}
            </div>
          </div>
        )}

        {view === 'sales' && (
          <div className="space-y-4">
            <h2 className="text-xl font-bold flex items-center gap-2">
              <History className="text-indigo-600" />
              История продаж
            </h2>
            <div className="space-y-3">
              {sales.length > 0 ? (
                sales.map((sale) => (
                  <div key={sale.id} className="bg-white p-4 rounded-xl border border-slate-100 shadow-sm flex items-center justify-between">
                    <div>
                      <div className="font-bold">{sale.sku}</div>
                      <div className="text-xs text-slate-400">{new Date(sale.timestamp).toLocaleString('ru-RU')}</div>
                      <div className="mt-1 flex gap-2">
                        <span className={`text-[10px] px-2 py-0.5 rounded-full font-bold uppercase ${
                          sale.channel === 'Авито' ? 'bg-blue-100 text-blue-700' : 
                          sale.channel === 'Маркет' ? 'bg-yellow-100 text-yellow-800' : 
                          'bg-indigo-100 text-indigo-700'
                        }`}>
                          {sale.channel}
                        </span>
                        <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full">р. {sale.size}</span>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="font-bold text-emerald-600">+{sale.salePrice} ₽</div>
                      <div className="text-[10px] text-slate-400 line-through">закуп {sale.originalPrice}</div>
                    </div>
                  </div>
                ))
              ) : (
                <div className="py-20 text-center text-slate-400">
                  Пока нет продаж
                </div>
              )}
            </div>
          </div>
        )}

        {view === 'stats' && (
          <div className="space-y-6">
             <div className="grid grid-cols-2 gap-4">
                <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                  <p className="text-slate-500 text-sm">Всего пар</p>
                  <p className="text-2xl font-black text-indigo-600">{inventory.reduce((acc, i) => acc + i.count, 0)}</p>
                </div>
                <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                  <p className="text-slate-500 text-sm">Продано</p>
                  <p className="text-2xl font-black text-emerald-600">{sales.length}</p>
                </div>
             </div>

             <div className="bg-white p-6 rounded-2xl shadow-sm border border-slate-100">
                <h3 className="font-bold mb-4">Выручка по каналам</h3>
                <div className="space-y-3">
                  {['Маркет', 'Авито', 'Личная встреча'].map(channel => {
                    const total = sales.filter(s => s.channel === channel).reduce((acc, s) => acc + s.salePrice, 0);
                    const count = sales.filter(s => s.channel === channel).length;
                    return (
                      <div key={channel} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                        <span className="font-medium">{channel}</span>
                        <div className="text-right">
                          <div className="font-bold">{total} ₽</div>
                          <div className="text-xs text-slate-500">{count} шт.</div>
                        </div>
                      </div>
                    )
                  })}
                </div>
             </div>
          </div>
        )}
      </main>

      {/* Navigation Bar */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 px-6 py-3 flex justify-around items-center shadow-2xl z-20">
        <button 
          onClick={() => setView('inventory')}
          className={`flex flex-col items-center gap-1 transition-colors ${view === 'inventory' ? 'text-indigo-600' : 'text-slate-400'}`}
        >
          <Store size={22} fill={view === 'inventory' ? 'currentColor' : 'none'} />
          <span className="text-[10px] font-bold">Склад</span>
        </button>
        <button 
          onClick={() => setView('sales')}
          className={`flex flex-col items-center gap-1 transition-colors ${view === 'sales' ? 'text-indigo-600' : 'text-slate-400'}`}
        >
          <ShoppingCart size={22} fill={view === 'sales' ? 'currentColor' : 'none'} />
          <span className="text-[10px] font-bold">Продажи</span>
        </button>
        <button 
          onClick={() => setView('stats')}
          className={`flex flex-col items-center gap-1 transition-colors ${view === 'stats' ? 'text-indigo-600' : 'text-slate-400'}`}
        >
          <TrendingUp size={22} />
          <span className="text-[10px] font-bold">Аналитика</span>
        </button>
      </nav>

      {/* Sale Modal */}
      {showSaleModal && selectedItem && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
          <div className="bg-white w-full max-w-sm rounded-3xl p-6 shadow-2xl animate-in zoom-in-95 duration-200">
            <h2 className="text-xl font-black mb-1">Продажа товара</h2>
            <p className="text-slate-500 mb-6">{selectedItem.sku} • Размер {selectedItem.size}</p>
            
            <div className="space-y-5">
              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase mb-2">Канал продажи</label>
                <div className="grid grid-cols-3 gap-2">
                  {['Маркет', 'Авито', 'Встреча'].map((ch) => {
                    const actualCh = ch === 'Встреча' ? 'Личная встреча' : ch;
                    return (
                      <button 
                        key={ch}
                        onClick={() => setSaleChannel(actualCh)}
                        className={`py-2 text-xs font-bold rounded-lg border-2 transition-all ${
                          saleChannel === actualCh 
                            ? 'border-indigo-600 bg-indigo-50 text-indigo-600' 
                            : 'border-slate-100 text-slate-500 hover:border-slate-200'
                        }`}
                      >
                        {ch}
                      </button>
                    )
                  })}
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase mb-2">Цена продажи (₽)</label>
                <input 
                  type="number" 
                  placeholder={selectedItem.price}
                  className="w-full bg-slate-50 border-none rounded-xl py-3 px-4 font-bold text-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                  value={customPrice}
                  onChange={(e) => setCustomPrice(e.target.value)}
                />
              </div>

              <div className="flex gap-3 pt-2">
                <button 
                  onClick={() => setShowSaleModal(false)}
                  className="flex-1 py-3 font-bold text-slate-500 bg-slate-100 rounded-xl hover:bg-slate-200 transition-colors"
                >
                  Отмена
                </button>
                <button 
                  onClick={handleSale}
                  className="flex-[2] py-3 font-bold text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 shadow-lg shadow-indigo-200 transition-all active:scale-95"
                >
                  Оформить
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}