import { useEffect, useMemo, useRef, useState } from 'react';
import { useAuth, useCollection, renderChart } from '@deplixo/sdk';
import { RecipeList } from './components/RecipeList.jsx';
import { RecipeEditor } from './components/RecipeEditor.jsx';
import { CostComparison } from './components/CostComparison.jsx';

function MiniBarChart({ data, label, emptyMessage = 'No data available.' }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current || !Array.isArray(data) || data.length === 0) return;

    renderChart(canvasRef.current, {
      type: 'bar',
      data: {
        labels: data.map(d => d.label),
        datasets: [
          {
            label,
            data: data.map(d => d.value),
          },
        ],
      },
    });
  }, [data, label]);

  if (!Array.isArray(data) || data.length === 0) {
    return <div className="empty-state small"><p>{emptyMessage}</p></div>;
  }

  return <canvas className="chart-canvas" ref={canvasRef} />;
}

function App() {
  const { user, loading, logout } = useAuth();
  const [activeTab, setActiveTab] = useState('recipes');
  const [editingRecipe, setEditingRecipe] = useState(null);
  const [ingredientSearch, setIngredientSearch] = useState('');
  const [priceDraft, setPriceDraft] = useState({ name: '', unit: 'unit', price: '', notes: '' });
  const [refreshTick, setRefreshTick] = useState(0);

  const pricesCollectionName = useMemo(() => {
    const key = user?.id || user?.email || 'unknown';
    return `ingredient_prices_${key}`;
  }, [user?.id, user?.email]);

  const {
    items: ingredientPrices,
    loading: pricesLoading,
    add: addPrice,
    update: updatePrice,
    remove: removePrice,
    search: searchPrices,
  } = useCollection(pricesCollectionName, { personal: true });

  const tabs = [
    { id: 'recipes', label: '📖 My Recipes', icon: '📖' },
    { id: 'new', label: '✚ New Recipe', icon: '✚' },
    { id: 'compare', label: '⚖ Compare', icon: '⚖' },
    { id: 'visualize', label: '📊 Visualize', icon: '📊' },
    { id: 'prices', label: '🧾 Ingredient Prices', icon: '🧾' },
  ];

  useEffect(() => {
    if (user && activeTab === 'recipes' && !editingRecipe) {
      const timer = setTimeout(() => setRefreshTick(t => t + 1), 5 * 60 * 1000);
      return () => clearTimeout(timer);
    }
  }, [user, activeTab, editingRecipe, refreshTick]);

  useEffect(() => {
    if (!user) return;
    const interval = setInterval(() => setRefreshTick(t => t + 1), 10 * 60 * 1000);
    return () => clearInterval(interval);
  }, [user]);

  const normalizedIngredientPrices = useMemo(() => {
    const items = Array.isArray(ingredientPrices) ? ingredientPrices : [];
    return [...items].sort((a, b) => {
      const aTime = new Date(a.updatedAt || a.createdAt || 0).getTime();
      const bTime = new Date(b.updatedAt || b.createdAt || 0).getTime();
      return bTime - aTime;
    });
  }, [ingredientPrices, refreshTick]);

  const filteredIngredientPrices = useMemo(() => {
    const q = ingredientSearch.trim().toLowerCase();
    if (!q) return normalizedIngredientPrices;
    return normalizedIngredientPrices.filter(item => {
      const name = String(item.name || '').toLowerCase();
      const unit = String(item.unit || '').toLowerCase();
      const notes = String(item.notes || '').toLowerCase();
      return name.includes(q) || unit.includes(q) || notes.includes(q);
    });
  }, [normalizedIngredientPrices, ingredientSearch]);

  const recipeCostChartData = useMemo(() => {
    const recipes = Array.isArray(searchPrices?.recipes) ? searchPrices.recipes : [];
    return recipes
      .map(recipe => ({
        label: recipe.name || 'Untitled',
        value: Number(recipe.totalCost ?? recipe.cost ?? 0),
      }))
      .sort((a, b) => b.value - a.value)
      .slice(0, 12);
  }, [searchPrices]);

  const ingredientTrendData = useMemo(() => {
    const grouped = new Map();
    for (const item of normalizedIngredientPrices) {
      const key = `${String(item.name || '').trim().toLowerCase()}__${String(item.unit || '').trim().toLowerCase()}`;
      if (!grouped.has(key)) grouped.set(key, []);
      grouped.get(key).push(item);
    }

    return [...grouped.entries()].map(([key, items]) => {
      const sorted = [...items].sort((a, b) => {
        const aTime = new Date(a.updatedAt || a.createdAt || 0).getTime();
        const bTime = new Date(b.updatedAt || b.createdAt || 0).getTime();
        return aTime - bTime;
      });
      const latest = sorted[sorted.length - 1] || {};
      return {
        key,
        name: latest.name || 'Ingredient',
        unit: latest.unit || 'unit',
        data: sorted.map((item, index) => ({
          label: new Date(item.updatedAt || item.createdAt || Date.now()).toLocaleDateString(),
          value: Number(item.price || 0),
          id: item.id || `${key}_${index}`,
        })),
      };
    }).slice(0, 6);
  }, [normalizedIngredientPrices]);

  const handleEdit = (recipe) => {
    setEditingRecipe(recipe);
    setActiveTab('new');
  };

  const handleSaved = () => {
    setEditingRecipe(null);
    setActiveTab('recipes');
  };

  const handleNewTab = () => {
    if (activeTab === 'new' && !editingRecipe) return;
    setEditingRecipe(null);
    setActiveTab('new');
  };

  const handlePriceSubmit = async (e) => {
    e.preventDefault();
    const name = priceDraft.name.trim();
    const unit = priceDraft.unit.trim() || 'unit';
    const price = Number(priceDraft.price);
    if (!name || !Number.isFinite(price)) return;

    const existing = normalizedIngredientPrices.find(item => String(item.name || '').toLowerCase() === name.toLowerCase() && String(item.unit || '').toLowerCase() === unit.toLowerCase());

    const payload = {
      name,
      unit,
      price,
      notes: priceDraft.notes.trim(),
      updatedAt: new Date().toISOString(),
      refreshedAt: new Date().toISOString(),
    };

    if (existing) {
      await updatePrice(existing.id, payload);
    } else {
      await addPrice({ ...payload, createdAt: new Date().toISOString() });
    }

    setPriceDraft({ name: '', unit: 'unit', price: '', notes: '' });
  };

  const handleRefreshPrices = async () => {
    const now = new Date().toISOString();
    for (const item of normalizedIngredientPrices) {
      await updatePrice(item.id, { ...item, refreshedAt: now, updatedAt: now });
    }
    setRefreshTick(t => t + 1);
  };

  if (loading) {
    return <div className="auth-gate">Signing in...</div>;
  }

  if (!user) {
    return (
      <div className="app-shell auth-shell">
        <header className="app-header">
          <h1 className="app-title">Recipe Cost Calculator</h1>
          <p className="app-subtitle">Sign in with Google to access your private recipe and ingredient database</p>
        </header>

        <section className="auth-card">
          <div className="auth-icon" aria-hidden="true">🔐</div>
          <h2 className="auth-title">Protected recipe workspace</h2>
          <p className="auth-copy">
            Your saved recipes and ingredient price database are private to your account.
            Sign in to create, compare, and manage your costs.
          </p>
          <p className="auth-note">Deplixo will handle Google sign-in for you.</p>
        </section>
      </div>
    );
  }

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="auth-bar">
          <div className="auth-user">
            {user.avatar ? <img className="auth-avatar" src={user.avatar} alt={user.name} /> : <div className="auth-avatar auth-avatar-fallback">{user.name?.charAt(0) || 'U'}</div>}
            <div className="auth-user-meta">
              <span className="auth-user-name">Welcome, {user.name}</span>
              <span className="auth-user-email">{user.email}</span>
            </div>
          </div>
          <button className="btn btn-secondary auth-logout" onClick={logout}>Sign Out</button>
        </div>
        <h1 className="app-title">Recipe Cost Calculator</h1>
        <p className="app-subtitle">Track ingredient costs · Calculate per-serving prices</p>
      </header>
      <nav className="tab-bar">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => tab.id === 'new' ? handleNewTab() : setActiveTab(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </nav>
      <main className="app-main">
        {activeTab === 'recipes' && <RecipeList onEdit={handleEdit} user={user} />}
        {activeTab === 'new' && <RecipeEditor recipe={editingRecipe} onSaved={handleSaved} user={user} />}
        {activeTab === 'compare' && <CostComparison user={user} />}

        {activeTab === 'visualize' && (
          <section className="visualization-container">
            <div className="visualization-card">
              <div className="prices-header">
                <div>
                  <h2 className="editor-title">Recipe cost comparison</h2>
                  <p className="picker-note">Bar chart of recipe total costs for quick side-by-side comparison.</p>
                </div>
              </div>
              <MiniBarChart
                data={recipeCostChartData}
                label="Recipe cost"
                emptyMessage="No recipes found to chart yet. Create recipes to compare their costs."
              />
            </div>

            <div className="visualization-card">
              <div className="prices-header">
                <div>
                  <h2 className="editor-title">Ingredient price trends</h2>
                  <p className="picker-note">Trend charts use your stored ingredient price history over time.</p>
                </div>
              </div>

              <div className="trend-grid">
                {ingredientTrendData.length === 0 ? (
                  <div className="empty-state small">
                    <div className="empty-icon">📈</div>
                    <h3>No ingredient history yet</h3>
                    <p>Add and update ingredient prices to see trend charts over time.</p>
                  </div>
                ) : ingredientTrendData.map(series => (
                  <article className="trend-card" key={series.key}>
                    <div className="recipe-card-header">
                      <h3 className="recipe-card-title">{series.name}</h3>
                      <span className="recipe-badge">{series.unit}</span>
                    </div>
                    <MiniBarChart
                      data={series.data}
                      label={`${series.name} price`}
                      emptyMessage={`No history for ${series.name}.`}
                    />
                  </article>
                ))}
              </div>
            </div>
          </section>
        )}

        {activeTab === 'prices' && (
          <section className="prices-container">
            <div className="prices-header">
              <div>
                <h2 className="editor-title">Personal ingredient price database</h2>
                <p className="picker-note">Stored privately per user. Add prices once and reuse them across recipes.</p>
              </div>
              <button className="btn btn-secondary" onClick={handleRefreshPrices} disabled={pricesLoading}>
                Refresh prices now
              </button>
            </div>

            <form className="price-form" onSubmit={handlePriceSubmit}>
              <div className="form-row">
                <div className="form-group form-group-half">
                  <label className="form-label">Ingredient</label>
                  <input
                    className="form-input"
                    value={priceDraft.name}
                    onChange={e => setPriceDraft(d => ({ ...d, name: e.target.value }))}
                    placeholder="e.g. Olive oil"
                  />
                </div>
                <div className="form-group form-group-half">
                  <label className="form-label">Unit</label>
                  <input
                    className="form-input"
                    value={priceDraft.unit}
                    onChange={e => setPriceDraft(d => ({ ...d, unit: e.target.value }))}
                    placeholder="e.g. liter, kg, unit"
                  />
                </div>
              </div>
              <div className="form-row">
                <div className="form-group form-group-half">
                  <label className="form-label">Price per unit</label>
                  <input
                    className="form-input"
                    type="number"
                    min="0"
                    step="0.01"
                    value={priceDraft.price}
                    onChange={e => setPriceDraft(d => ({ ...d, price: e.target.value }))}
                    placeholder="0.00"
                  />
                </div>
                <div className="form-group form-group-half">
                  <label className="form-label">Notes</label>
                  <input
                    className="form-input"
                    value={priceDraft.notes}
                    onChange={e => setPriceDraft(d => ({ ...d, notes: e.target.value }))}
                    placeholder="Optional supplier, pack size, etc."
                  />
                </div>
              </div>
              <div className="editor-actions">
                <button className="btn btn-primary btn-save" type="submit">Save Price</button>
              </div>
            </form>

            <div className="filter-bar">
              <input
                className="search-input"
                value={ingredientSearch}
                onChange={e => setIngredientSearch(e.target.value)}
                placeholder="Search ingredient prices"
              />
            </div>

            <div className="price-grid">
              {filteredIngredientPrices.length === 0 ? (
                <div className="empty-state small">
                  <div className="empty-icon">🧾</div>
                  <h3>No ingredient prices yet</h3>
                  <p>Add your first personal price to reuse it in recipes.</p>
                </div>
              ) : filteredIngredientPrices.map(item => (
                <article className="price-card" key={item.id}>
                  <div className="recipe-card-header">
                    <h3 className="recipe-card-title">{item.name}</h3>
                    <span className="recipe-badge">{item.unit}</span>
                  </div>
                  <div className="recipe-stats price-stats">
                    <div className="stat-item">
                      <span className="stat-label">Price</span>
                      <span className="stat-value cost">${Number(item.price || 0).toFixed(2)}</span>
                    </div>
                    <div className="stat-item">
                      <span className="stat-label">Updated</span>
                      <span className="stat-value">{item.updatedAt ? new Date(item.updatedAt).toLocaleDateString() : '—'}</span>
                    </div>
                  </div>
                  <p className="recipe-card-desc">{item.notes || 'No notes saved.'}</p>
                  <div className="recipe-card-actions">
                    <button
                      className="btn btn-secondary"
                      onClick={async () => {
                        setPriceDraft({ name: item.name || '', unit: item.unit || 'unit', price: String(item.price ?? ''), notes: item.notes || '' });
                        setActiveTab('prices');
                      }}
                    >
                      Edit
                    </button>
                    <button className="btn btn-danger" onClick={() => removePrice(item.id)}>Delete</button>
                  </div>
                </article>
              ))}
            </div>
          </section>
        )}
      </main>
    </div>
  );
}

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