import { useEffect, useMemo, useRef, useState } from 'react';
import { useAuth, useCollection, renderChart, generatePDF, exportCSV, exportJSON } from '@deplixo/sdk';
import { JournalEntry } from './components/JournalEntry.jsx';
import { CalendarView } from './components/CalendarView.jsx';
import { EntryList } from './components/EntryList.jsx';
import { EntryDetail } from './components/EntryDetail.jsx';

const MOOD_VALUES = {
  awful: 1,
  bad: 2,
  okay: 3,
  good: 4,
  great: 5
};

const MOOD_LABELS = {
  awful: 'Awful',
  bad: 'Bad',
  okay: 'Okay',
  good: 'Good',
  great: 'Great'
};

const MOOD_COLORS = {
  awful: '#BCAAA4',
  bad: '#D7CCC8',
  okay: '#FFF176',
  good: '#FFEE58',
  great: '#FDD835'
};

const ENTRY_COLLECTION = 'journal_entries';

function getEntryDate(entry) {
  return new Date(entry?.date || entry?.createdAt || entry?.updatedAt || Date.now());
}

function getWordCount(entry) {
  const content = String(entry?.content || '');
  const plainText = content
    .replace(/<[^>]*>/g, ' ')
    .replace(/&nbsp;/g, ' ')
    .replace(/\s+/g, ' ')
    .trim();

  if (!plainText) return 0;
  return plainText.split(' ').filter(Boolean).length;
}

function formatShortDate(date) {
  return new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' }).format(date);
}

