import { useCollection, useIdentity } from '@deplixo/sdk';
import Dashboard from './components/Dashboard.jsx';
import Products from './components/Products.jsx';
import Menus from './components/Menus.jsx';
import Recipes from './components/Recipes.jsx';
import Clients from './components/Clients.jsx';
import Orders from './components/Orders.jsx';
import Ingredients from './components/Ingredients.jsx';
import History from './components/History.jsx';
import { Stock, Production, Reminders, Payments, Calendar, Deliveries, ShoppingList, Settings } from './components/OtherSections.jsx';
import { SEED_RECIPES } from './components/seedRecipes.js';

const NAV = [
  { key: 'home', label: 'Accueil', icon: 'home' },
  { key: 'orders', label: 'Commandes', icon: 'orders' },
  { key: 'clients', label: 'Clients', icon: 'users' },
  { key: 'production', label: 'Production', icon: 'check' },
  { key: 'shopping', label: 'Courses', icon: 'cart' },
  { key: 'recipes', label: 'Recettes', icon: 'book' },
  { key: 'more', label: 'Plus', icon: 'more' },
];

const MORE_ITEMS = [
  { key: 'products', label: 'Produits' },
  { key: 'menus', label: 'Menus' },
  { key: 'ingredients', label: 'Ingrédients' },
  { key: 'stock', label: 'Stock' },
  { key: 'calendar', label: 'Calendrier' },
  { key: 'payments', label: 'Paiements' },
  { key: 'deliveries', label: 'Livraisons' },
  { key: 'reminders', label: 'Rappels' },
  { key: 'history', label: 'Historique des modifications' },
  { key: 'settings', label: 'Paramètres / Administration' },
];

function Icon({ name }) {
  const paths = {
    home: <path d="M3 12l9-9 9 9v9a1 1 0 01-1 1h-5v-6h-6v6H4a1 1 0 01-1-1v-9z" />,
    orders: <path d="M4 4h12l4 4v12H4z M4 8h16" />,
    users: <path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-8 8a8 8 0 0116 0" />,
    check: <path d="M4 12l5 5L20 6" />,
    cart: <path d="M6 6h15l-1.5 9h-12L4 3H2 M9 20a1 1 0 100-2 1 1 0 000 2zm9 0a1 1 0 100-2 1 1 0 000 2z" />,
    book: <path d="M4 4h10a4 4 0 014 4v12H8a4 4 0 01-4-4V4z M4 4v14" />,
    more: <path d="M5 12h.01M12 12h.01M19 12h.01" />,
  };
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name]}
    </svg>
  );
}

function LoginScreen() {
  return (
    <div className="login">
      <div className="login-card">
        <h1>CROQ’UP MIGNARDISE</h1>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--primary-dark)' }}>BY MAË</p>
        <p>Connexion en cours…</p>
      </div>
    </div>
  );
}

// Fields to track per entity type. Everything else is ignored (or hidden as "autres").
const TRACKED_FIELDS = {
  product: ['name', 'price', 'category', 'description', 'recipeId'],
  menu: ['name', 'price', 'description', 'items'],
  recipe: ['name', 'yield', 'unit', 'instructions', 'ingredients', 'notes'],
  order: ['number', 'clientName', 'eventDate', 'eventTime', 'status', 'deliveryMode', 'address', 'lines', 'payments', 'notes'],
};

function diffValues(oldV, newV, fields) {
  const changes = [];
  for (const f of fields) {
    const a = oldV ? oldV[f] : undefined;
    const b = newV ? newV[f] : undefined;
    const sa = JSON.stringify(a);
    const sb = JSON.stringify(b);
    if (sa !== sb) changes.push({ field: f, oldValue: a, newValue: b });
  }
  return changes;
}

