/* @component-map
 * App — Main container, tab navigation [app.jsx]
 * TastingForm — Log new wine tastings with all details [components/TastingForm.jsx]
 * TastingList — Browse, search, and filter past tastings [components/TastingList.jsx]
 * TastingDetail — Detailed view of a single tasting [components/TastingDetail.jsx]
 * @end-component-map */

import { useEffect, useMemo, useRef, useState } from 'react';
import { generatePDF, useAuth, useCollection, renderChart } from '@deplixo/sdk';
import { TastingForm } from './components/TastingForm.jsx';
import { TastingList } from './components/TastingList.jsx';
import { TastingDetail } from './components/TastingDetail.jsx';

function buildSharePayload(tasting, userName = 'Cellar Notes') {
  const wineName = tasting?.wineName?.trim() || 'Untitled Tasting';
  const vintage = tasting?.vintage?.trim();
  const region = tasting?.region?.trim();
  const grape = tasting?.grape?.trim();
  const rating = Number(tasting?.rating || 0);
  const date = tasting?.date || tasting?.createdAt || '';
  const notes = tasting?.notes?.trim();
  const aroma = tasting?.aroma?.trim();
  const palate = tasting?.palate?.trim();
  const finish = tasting?.finish?.trim();
  const foodPairing = tasting?.foodPairing?.trim();

  const parts = [
    `🍷 ${wineName}`,
    vintage ? `Vintage: ${vintage}` : null,
    region ? `Region: ${region}` : null,
    grape ? `Grape: ${grape}` : null,
    rating ? `Rating: ${rating}/5` : null,
    date ? `Tasted: ${new Date(date).toLocaleDateString()}` : null,
    aroma ? `Aroma: ${aroma}` : null,
    palate ? `Palate: ${palate}` : null,
    finish ? `Finish: ${finish}` : null,
    foodPairing ? `Pairing: ${foodPairing}` : null,
    notes ? `Notes: ${notes}` : null,
    `Shared from ${userName} via Cellar Notes`
  ].filter(Boolean);

  return parts.join('\n');
}

function formatDate(value) {
  if (!value) return 'Unknown';
  const date = new Date(value);
  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleDateString();
}

function buildPdfTastingsReport(user, tastings, title = 'Cellar Notes — Tasting Journal') {
  const reportDate = new Date().toLocaleDateString();
  const total = tastings.length;
  const avgRating = total
    ? (tastings.reduce((sum, tasting) => sum + Number(tasting.rating || 0), 0) / total).toFixed(2)
    : '0.00';

  return (
    <div className="pdf-report">
      <header className="pdf-report-header">
        <div>
          <h1>{title}</h1>
          <p>Generated for {user?.name || 'Cellar Notes'} on {reportDate}</p>
        </div>
        <div className="pdf-report-summary">
          <div><strong>Total Tastings:</strong> {total}</div>
          <div><strong>Average Rating:</strong> {avgRating}/5</div>
        </div>
      </header>

      <section className="pdf-report-section">
        <h2>Journal Entries</h2>
        {tastings.length > 0 ? tastings.map((tasting, index) => (
          <article key={tasting._id || tasting.id || `${tasting.wineName || 'tasting'}-${index}`} className="pdf-tasting-card">
            <h3>{tasting.wineName?.trim() || 'Untitled Tasting'}</h3>
            <div className="pdf-meta-grid">
              <div><strong>Date:</strong> {formatDate(tasting.date || tasting.createdAt)}</div>
              <div><strong>Vintage:</strong> {tasting.vintage?.trim() || '—'}</div>
              <div><strong>Region:</strong> {tasting.region?.trim() || '—'}</div>
              <div><strong>Grape:</strong> {tasting.grape?.trim() || '—'}</div>
              <div><strong>Rating:</strong> {Number(tasting.rating || 0)}/5</div>
              <div><strong>Food Pairing:</strong> {tasting.foodPairing?.trim() || '—'}</div>
            </div>
            {tasting.aroma?.trim() ? <p><strong>Aroma:</strong> {tasting.aroma.trim()}</p> : null}
            {tasting.palate?.trim() ? <p><strong>Palate:</strong> {tasting.palate.trim()}</p> : null}
            {tasting.finish?.trim() ? <p><strong>Finish:</strong> {tasting.finish.trim()}</p> : null}
            {tasting.notes?.trim() ? <p className="pdf-notes"><strong>Notes:</strong> {tasting.notes.trim()}</p> : null}
          </article>
        )) : <p className="pdf-empty">No tastings available yet.</p>}
      </section>
    </div>
  );
}