function formatLongDate(date) {
  return new Intl.DateTimeFormat('en', {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
}

function formatMonthKey(date) {
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
}

function formatMonthLabel(date) {
  return new Intl.DateTimeFormat('en', { month: 'long', year: 'numeric' }).format(date);
}

function getMoodColor(mood) {
  return MOOD_COLORS[mood] || MOOD_COLORS.okay;
}

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

function MoodTrendChart({ entries }) {
  const canvasRef = useRef(null);

  const chartData = useMemo(() => {
    const now = new Date();
    const start = new Date(now);
    start.setDate(now.getDate() - 29);
    start.setHours(0, 0, 0, 0);

    const days = [];
    for (let i = 0; i < 30; i += 1) {
      const d = new Date(start);
      d.setDate(start.getDate() + i);
      days.push(d);
    }

    const entriesByDay = new Map();
    entries.forEach((entry) => {
      const d = getEntryDate(entry);
      const key = d.toISOString().slice(0, 10);
      if (!entriesByDay.has(key)) entriesByDay.set(key, []);
      entriesByDay.get(key).push(entry);
    });

    const values = days.map((day) => {
      const key = day.toISOString().slice(0, 10);
      const dayEntries = entriesByDay.get(key) || [];
      if (!dayEntries.length) return null;
      const sum = dayEntries.reduce((acc, entry) => acc + (MOOD_VALUES[entry.mood] || 0), 0);
      return sum / dayEntries.length;
    });

    return {
      labels: days.map(formatShortDate),
      values
    };
  }, [entries]);

  useEffect(() => {
    if (canvasRef.current && chartData.labels.length > 0) {
      renderChart(canvasRef.current, {
        type: 'line',
        data: {
          labels: chartData.labels,
          datasets: [
            {
              label: 'Mood trend',
              data: chartData.values,
              borderColor: '#F9A825',
              backgroundColor: 'rgba(249, 168, 37, 0.16)',
              pointBackgroundColor: '#F9A825',
              pointBorderColor: '#F9A825',
              pointRadius: 3,
              tension: 0.35,
              fill: true
            }
          ]
        }
      });
    }
  }, [chartData]);

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

function WordCountChart({ entries }) {
  const canvasRef = useRef(null);

  const sortedEntries = useMemo(() => {
    return [...entries]
      .sort((a, b) => getEntryDate(a).getTime() - getEntryDate(b).getTime())
      .slice(-10)
      .map((entry) => ({
        label: entry.title?.trim() || formatShortDate(getEntryDate(entry)),
        value: getWordCount(entry)
      }));
  }, [entries]);

  useEffect(() => {
    if (canvasRef.current && sortedEntries.length > 0) {
      renderChart(canvasRef.current, {
        type: 'bar',
        data: {
          labels: sortedEntries.map((d) => d.label),
          datasets: [
            {
              label: 'Word count',
              data: sortedEntries.map((d) => d.value),
              backgroundColor: '#FDD835',
              borderColor: '#F9A825',
              borderWidth: 1,
              borderRadius: 8
            }
          ]
        }
      });
    }
  }, [sortedEntries]);

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

function MonthlyExportPanel({ entries }) {
  const reportRef = useRef(null);
  const [selectedMonth, setSelectedMonth] = useState(formatMonthKey(new Date()));
  const [exporting, setExporting] = useState(false);

  const monthOptions = useMemo(() => {
    const keys = new Set();
    const current = new Date();
    for (let i = 0; i < 12; i += 1) {
      const d = new Date(current.getFullYear(), current.getMonth() - i, 1);
      keys.add(formatMonthKey(d));
    }
    entries.forEach((entry) => keys.add(formatMonthKey(getEntryDate(entry))));
    return [...keys].sort((a, b) => b.localeCompare(a));
  }, [entries]);

  const selectedMonthDate = useMemo(() => {
    const [year, month] = selectedMonth.split('-').map(Number);
    return new Date(year, month - 1, 1);
  }, [selectedMonth]);

  const monthEntries = useMemo(() => {
    return entries
      .filter((entry) => formatMonthKey(getEntryDate(entry)) === selectedMonth)
      .sort((a, b) => getEntryDate(a).getTime() - getEntryDate(b).getTime());
  }, [entries, selectedMonth]);

  const handleExportPDF = async () => {
    if (!reportRef.current || !monthEntries.length) return;
    setExporting(true);
    try {
      await generatePDF(reportRef.current, {
        filename: `journal-${selectedMonth}.pdf`,
        margin: 10
      });
    } finally {
      setExporting(false);
    }
  };

  return (
    <div className="month-export-card">
      <div className="month-export-controls">
        <div>
          <h3 className="month-export-title">Monthly PDF export</h3>
          <p className="month-export-subtitle">Choose a month and download a printable PDF of your journal entries.</p>
        </div>
        <div className="month-export-actions">
          <select
            className="month-select"
            value={selectedMonth}
            onChange={(e) => setSelectedMonth(e.target.value)}
            aria-label="Select month for PDF export"
          >
            {monthOptions.map((monthKey) => (
              <option key={monthKey} value={monthKey}>
                {formatMonthLabel(new Date(`${monthKey}-01T00:00:00`))}
              </option>
            ))}
          </select>
          <button className="btn-primary export-btn" onClick={handleExportPDF} disabled={!monthEntries.length || exporting}>
            {exporting ? 'Generating PDF…' : 'Export PDF'}
          </button>
        </div>
      </div>

      <div ref={reportRef} className="monthly-pdf-report" aria-hidden="false">
        <div className="pdf-report-header">
          <h2>My Journal — {formatMonthLabel(selectedMonthDate)}</h2>
          <p>{monthEntries.length} entry{monthEntries.length === 1 ? '' : 'ies'} included</p>
        </div>

        {monthEntries.length ? (
          <div className="pdf-entry-list">
            {monthEntries.map((entry) => {
              const entryDate = getEntryDate(entry);
              return (
                <article key={entry.id || `${entryDate.toISOString()}-${entry.title || 'entry'}`} className="pdf-entry-card">
                  <div className="pdf-entry-top">
                    <div className="pdf-entry-mood" style={{ backgroundColor: getMoodColor(entry.mood) }}>
                      <span>{MOOD_LABELS[entry.mood] || 'Okay'}</span>
                    </div>
                    <div>
                      <h3 className="pdf-entry-title">{entry.title?.trim() || 'Untitled entry'}</h3>
                      <p className="pdf-entry-date">{formatLongDate(entryDate)}</p>
                    </div>
                  </div>
                  <div
                    className="pdf-entry-content"
                    dangerouslySetInnerHTML={{ __html: entry.content || '<p></p>' }}
                  />
                </article>
              );
            })}
          </div>
        ) : (
          <div className="pdf-empty-state">
            <p>No entries found for this month.</p>
          </div>
        )}
      </div>
    </div>
  );
}

function DataExportPanel({ entries }) {
  const [exportingFormat, setExportingFormat] = useState('');

  const exportRows = useMemo(() => {
    return [...entries]
      .sort((a, b) => getEntryDate(a).getTime() - getEntryDate(b).getTime())
      .map((entry) => {
        const entryDate = getEntryDate(entry);
        return {
          id: entry.id || '',
          title: entry.title?.trim() || 'Untitled entry',
          mood: entry.mood || 'okay',
          moodLabel: MOOD_LABELS[entry.mood] || 'Okay',
          moodValue: MOOD_VALUES[entry.mood] || 3,
          date: entry.date || entryDate.toISOString(),
          createdAt: entry.createdAt || '',
          updatedAt: entry.updatedAt || '',
          wordCount: getWordCount(entry),
          content: String(entry.content || '').replace(/<[^>]*>/g, ' ').replace(/&nbsp;/g, ' ').replace(/\s+/g, ' ').trim()
        };
      });
  }, [entries]);

  const handleCSVExport = () => {
    if (!exportRows.length) return;
    setExportingFormat('csv');
    try {
      exportCSV(exportRows, {
        filename: 'journal-entries.csv',
        columns: ['id', 'title', 'mood', 'moodLabel', 'moodValue', 'date', 'createdAt', 'updatedAt', 'wordCount', 'content']
      });
    } finally {
      setExportingFormat('');
    }
  };

  const handleJSONExport = () => {
    if (!exportRows.length) return;
    setExportingFormat('json');
    try {
      exportJSON(exportRows, { filename: 'journal-entries.json' });
    } finally {
      setExportingFormat('');
    }
  };

  return (
    <section className="data-export-card">
      <div className="data-export-header">
        <div>
          <h3 className="data-export-title">Download your journal data</h3>
          <p className="data-export-subtitle">Export all entries with mood, timestamps, titles, and text content.</p>
        </div>
        <div className="data-export-actions">
          <button className="btn-secondary data-export-btn" onClick={handleCSVExport} disabled={!exportRows.length || exportingFormat !== ''}>
            {exportingFormat === 'csv' ? 'Preparing CSV…' : 'Export CSV'}
          </button>
          <button className="btn-primary data-export-btn" onClick={handleJSONExport} disabled={!exportRows.length || exportingFormat !== ''}>
            {exportingFormat === 'json' ? 'Preparing JSON…' : 'Export JSON'}
          </button>
        </div>
      </div>
      <p className="data-export-count">{exportRows.length} entr{exportRows.length === 1 ? 'y' : 'ies'} ready for export.</p>
    </section>
  );
}

function App() {
  const { user, loading, logout } = useAuth();
  const { items: entries = [], loading: entriesLoading } = useCollection(ENTRY_COLLECTION, { personal: true });
  const [activeTab, setActiveTab] = useState('journal');
  const [viewingEntry, setViewingEntry] = useState(null);
  const [editingEntry, setEditingEntry] = useState(null);
  const [selectedDate, setSelectedDate] = useState(null);

  const tabs = [
    { id: 'journal', label: '✍️ Write', icon: '✍️' },
    { id: 'calendar', label: '📅 Calendar', icon: '📅' },
    { id: 'entries', label: '📖 Entries', icon: '📖' },
    { id: 'insights', label: '📈 Insights', icon: '📈' }
  ];

  const metrics = useMemo(() => {
    const last30Days = new Date();
    last30Days.setDate(last30Days.getDate() - 29);
    last30Days.setHours(0, 0, 0, 0);

    const recentEntries = entries.filter((entry) => getEntryDate(entry) >= last30Days);
    const moodTrend = recentEntries.reduce((acc, entry) => acc + (MOOD_VALUES[entry.mood] || 0), 0);
    const averageMood = recentEntries.length ? moodTrend / recentEntries.length : 0;
    const totalWords = entries.reduce((acc, entry) => acc + getWordCount(entry), 0);
    const averageWords = entries.length ? Math.round(totalWords / entries.length) : 0;

    return {
      entriesCount: entries.length,
      recentEntriesCount: recentEntries.length,
      averageMood,
      totalWords,
      averageWords
    };
  }, [entries]);

  const handleViewEntry = (entry) => {
    setViewingEntry(entry);
    setActiveTab('detail');
  };

  const handleEditEntry = (entry) => {
    setEditingEntry(entry);
    setActiveTab('journal');
  };

  const handleBackFromDetail = () => {
    setViewingEntry(null);
    setActiveTab('entries');
  };

  const handleEntrySaved = () => {
    setEditingEntry(null);
    setActiveTab('entries');
  };

  const handleDateSelect = (date) => {
    setSelectedDate(date);
    setActiveTab('entries');
  };

  const handleTabClick = (tabId) => {
    setActiveTab(tabId);
    if (tabId !== 'entries') setSelectedDate(null);
    if (tabId !== 'detail') setViewingEntry(null);
    if (tabId !== 'journal') setEditingEntry(null);
  };

  if (loading) {
    return (
      <div className="app-container auth-screen">
        <header className="app-header">
          <h1 className="app-title">🌻 My Journal</h1>
          <p className="app-subtitle">Reflect, track, grow</p>
        </header>
        <main className="app-main auth-main">
          <div className="auth-card">
            <div className="auth-spinner" aria-hidden="true" />
            <p className="auth-text">Signing in...</p>
          </div>
        </main>
      </div>
    );
  }

  if (!user) {
    return (
      <div className="app-container auth-screen">
        <header className="app-header">
          <h1 className="app-title">🌻 My Journal</h1>
          <p className="app-subtitle">Private reflection space</p>
        </header>
        <main className="app-main auth-main">
          <div className="auth-card">
            <h2 className="auth-title">Sign in to continue</h2>
            <p className="auth-text">
              Use Google OAuth to access your private journal entries, calendar, and moods.
            </p>
            <p className="auth-hint">
              You&apos;ll be redirected to Deplixo to complete sign-in.
            </p>
          </div>
        </main>
      </div>
    );
  }

  return (
    <div className="app-container">
      <header className="app-header">
        <div className="app-header-row">
          <div>
            <h1 className="app-title">🌻 My Journal</h1>
            <p className="app-subtitle">Reflect, track, grow</p>
          </div>
          <div className="user-menu">
            {user.avatar ? <img className="user-avatar" src={user.avatar} alt={user.name} /> : <div className="user-avatar fallback">{user.name?.charAt(0) || 'U'}</div>}
            <div className="user-meta">
              <span className="user-name">{user.name}</span>
              <button className="logout-btn" onClick={logout}>Sign Out</button>
            </div>
          </div>
        </div>
      </header>
      <main className="app-main">
        {activeTab === 'journal' && <JournalEntry editingEntry={editingEntry} onSaved={handleEntrySaved} onCancel={() => { setEditingEntry(null); setActiveTab('entries'); }} />}
        {activeTab === 'calendar' && <CalendarView onDateSelect={handleDateSelect} onViewEntry={handleViewEntry} />}
        {activeTab === 'entries' && <EntryList onViewEntry={handleViewEntry} onEditEntry={handleEditEntry} selectedDate={selectedDate} onClearDate={() => setSelectedDate(null)} />}
        {activeTab === 'insights' && (
          <div className="insights-container">
            <div className="insights-metrics">
              <div className="metric-card"><span className="metric-value">{metrics.entriesCount}</span><span className="metric-label">Total entries</span></div>
              <div className="metric-card"><span className="metric-value">{metrics.recentEntriesCount}</span><span className="metric-label">Last 30 days</span></div>
              <div className="metric-card"><span className="metric-value">{metrics.averageMood ? metrics.averageMood.toFixed(1) : '—'}</span><span className="metric-label">Avg mood</span></div>
              <div className="metric-card"><span className="metric-value">{metrics.averageWords}</span><span className="metric-label">Avg words</span></div>
            </div>
            <ChartPanel title="Mood trend" subtitle="Average mood over the last 30 days">
              {entriesLoading ? <div className="skeleton-block skeleton-calendar" /> : <MoodTrendChart entries={entries} />}
            </ChartPanel>
            <ChartPanel title="Word count per entry" subtitle="Most recent entries with word counts">
              {entriesLoading ? <div className="skeleton-block skeleton-calendar" /> : <WordCountChart entries={entries} />}
            </ChartPanel>
            <ChartPanel title="Monthly PDF export" subtitle="Create a printable PDF of journal entries for a chosen month.">
              {entriesLoading ? <div className="skeleton-block skeleton-calendar" /> : <MonthlyExportPanel entries={entries} />}
            </ChartPanel>
            <ChartPanel title="Data export" subtitle="Download all journal entries as CSV or JSON, including mood and timestamps.">
              {entriesLoading ? <div className="skeleton-block skeleton-calendar" /> : <DataExportPanel entries={entries} />}
            </ChartPanel>
          </div>
        )}
        {activeTab === 'detail' && viewingEntry && <EntryDetail entry={viewingEntry} onBack={handleBackFromDetail} onEdit={handleEditEntry} />}
      </main>
      <nav className="tab-bar">
        {tabs.map(tab => (
          <button key={tab.id} className={`tab-btn ${activeTab === tab.id ? 'active' : ''}`} onClick={() => handleTabClick(tab.id)}>
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label.split(' ')[1]}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}

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