/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * SymptomLogger — Log new symptoms with type, severity, time, triggers, notes [components/SymptomLogger.jsx]
 * Timeline — Chronological timeline view of logged symptoms [components/Timeline.jsx]
 * Heatmap — Severity heatmap by time of day [components/Heatmap.jsx]
 * @end-component-map */
// DEPLOY_CONFIG: {"cron": [{"name": "weekly_health_insight_report", "schedule": "0 9 * * 1", "action": "event", "config": {"event_type": "analyze_weekly_symptom_patterns"}}], "triggers": [{"name": "send_weekly_health_insight_report_email", "on": "event.completed", "collection": "symptom_logs", "actions": [{"type": "email", "to": "{{config.recipient_emails}}", "subject": "Weekly Health Insight Report", "body": "Your weekly health insight report has been generated. It includes pattern analysis for symptom timing, likely triggers, and symptom clusters. Please review the attached/generated report in your app."}]}]}


import { useEffect, useMemo, useState } from 'react';
import { useAuth, useCollection, renderChart } from '@deplixo/sdk';
import { SymptomLogger } from './components/SymptomLogger.jsx';
import { Timeline } from './components/Timeline.jsx';
import { Heatmap } from './components/Heatmap.jsx';

function ChartPanel({ title, subtitle, children }) {
  return (
    <section className="chart-panel">
      <div className="chart-panel-header">
        <div>
          <h3 className="chart-title">{title}</h3>
          {subtitle ? <p className="chart-subtitle">{subtitle}</p> : null}
        </div>
      </div>
      {children}
    </section>
  );
}