function buildPdfSingleTastingReport(user, tasting) {
  const reportDate = new Date().toLocaleDateString();
  const wineName = tasting?.wineName?.trim() || 'Untitled Tasting';

  return (
    <div className="pdf-report">
      <header className="pdf-report-header">
        <div>
          <h1>Cellar Notes — Tasting Detail</h1>
          <p>Generated for {user?.name || 'Cellar Notes'} on {reportDate}</p>
        </div>
        <div className="pdf-report-summary">
          <div><strong>Wine:</strong> {wineName}</div>
          <div><strong>Rating:</strong> {Number(tasting?.rating || 0)}/5</div>
        </div>
      </header>

      <section className="pdf-report-section">
        <article className="pdf-tasting-card">
          <h3>{wineName}</h3>
          <div className="pdf-meta-grid">
            <div><strong>Date:</strong> {formatDate(tasting?.date || tasting?.createdAt)}</div>
            <div><strong>Vintage:</strong> {tasting?.vintage?.trim() || '—'}</div>
            <div><strong>Region:</strong> {tasting?.region?.trim() || '—'}</div>
            <div><strong>Grape:</strong> {tasting?.grape?.trim() || '—'}</div>
            <div><strong>Food Pairing:</strong> {tasting?.foodPairing?.trim() || '—'}</div>
            <div><strong>Rating:</strong> {Number(tasting?.rating || 0)}/5</div>
          </div>
          {tasting?.aroma?.trim() ? <p><strong>Aroma:</strong> {tasting.aroma.trim()}</p> : null}
          {tasting?.palate?.trim() ? <p><strong>Palate:</strong> {tasting.palate.trim()}</p> : null}
          {tasting?.finish?.trim() ? <p><strong>Finish:</strong> {tasting.finish.trim()}</p> : null}
          {tasting?.notes?.trim() ? <p className="pdf-notes"><strong>Notes:</strong> {tasting.notes.trim()}</p> : null}
        </article>
      </section>
    </div>
  );
}

