// DEPLOY_CONFIG: {"triggers": [{"name": "high_bill_alert", "on": "collection.add", "collection": "bills", "actions": [{"type": "notification", "title": "Unusually high bill detected", "body": "A newly added bill is more than 50% above the average."}, {"type": "email", "to": "alerts@deplixo.app", "subject": "Alert: Unusually high bill detected", "body": "A newly added bill is more than 50% above the average."}]}]}
import { useMemo, useState } from 'react';
import { useAuth, useCollection, exportCSV, exportJSON } from '@deplixo/sdk';
import { Dashboard } from './components/Dashboard.jsx';
import { BillForm } from './components/BillForm.jsx';
import { BillList } from './components/BillList.jsx';
import { Comparison } from './components/Comparison.jsx';

function App() {
  const { user, loading, logout } = useAuth();
  const { items: bills = [] } = useCollection('bills', { personal: true });
  const [activeTab, setActiveTab] = useState('dashboard');
  const [editingBill, setEditingBill] = useState(null);
  const [showForm, setShowForm] = useState(false);
  const [showExportPanel, setShowExportPanel] = useState(false);
  const [exportFormat, setExportFormat] = useState('csv');
  const [exportScope, setExportScope] = useState('all');
  const [exportMessage, setExportMessage] = useState('');

  const tabs = [
    { id: 'dashboard', label: 'Dashboard', icon: '📊' },
    { id: 'bills', label: 'Bills', icon: '🧾' },
    { id: 'comparison', label: 'Compare', icon: '📈' },
  ];

  const handleEdit = (bill) => {
    setEditingBill(bill);
    setShowForm(true);
  };

  const handleCloseForm = () => {
    setShowForm(false);
    setEditingBill(null);
  };

  const billData = useMemo(() => {
    return bills.map((bill) => ({
      id: bill.id ?? '',
      type: bill.type ?? bill.category ?? '',
      provider: bill.provider ?? '',
      amount: bill.amount ?? '',
      date: bill.date ?? '',
      notes: bill.notes ?? '',
      createdAt: bill.createdAt ?? '',
      updatedAt: bill.updatedAt ?? '',
    }));
  }, [bills]);

  const getFilteredExportData = () => {
    if (exportScope === 'all') return billData;

    if (activeTab === 'bills') {
      const billListElement = document.querySelector('.bill-list');
      if (!billListElement) return billData;
    }

    return billData;
  };

  const handleExport = () => {
    const records = getFilteredExportData();
    const filenameBase = `bill-tracker-${exportScope}-${new Date().toISOString().slice(0, 10)}`;

    if (exportFormat === 'csv') {
      exportCSV(records, {
        filename: `${filenameBase}.csv`,
        columns: ['id', 'type', 'provider', 'amount', 'date', 'notes', 'createdAt', 'updatedAt'],
      });
      setExportMessage(`Exported ${records.length} record${records.length === 1 ? '' : 's'} to CSV.`);
    } else {
      exportJSON(records, { filename: `${filenameBase}.json` });
      setExportMessage(`Exported ${records.length} record${records.length === 1 ? '' : 's'} to JSON.`);
    }

    setShowExportPanel(false);
  };

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

  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-card">
          <div className="auth-icon">⚡</div>
          <h1>Bill Tracker</h1>
          <p>Sign in with Google to view and manage your household bills, analytics, comparisons, and exports.</p>
          <div className="auth-note">You must be authenticated to access household data.</div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-left">
          <span className="header-icon">⚡</span>
          <h1>Bill Tracker</h1>
        </div>
        <div className="header-right">
          <span className="user-chip">{user.name}</span>
          <button className="add-btn" onClick={() => { setEditingBill(null); setShowForm(true); }}>
            + Add Bill
          </button>
          <button className="btn-secondary" onClick={() => setShowExportPanel((v) => !v)}>
            Export
          </button>
          <button className="btn-secondary sign-out-btn" onClick={logout}>
            Sign Out
          </button>
        </div>
      </header>

      {showExportPanel && (
        <section className="export-panel" aria-label="Export data panel">
          <div className="export-panel-header">
            <div>
              <h2>Export Data</h2>
              <p>Download household bills as CSV or JSON from the browser.</p>
            </div>
            <button className="modal-close" onClick={() => setShowExportPanel(false)} aria-label="Close export panel">
              ×
            </button>
          </div>

          <div className="export-grid">
            <div className="form-group">
              <label className="form-label">Format</label>
              <div className="type-selector">
                <button className={`type-chip ${exportFormat === 'csv' ? 'selected' : ''}`} onClick={() => setExportFormat('csv')} type="button">
                  CSV
                </button>
                <button className={`type-chip ${exportFormat === 'json' ? 'selected' : ''}`} onClick={() => setExportFormat('json')} type="button">
                  JSON
                </button>
              </div>
            </div>

            <div className="form-group">
              <label className="form-label">Scope</label>
              <div className="type-selector">
                <button className={`type-chip ${exportScope === 'all' ? 'selected' : ''}`} onClick={() => setExportScope('all')} type="button">
                  All data
                </button>
                <button className={`type-chip ${exportScope === 'filtered' ? 'selected' : ''}`} onClick={() => setExportScope('filtered')} type="button">
                  Filtered view
                </button>
              </div>
              <div className="export-help">Filtered view exports the currently available bills in the app.</div>
            </div>
          </div>

          <div className="form-actions export-actions">
            <button className="btn-secondary" onClick={() => setShowExportPanel(false)} type="button">
              Cancel
            </button>
            <button className="btn-primary" onClick={handleExport} type="button" disabled={!billData.length}>
              Download {exportFormat.toUpperCase()}
            </button>
          </div>

          {exportMessage && <div className="export-message">{exportMessage}</div>}
        </section>
      )}

      <nav className="tab-nav">
        {tabs.map(tab => (
          <button
            key={tab.id}
            className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </nav>

      <main className="app-main">
        {activeTab === 'dashboard' && <Dashboard onEdit={handleEdit} />}
        {activeTab === 'bills' && <BillList onEdit={handleEdit} onAdd={() => { setEditingBill(null); setShowForm(true); }} />}
        {activeTab === 'comparison' && <Comparison />}
      </main>

      {showForm && <BillForm bill={editingBill} onClose={handleCloseForm} />}
    </div>
  );
}

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