/* Dashboard View */
(function () {
  const { useState } = React;
  const { eventMetrics, formatDate, STATUS_LABELS } = window.AppStore;
  const { StatusTag } = window.Common;

  function Dashboard({ state, onSelectConcert }) {
    const now = new Date();
    const y = now.getFullYear();
    const m = now.getMonth();

    // Aggregate totals
    let totalPrinted = 0, totalCommitted = 0, totalRemaining = 0;
    const warnConcerts = [];

    state.events.forEach((ev) => {
      const metrics = eventMetrics(state, ev.id);
      if (!metrics) return;
      totalPrinted += metrics.totalPrinted;
      totalCommitted += metrics.totalCommitted;
      totalRemaining += metrics.totalRemaining;
      if (metrics.totalRemaining < 0) {
        warnConcerts.push({ concert: ev, metrics });
      }
    });

    // This month events
    const monthStart = new Date(y, m, 1);
    const monthEnd = new Date(y, m + 1, 1);
    const thisMonthEvents = state.concerts
      .filter((c) => {
        if (c.status === 'cancelled') return false;
        const d = new Date(c.date);
        return d >= monthStart && d < monthEnd;
      })
      .sort((a, b) => a.date.localeCompare(b.date))
      .slice(0, 10);

    // Recent concerts
    const d60ago = new Date(now); d60ago.setDate(d60ago.getDate() - 60);
    const d180ahead = new Date(now); d180ahead.setDate(d180ahead.getDate() + 180);
    const recentConcerts = state.events
      .filter((ev) => {
        const d = new Date(ev.date);
        return d >= d60ago && d <= d180ahead;
      })
      .sort((a, b) => a.date.localeCompare(b.date));

    function getConcertTitle(eventId) {
      const ev = state.events.find((e) => e.id === eventId);
      return ev ? ev.title : '(不明)';
    }

    function getFlyerName(eventId, flyerId) {
      const ev = state.events.find((e) => e.id === eventId);
      if (!ev) return '';
      const f = ev.flyers.find((f) => f.id === flyerId);
      return f ? f.name : '';
    }

    return (
      <div>
        <div className="page-header">
          <h1 className="page-title">ダッシュボード</h1>
        </div>

        {/* Stats */}
        <div className="stats-grid">
          <div className="stat-card">
            <div className="stat-label">登録イベント</div>
            <div className="stat-value">{state.events.length}</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">総印刷部数</div>
            <div className="stat-value">{totalPrinted.toLocaleString()}</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">確定消費</div>
            <div className="stat-value">{totalCommitted.toLocaleString()}</div>
          </div>
          <div className="stat-card">
            <div className="stat-label">残部数</div>
            <div className={'stat-value' + (totalRemaining < 0 ? ' danger' : '')}>{totalRemaining.toLocaleString()}</div>
          </div>
        </div>

        {/* Warnings */}
        {warnConcerts.length > 0 && (
          <div className="alerts-section">
            <div className="alerts-title">⚠ チラシ不足警告</div>
            {warnConcerts.map(({ concert, metrics }) => (
              <div key={concert.id} className="alert-item">
                「{concert.title}」残部数: {metrics.totalRemaining}（{metrics.totalCommitted}部消費済み）
              </div>
            ))}
          </div>
        )}

        {/* Body grid */}
        <div className="dashboard-grid">
          {/* This month */}
          <div className="card">
            <div className="dashboard-section-title">今月のコンサート</div>
            {thisMonthEvents.length === 0 ? (
              <div style={{ color: 'var(--muted)', fontSize: 13 }}>今月の予定はありません</div>
            ) : (
              thisMonthEvents.map((c) => (
                <div key={c.id} className="event-row">
                  <div className="event-row-date">{formatDate(c.date)}</div>
                  <div style={{ flex: 1 }}>
                    <div className="event-row-name">{c.eventName}</div>
                    <div className="event-row-venue">{c.venue} | {getFlyerName(c.eventId, c.flyerId)} {c.quantity}部</div>
                  </div>
                  <StatusTag status={c.status} />
                </div>
              ))
            )}
          </div>

          {/* Recent concerts */}
          <div className="card">
            <div className="dashboard-section-title">近日のイベント</div>
            {recentConcerts.length === 0 ? (
              <div style={{ color: 'var(--muted)', fontSize: 13 }}>近日の公演はありません</div>
            ) : (
              recentConcerts.map((c) => {
                const m = eventMetrics(state, c.id);
                return (
                  <div key={c.id} className="event-row" style={{ cursor: 'pointer' }} onClick={() => onSelectConcert && onSelectConcert(c.id)}>
                    <div className="event-row-date">{formatDate(c.date)}</div>
                    <div style={{ flex: 1 }}>
                      <div className="event-row-name">{c.title}</div>
                      <div className="event-row-venue">{c.venue}</div>
                    </div>
                    {m && (
                      <div style={{ fontSize: 12, color: m.totalRemaining < 0 ? 'var(--danger)' : 'var(--muted)', fontWeight: 600 }}>
                        残{m.totalRemaining}
                      </div>
                    )}
                  </div>
                );
              })
            )}
          </div>
        </div>
      </div>
    );
  }

  window.Dashboard = { Dashboard };
})();