function FrequencyChart({ symptoms }) {
  const canvasRef = useState(null)[0];
  const ref = useMemo(() => ({ current: null }), []);
  ref.current = canvasRef;

  const chartData = useMemo(() => {
    const counts = new Map();
    symptoms.forEach(item => {
      const type = item?.type || 'Unknown';
      counts.set(type, (counts.get(type) || 0) + 1);
    });
    const labels = Array.from(counts.keys());
    return {
      labels,
      datasets: [{
        label: 'Symptom Count',
        data: labels.map(label => counts.get(label) || 0),
      }],
    };
  }, [symptoms]);

  useEffect(() => {
    if (!ref.current || chartData.labels.length === 0) return;
    renderChart(ref.current, {
      type: 'bar',
      data: chartData,
    });
  }, [chartData, ref]);

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

function SeverityTrendChart({ symptoms }) {
  const canvasRef = useState(null)[0];
  const ref = useMemo(() => ({ current: null }), []);
  ref.current = canvasRef;

  const chartData = useMemo(() => {
    const byDay = new Map();
    symptoms.forEach(item => {
      const date = item?.time ? new Date(item.time) : null;
      if (!date || Number.isNaN(date.getTime())) return;
      const key = date.toISOString().slice(0, 10);
      const prev = byDay.get(key) || { sum: 0, count: 0 };
      prev.sum += Number(item?.severity || 0);
      prev.count += 1;
      byDay.set(key, prev);
    });
    const labels = Array.from(byDay.keys()).sort();
    return {
      labels,
      datasets: [{
        label: 'Average Severity',
        data: labels.map(label => {
          const v = byDay.get(label);
          return v && v.count ? Number((v.sum / v.count).toFixed(2)) : 0;
        }),
      }],
    };
  }, [symptoms]);

  useEffect(() => {
    if (!ref.current || chartData.labels.length === 0) return;
    renderChart(ref.current, {
      type: 'line',
      data: chartData,
    });
  }, [chartData, ref]);

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

function TriggerCorrelationChart({ symptoms }) {
  const canvasRef = useState(null)[0];
  const ref = useMemo(() => ({ current: null }), []);
  ref.current = canvasRef;

  const chartData = useMemo(() => {
    const triggerTotals = new Map();
    symptoms.forEach(item => {
      const severity = Number(item?.severity || 0);
      const triggers = Array.isArray(item?.triggers) ? item.triggers : [];
      triggers.forEach(trigger => {
        const key = String(trigger || 'Unknown');
        const prev = triggerTotals.get(key) || { sum: 0, count: 0 };
        prev.sum += severity;
        prev.count += 1;
        triggerTotals.set(key, prev);
      });
    });

    const entries = Array.from(triggerTotals.entries())
      .map(([label, value]) => ({ label, avg: value.count ? value.sum / value.count : 0, count: value.count }))
      .sort((a, b) => b.avg - a.avg)
      .slice(0, 10);

    return {
      labels: entries.map(entry => entry.label),
      datasets: [{
        label: 'Avg Severity When Trigger Present',
        data: entries.map(entry => Number(entry.avg.toFixed(2))),
      }],
    };
  }, [symptoms]);

  useEffect(() => {
    if (!ref.current || chartData.labels.length === 0) return;
    renderChart(ref.current, {
      type: 'bar',
      data: chartData,
    });
  }, [chartData, ref]);

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

function App() {
  const { user, loading, login, logout } = useAuth();
  const { items: allSymptoms, loading: symptomsLoading } = useCollection('symptoms', { personal: true });
  const [activeTab, setActiveTab] = useState('timeline');
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedType, setSelectedType] = useState('all');
  const [dateRange, setDateRange] = useState('all');

  const symptomItems = useMemo(() => Array.isArray(allSymptoms) ? allSymptoms : [], [allSymptoms]);

  const symptomTypes = useMemo(() => {
    const types = new Set();
    symptomItems.forEach(item => {
      if (item?.type) types.add(item.type);
    });
    return ['all', ...Array.from(types).sort()];
  }, [symptomItems]);

  const filteredSymptoms = useMemo(() => {
    const term = searchTerm.trim().toLowerCase();
    const now = new Date();

    return symptomItems.filter(item => {
      const itemDate = item?.time ? new Date(item.time) : null;
      const matchesSearch = !term || [item?.type, item?.notes, ...(Array.isArray(item?.triggers) ? item.triggers : [])]
        .filter(Boolean)
        .some(value => String(value).toLowerCase().includes(term));
      const matchesType = selectedType === 'all' || item?.type === selectedType;

      let matchesDate = true;
      if (dateRange !== 'all' && itemDate && !Number.isNaN(itemDate.getTime())) {
        const diffMs = now.getTime() - itemDate.getTime();
        const diffDays = diffMs / (1000 * 60 * 60 * 24);
        if (dateRange === 'today') matchesDate = diffDays < 1;
        if (dateRange === '7d') matchesDate = diffDays < 7;
        if (dateRange === '30d') matchesDate = diffDays < 30;
      } else if (dateRange !== 'all' && !itemDate) {
        matchesDate = false;
      }

      return matchesSearch && matchesType && matchesDate;
    });
  }, [symptomItems, searchTerm, selectedType, dateRange]);

  useEffect(() => {
    if (activeTab !== 'log') return;
    if (selectedType === 'all') return;
    const currentTypes = symptomTypes.slice(1);
    if (!currentTypes.includes(selectedType)) setSelectedType('all');
  }, [activeTab, selectedType, symptomTypes]);

  const tabs = [
    { id: 'timeline', label: '📋 Timeline', icon: '📋' },
    { id: 'log', label: '＋ Log', icon: '＋' },
    { id: 'heatmap', label: '🔥 Heatmap', icon: '🔥' },
  ];

  const sharedViewProps = { user, symptoms: filteredSymptoms, allSymptoms: symptomItems };

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

  if (!user) {
    return (
      <div className="auth-gate auth-gate-guest">
        <div className="auth-gate-card">
          <h1 className="app-title">Symptom Tracker</h1>
          <p className="app-subtitle">Sign in with Google to access your private symptom data</p>
          <button className="submit-btn auth-login-btn" onClick={login}>
            Continue with Google
          </button>
        </div>
      </div>
    );
  }

  const chartSymptoms = filteredSymptoms;

  return (
    <div className="app-shell">
      <header className="app-header">
        <div className="app-header-row">
          <div>
            <h1 className="app-title">Symptom Tracker</h1>
            <p className="app-subtitle">Monitor your chronic condition patterns</p>
          </div>
          <button className="auth-logout-btn" onClick={logout} aria-label="Sign out">
            Sign Out
          </button>
        </div>
        <div className="auth-user-row">
          <span className="auth-user-avatar" aria-hidden="true">
            {user.avatar ? <img src={user.avatar} alt="" /> : user.name?.charAt(0) || 'U'}
          </span>
          <span className="auth-user-name">{user.name}</span>
        </div>
      </header>

      <main className="app-content">
        <section className="filter-panel">
          <div className="filter-panel-header">
            <h2 className="section-title">Search & Filters</h2>
            <span className="filter-result-count">{filteredSymptoms.length} result{filteredSymptoms.length === 1 ? '' : 's'}</span>
          </div>
          <div className="filter-panel-grid">
            <label className="filter-field">
              <span className="form-label">Search</span>
              <input
                className="form-input"
                type="search"
                placeholder="Type, note, or trigger"
                value={searchTerm}
                onChange={e => setSearchTerm(e.target.value)}
              />
            </label>

            <label className="filter-field">
              <span className="form-label">Symptom Type</span>
              <select
                className="form-input"
                value={selectedType}
                onChange={e => setSelectedType(e.target.value)}
              >
                {symptomTypes.map(type => (
                  <option key={type} value={type}>
                    {type === 'all' ? 'All types' : type}
                  </option>
                ))}
              </select>
            </label>

            <label className="filter-field">
              <span className="form-label">Date Range</span>
              <select
                className="form-input"
                value={dateRange}
                onChange={e => setDateRange(e.target.value)}
              >
                <option value="all">All time</option>
                <option value="today">Today</option>
                <option value="7d">Last 7 days</option>
                <option value="30d">Last 30 days</option>
              </select>
            </label>
          </div>
          <div className="filter-actions">
            <button
              className="filter-clear-btn"
              onClick={() => {
                setSearchTerm('');
                setSelectedType('all');
                setDateRange('all');
              }}
            >
              Clear filters
            </button>
          </div>
        </section>

        <section className="charts-section">
          <ChartPanel title="Symptom Frequency" subtitle="How often each symptom type appears in the current dataset">
            <FrequencyChart symptoms={chartSymptoms} />
          </ChartPanel>
          <ChartPanel title="Severity Trend Over Time" subtitle="Average severity by day across the filtered logs">
            <SeverityTrendChart symptoms={chartSymptoms} />
          </ChartPanel>
          <ChartPanel title="Trigger Correlations" subtitle="Average severity when each trigger is present">
            <TriggerCorrelationChart symptoms={chartSymptoms} />
          </ChartPanel>
        </section>

        {activeTab === 'timeline' && <Timeline user={user} symptoms={filteredSymptoms} loading={symptomsLoading} />}
        {activeTab === 'log' && <SymptomLogger user={user} onLogged={() => setActiveTab('timeline')} defaultType={selectedType !== 'all' ? selectedType : ''} />}
        {activeTab === 'heatmap' && <Heatmap user={user} symptoms={filteredSymptoms} />}
      </main>

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

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