function ChartsPanel({ tastings }) {
  const regionCanvasRef = useRef(null);
  const grapeCanvasRef = useRef(null);
  const trendCanvasRef = useRef(null);
  const [trendRange, setTrendRange] = useState('all');

  const regionChartData = useMemo(() => {
    const regionMap = new Map();
    tastings.forEach((tasting) => {
      const region = tasting.region?.trim() || 'Unknown';
      const rating = Number(tasting.rating || 0);
      if (!regionMap.has(region)) regionMap.set(region, { sum: 0, count: 0 });
      const current = regionMap.get(region);
      current.sum += rating;
      current.count += 1;
    });

    return [...regionMap.entries()]
      .map(([label, data]) => ({ label, value: data.count ? Number((data.sum / data.count).toFixed(2)) : 0, count: data.count }))
      .sort((a, b) => b.count - a.count || b.value - a.value)
      .slice(0, 8);
  }, [tastings]);

  const grapeChartData = useMemo(() => {
    const grapeMap = new Map();
    tastings.forEach((tasting) => {
      const grape = tasting.grape?.trim() || 'Unknown';
      const rating = Number(tasting.rating || 0);
      if (!grapeMap.has(grape)) grapeMap.set(grape, { sum: 0, count: 0 });
      const current = grapeMap.get(grape);
      current.sum += rating;
      current.count += 1;
    });

    return [...grapeMap.entries()]
      .map(([label, data]) => ({ label, value: data.count ? Number((data.sum / data.count).toFixed(2)) : 0, count: data.count }))
      .sort((a, b) => b.count - a.count || b.value - a.value)
      .slice(0, 8);
  }, [tastings]);

  const trendChartData = useMemo(() => {
    const byDate = new Map();
    const sorted = [...tastings].sort((a, b) => new Date(a.date || a.createdAt || 0) - new Date(b.date || b.createdAt || 0));
    let filtered = sorted;

    if (trendRange !== 'all') {
      const now = new Date();
      const cutoff = new Date();
      if (trendRange === '90d') cutoff.setDate(now.getDate() - 90);
      if (trendRange === '30d') cutoff.setDate(now.getDate() - 30);
      if (trendRange === '12m') cutoff.setMonth(now.getMonth() - 12);
      filtered = sorted.filter((tasting) => new Date(tasting.date || tasting.createdAt || 0) >= cutoff);
    }

    filtered.forEach((tasting) => {
      const date = tasting.date || tasting.createdAt || '';
      const key = date ? new Date(date).toISOString().slice(0, 10) : 'Unknown';
      const rating = Number(tasting.rating || 0);
      if (!byDate.has(key)) byDate.set(key, { sum: 0, count: 0 });
      const current = byDate.get(key);
      current.sum += rating;
      current.count += 1;
    });

    return [...byDate.entries()]
      .sort((a, b) => a[0].localeCompare(b[0]))
      .map(([label, data]) => ({ label, value: data.count ? Number((data.sum / data.count).toFixed(2)) : 0 }));
  }, [tastings, trendRange]);

  useEffect(() => {
    if (regionCanvasRef.current && regionChartData.length > 0) {
      renderChart(regionCanvasRef.current, {
        type: 'bar',
        data: {
          labels: regionChartData.map((d) => d.label),
          datasets: [{ label: 'Avg Rating', data: regionChartData.map((d) => d.value) }]
        },
        options: {
          plugins: { legend: { display: true } },
          scales: { y: { suggestedMin: 0, suggestedMax: 5 } }
        }
      });
    }
  }, [regionChartData]);

  useEffect(() => {
    if (grapeCanvasRef.current && grapeChartData.length > 0) {
      renderChart(grapeCanvasRef.current, {
        type: 'bar',
        data: {
          labels: grapeChartData.map((d) => d.label),
          datasets: [{ label: 'Avg Rating', data: grapeChartData.map((d) => d.value) }]
        },
        options: {
          plugins: { legend: { display: true } },
          scales: { y: { suggestedMin: 0, suggestedMax: 5 } }
        }
      });
    }
  }, [grapeChartData]);

  useEffect(() => {
    if (trendCanvasRef.current && trendChartData.length > 0) {
      renderChart(trendCanvasRef.current, {
        type: 'line',
        data: {
          labels: trendChartData.map((d) => d.label),
          datasets: [{ label: 'Avg Rating', data: trendChartData.map((d) => d.value), tension: 0.3, fill: false }]
        },
        options: {
          plugins: { legend: { display: true } },
          scales: { y: { suggestedMin: 0, suggestedMax: 5 } }
        }
      });
    }
  }, [trendChartData]);

  return (
    <section className="charts-panel">
      <div className="charts-header">
        <div>
          <h2>Tasting Insights</h2>
          <p>See how your ratings vary by region, grape variety, and over time.</p>
        </div>
        <div className="charts-controls">
          <label className="chart-control">
            <span>Trend Range</span>
            <select value={trendRange} onChange={(e) => setTrendRange(e.target.value)}>
              <option value="all">All time</option>
              <option value="30d">Last 30 days</option>
              <option value="90d">Last 90 days</option>
              <option value="12m">Last 12 months</option>
            </select>
          </label>
        </div>
      </div>

      <div className="charts-grid">
        <article className="chart-card">
          <div className="chart-card-header">
            <h3>Ratings by Region</h3>
            <span>Average rating</span>
          </div>
          {regionChartData.length > 0 ? <canvas ref={regionCanvasRef} /> : <p className="chart-empty">Add tastings to see region insights.</p>}
        </article>

        <article className="chart-card">
          <div className="chart-card-header">
            <h3>Ratings by Grape Variety</h3>
            <span>Average rating</span>
          </div>
          {grapeChartData.length > 0 ? <canvas ref={grapeCanvasRef} /> : <p className="chart-empty">Add tastings to see grape insights.</p>}
        </article>

        <article className="chart-card chart-card-wide">
          <div className="chart-card-header">
            <h3>Rating Trend Over Time</h3>
            <span>Average rating per date</span>
          </div>
          {trendChartData.length > 0 ? <canvas ref={trendCanvasRef} /> : <p className="chart-empty">Add tastings to see rating trends.</p>}
        </article>
      </div>
    </section>
  );
}