function App() {
  const { user, loading: identityLoading } = useIdentity();
  const products = useCollection('products');
  const menus = useCollection('menus');
  const recipes = useCollection('recipes');
  const clients = useCollection('clients');
  const orders = useCollection('orders');
  const ingredients = useCollection('ingredients');
  const tasks = useCollection('tasks');
  const reminders = useCollection('reminders');
  const users = useCollection('users');
  const history = useCollection('history');

  const [view, setView] = useState('home');
  const [focusId, setFocusId] = useState(null);
  const [toast, setToast] = useState('');
  const [moreOpen, setMoreOpen] = useState(false);

  function notify(msg) {
    setToast(msg);
    setTimeout(() => setToast(''), 2500);
  }
  function nav(v, id) {
    setView(v);
    if (id) setFocusId(id);
    setMoreOpen(false);
    window.scrollTo(0, 0);
  }

  // Auto-register user on first load
  useEffect(() => {
    if (!user || users.loading) return;
    const existing = (users.items || []).find(u => u.value?.userId === user.id);
    if (!existing) {
      const isFirst = (users.items || []).length === 0;
      users.add({ userId: user.id, name: user.name, role: isFirst ? 'Admin' : 'Éditeur', joinedAt: new Date().toISOString() });
    }
    // eslint-disable-next-line
  }, [user, users.loading, users.items?.length]);

  const myRole = useMemo(() => {
    if (!user) return 'Lecteur';
    const u = (users.items || []).find(x => x.value?.userId === user.id);
    return u?.value?.role || 'Admin';
  }, [user, users.items]);

  const canEdit = myRole === 'Admin' || myRole === 'Éditeur';
  const canAdmin = myRole === 'Admin';

  // --- History logging wrappers ---
  function logChange({ entityType, entityId, entityName, action, changes }) {
    try {
      history.add({
        entityType,
        entityId: entityId || '',
        entityName: entityName || '',
        action,
        changes: changes || [],
        userName: user?.name || '',
        userId: user?.id || '',
        date: new Date().toISOString(),
      });
    } catch (e) { /* non-blocking */ }
  }

  function nameOf(entityType, value) {
    if (!value) return '';
    if (entityType === 'order') return `#${value.number || ''} — ${value.clientName || ''}`;
    return value.name || '';
  }

  function trackedUpdate(collection, entityType) {
    return async (id, newValue) => {
      const existing = (collection.items || []).find(x => x.id === id);
      const oldValue = existing?.value;
      const fields = TRACKED_FIELDS[entityType] || [];
      const changes = diffValues(oldValue, newValue, fields);
      const result = await collection.update(id, newValue);
      if (changes.length > 0) {
        logChange({
          entityType,
          entityId: id,
          entityName: nameOf(entityType, newValue) || nameOf(entityType, oldValue),
          action: 'update',
          changes,
        });
      }
      return result;
    };
  }

  function trackedAdd(collection, entityType) {
    return async (value) => {
      const result = await collection.add(value);
      logChange({
        entityType,
        entityId: result?.id || '',
        entityName: nameOf(entityType, value),
        action: 'create',
        changes: [],
      });
      return result;
    };
  }

  function trackedRemove(collection, entityType) {
    return async (id) => {
      const existing = (collection.items || []).find(x => x.id === id);
      const oldValue = existing?.value;
      const result = await collection.remove(id);
      logChange({
        entityType,
        entityId: id,
        entityName: nameOf(entityType, oldValue),
        action: 'delete',
        changes: [],
      });
      return result;
    };
  }

  const productsUpdate = trackedUpdate(products, 'product');
  const productsAdd = trackedAdd(products, 'product');
  const productsRemove = trackedRemove(products, 'product');
  const menusUpdate = trackedUpdate(menus, 'menu');
  const menusAdd = trackedAdd(menus, 'menu');
  const menusRemove = trackedRemove(menus, 'menu');
  const recipesUpdate = trackedUpdate(recipes, 'recipe');
  const recipesAdd = trackedAdd(recipes, 'recipe');
  const recipesRemove = trackedRemove(recipes, 'recipe');
  const ordersUpdate = trackedUpdate(orders, 'order');
  const ordersAdd = trackedAdd(orders, 'order');
  const ordersRemove = trackedRemove(orders, 'order');

  async function seedRecipes() {
    for (const r of SEED_RECIPES) {
      // Avoid duplicates
      const exists = (recipes.items || []).some(x => x.value?.name === r.name);
      if (!exists) await recipes.add(r);
    }
    notify('Recettes de base chargées');
  }

  if (identityLoading || !user) {
    return <LoginScreen />;
  }

  const anyLoading = products.loading || menus.loading || recipes.loading || clients.loading || orders.loading || ingredients.loading || tasks.loading || reminders.loading || users.loading;

  const commonProps = {
    products: products.items || [],
    menus: menus.items || [],
    recipes: recipes.items || [],
    clients: clients.items || [],
    orders: orders.items || [],
    ingredients: ingredients.items || [],
    tasks: tasks.items || [],
    reminders: reminders.items || [],
    canEdit,
    notify,
  };

  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          CROQ’UP MIGNARDISE
          <small>BY MAË</small>
        </div>
        <div className="user-chip">
          <span>{user.name}</span>
          <span className="role-badge">{myRole}</span>
        </div>
      </header>

      <main className="main">
        {view === 'home' && (
          <Dashboard
            orders={commonProps.orders}
            tasks={commonProps.tasks}
            reminders={commonProps.reminders}
            ingredients={commonProps.ingredients}
            onNav={nav}
          />
        )}
        {view === 'orders' && (
          <Orders
            {...commonProps}
            onAdd={ordersAdd}
            onUpdate={ordersUpdate}
            onRemove={ordersRemove}
            focusId={focusId}
            clearFocus={() => setFocusId(null)}
          />
        )}
        {view === 'clients' && (
          <Clients
            clients={commonProps.clients}
            orders={commonProps.orders}
            canEdit={canEdit}
            onAdd={clients.add}
            onUpdate={clients.update}
            onRemove={clients.remove}
            notify={notify}
          />
        )}
        {view === 'production' && (
          <Production
            tasks={commonProps.tasks}
            orders={commonProps.orders}
            canEdit={canEdit}
            onAdd={tasks.add}
            onUpdate={tasks.update}
            onRemove={tasks.remove}
            notify={notify}
          />
        )}
        {view === 'shopping' && (
          <ShoppingList
            ingredients={commonProps.ingredients}
            orders={commonProps.orders}
            recipes={commonProps.recipes}
            products={commonProps.products}
            canEdit={canEdit}
            onUpdate={ingredients.update}
            notify={notify}
          />
        )}
        {view === 'recipes' && (
          <Recipes
            recipes={commonProps.recipes}
            ingredients={commonProps.ingredients}
            canEdit={canEdit}
            onAdd={recipesAdd}
            onUpdate={recipesUpdate}
            onRemove={recipesRemove}
            notify={notify}
          />
        )}
        {view === 'products' && (
          <Products
            products={commonProps.products}
            recipes={commonProps.recipes}
            canEdit={canEdit}
            onAdd={productsAdd}
            onUpdate={productsUpdate}
            onRemove={productsRemove}
            notify={notify}
          />
        )}
        {view === 'menus' && (
          <Menus
            menus={commonProps.menus}
            products={commonProps.products}
            canEdit={canEdit}
            onAdd={menusAdd}
            onUpdate={menusUpdate}
            onRemove={menusRemove}
            notify={notify}
          />
        )}
        {view === 'ingredients' && (
          <Ingredients
            ingredients={commonProps.ingredients}
            canEdit={canEdit}
            onAdd={ingredients.add}
            onUpdate={ingredients.update}
            onRemove={ingredients.remove}
            notify={notify}
          />
        )}
        {view === 'stock' && (
          <Stock ingredients={commonProps.ingredients} canEdit={canEdit} onUpdate={ingredients.update} notify={notify} />
        )}
        {view === 'calendar' && (
          <Calendar orders={commonProps.orders} reminders={commonProps.reminders} onNav={nav} />
        )}
        {view === 'payments' && (
          <Payments orders={commonProps.orders} canEdit={canEdit} onUpdateOrder={ordersUpdate} notify={notify} />
        )}
        {view === 'deliveries' && (
          <Deliveries orders={commonProps.orders} clients={commonProps.clients} />
        )}
        {view === 'reminders' && (
          <Reminders
            reminders={commonProps.reminders}
            orders={commonProps.orders}
            clients={commonProps.clients}
            canEdit={canEdit}
            onAdd={reminders.add}
            onUpdate={reminders.update}
            onRemove={reminders.remove}
            notify={notify}
          />
        )}
        {view === 'history' && (
          <History history={history.items || []} />
        )}
        {view === 'settings' && (
          <Settings
            user={user}
            users={users.items || []}
            canEdit={canAdmin}
            onUpdateUser={users.update}
            notify={notify}
            onSeed={seedRecipes}
          />
        )}
        {view === 'more' && (
          <div>
            <div className="page-header"><div><h1>Plus</h1><div className="sub">Accès rapide</div></div></div>
            <div className="grid grid-auto">
              {MORE_ITEMS.map(m => (
                <button key={m.key} className="card" style={{ textAlign: 'left', cursor: 'pointer' }} onClick={() => nav(m.key)} data-testid={`more-${m.key}`}>
                  <div style={{ fontWeight: 700 }}>{m.label}</div>
                </button>
              ))}
            </div>
          </div>
        )}
      </main>

      <nav className="bottom-nav" aria-label="Navigation principale">
        {NAV.map(n => (
          <button
            key={n.key}
            className="nav-btn"
            aria-current={view === n.key ? 'page' : undefined}
            onClick={() => nav(n.key)}
            data-testid={`nav-${n.key}`}
          >
            <Icon name={n.icon} />
            <span>{n.label}</span>
          </button>
        ))}
      </nav>

      {toast && <div className="toast" role="status" aria-live="polite">{toast}</div>}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);