function App() {
  const { user, loading, login, logout } = useAuth();
  const { items: tastings = [], loading: tastingsLoading } = useCollection('tastings', { personal: true });
  const [activeTab, setActiveTab] = useState('browse');
  const [selectedTasting, setSelectedTasting] = useState(null);
  const [editingTasting, setEditingTasting] = useState(null);
  const [shareStatus, setShareStatus] = useState('');
  const [pdfExporting, setPdfExporting] = useState(false);
  const pdfExportRef = useRef(null);

  const handleViewDetail = (tasting) => {
    setSelectedTasting(tasting);
    setActiveTab('detail');
  };

  const handleBack = () => {
    setSelectedTasting(null);
    setActiveTab('browse');
  };

  const handleEdit = (tasting) => {
    setEditingTasting(tasting);
    setActiveTab('log');
  };

  const handleSaved = () => {
    setEditingTasting(null);
    setActiveTab('browse');
  };

  const handleShare = async (tasting) => {
    const shareText = buildSharePayload(tasting, user?.name || 'Cellar Notes');
    const shareUrl = `${window.location.origin}${window.location.pathname}?tasting=${encodeURIComponent(tasting?._id || tasting?.id || tasting?.wineName || '')}`;
    const payload = `${shareText}\n\nView link: ${shareUrl}`;

    try {
      if (navigator.share) {
        await navigator.share({
          title: tasting?.wineName ? `Cellar Notes — ${tasting.wineName}` : 'Cellar Notes Tasting',
          text: payload,
          url: shareUrl
        });
        setShareStatus('Shared successfully.');
        return;
      }

      if (navigator.clipboard?.writeText) {
        await navigator.clipboard.writeText(payload);
        setShareStatus('Share text copied to clipboard.');
        return;
      }

      const textarea = document.createElement('textarea');
      textarea.value = payload;
      textarea.setAttribute('readonly', 'true');
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      setShareStatus('Share text copied to clipboard.');
    } catch {
      setShareStatus('Unable to share right now.');
    }

    window.clearTimeout(handleShare._t);
    handleShare._t = window.setTimeout(() => setShareStatus(''), 2500);
  };

  const handleExportPDF = async ({ scope = 'journal' } = {}) => {
    if (!pdfExportRef.current) return;
    setPdfExporting(true);
    try {
      const filename = scope === 'detail' && selectedTasting
        ? `${(selectedTasting.wineName || 'tasting').replace(/[^a-z0-9-_]+/gi, '_').toLowerCase()}_detail.pdf`
        : 'cellar-notes-journal.pdf';

      await generatePDF(pdfExportRef.current, {
        filename,
        margin: 10
      });
      setShareStatus('PDF exported successfully.');
    } catch {
      setShareStatus('Unable to export PDF right now.');
    } finally {
      setPdfExporting(false);
      window.clearTimeout(handleExportPDF._t);
      handleExportPDF._t = window.setTimeout(() => setShareStatus(''), 2500);
    }
  };

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

  if (!user) {
    return (
      <div className="auth-gate">
        <div className="auth-gate-card">
          <div className="auth-gate-icon">🍷</div>
          <h1>Cellar Notes</h1>
          <p>Sign in with Google to securely access your personal wine journal.</p>
          <button className="btn-primary auth-gate-btn" onClick={login}>Continue with Google</button>
        </div>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="header-content">
          <span className="header-icon">🍷</span>
          <h1 className="header-title">Cellar Notes</h1>
          <p className="header-subtitle">Your personal wine journal</p>
          <div className="header-userbar">
            <span className="header-user">Welcome, {user.name}</span>
            <button className="header-logout" onClick={logout}>Sign Out</button>
          </div>
        </div>
      </header>

      {activeTab !== 'detail' && (
        <nav className="tab-nav">
          <button className={`tab-btn ${activeTab === 'browse' ? 'active' : ''}`} onClick={() => { setActiveTab('browse'); setEditingTasting(null); }}>
            <span className="tab-icon">📖</span> Journal
          </button>
          <button className={`tab-btn ${activeTab === 'log' ? 'active' : ''}`} onClick={() => setActiveTab('log')}>
            <span className="tab-icon">✏️</span> Log Tasting
          </button>
          <button className={`tab-btn ${activeTab === 'insights' ? 'active' : ''}`} onClick={() => setActiveTab('insights')}>
            <span className="tab-icon">📊</span> Insights
          </button>
        </nav>
      )}

      <main className="main-content">
        {shareStatus ? <div className="share-toast" role="status">{shareStatus}</div> : null}

        <div ref={pdfExportRef} className="pdf-export-shell">
          {activeTab === 'browse' && (
            <div>
              <div className="journal-actions">
                <button className="btn-secondary" onClick={() => handleExportPDF({ scope: 'journal' })} disabled={pdfExporting}>
                  {pdfExporting ? 'Exporting PDF...' : 'Export Journal PDF'}
                </button>
              </div>
              <TastingList onView={handleViewDetail} onEdit={handleEdit} onShare={handleShare} />
            </div>
          )}

          {activeTab === 'log' && <TastingForm editing={editingTasting} onSaved={handleSaved} onCancel={() => { setEditingTasting(null); setActiveTab('browse'); }} />}

          {activeTab === 'detail' && selectedTasting && (
            <div>
              <div className="journal-actions">
                <button className="btn-secondary" onClick={() => handleExportPDF({ scope: 'detail' })} disabled={pdfExporting}>
                  {pdfExporting ? 'Exporting PDF...' : 'Export Current Tasting PDF'}
                </button>
              </div>
              <TastingDetail tasting={selectedTasting} onBack={handleBack} onEdit={handleEdit} onShare={handleShare} />
            </div>
          )}

          {activeTab === 'insights' && <ChartsPanel tastings={tastings} loading={tastingsLoading} />}
        </div>
      </main>
    </div>
  );
}

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