// Dashboard — stats, toolbar, filters, order list, empty state

const { useState, useMemo } = React;

function StatCard({ icon, value, label, accent, accentBg }) {
  return (
    <div className="stat-card" style={{ '--accent': accent, '--accent-bg': accentBg }}>
      <div className="stat-icon">{icon}</div>
      <div className="stat-text">
        <span className="stat-value">{value}</span>
        <span className="stat-label">{label}</span>
      </div>
    </div>
  );
}

function OrderCard({ order, index, onOpen, onQR }) {
  const badge = window.STATUS_BADGE[order.status];
  return (
    <div className="order-card" onClick={() => onOpen(order.id)}>
      <div className="order-avatar">{String(index + 1).padStart(3, '0')}</div>
      <div className="order-info">
        <div className="order-name">{order.customerName}</div>
        <div className="order-meta">
          <span>{order.email}</span>
          <span className="dot" />
          <span>{window.formatDate(order.createdAt)}</span>
          {order.photos > 0 && (
            <>
              <span className="dot" />
              <span>{order.photos} Fotos</span>
            </>
          )}
        </div>
      </div>
      <div className="order-status-col">
        <span className={`badge ${badge.cls}`}>{badge.label}</span>
      </div>
      <div className="order-actions" onClick={(e) => e.stopPropagation()}>
        <button className="btn btn-secondary btn-sm" onClick={() => onQR(order)} title="QR-Code anzeigen">
          <window.Icon.QR /> QR
        </button>
        <button className="btn btn-primary btn-sm" onClick={() => onOpen(order.id)}>
          Details <window.Icon.ArrowRight />
        </button>
      </div>
    </div>
  );
}

function EmptyState({ onCreate, filter }) {
  const messages = {
    all:  { h: 'Noch keine Aufträge', p: 'Erstellen Sie Ihren ersten Auftrag, um Hinterbliebenen einen sicheren Upload-Link zu senden.' },
    open: { h: 'Keine offenen Aufträge', p: 'Alle laufenden Aufträge sind abgeschlossen. Legen Sie einen neuen Auftrag an, wenn Sie bereit sind.' },
    done: { h: 'Noch keine fertigen Videos', p: 'Sobald ein Kunde seine Fotos hochgeladen hat, finden Sie die fertigen Erinnerungsvideos hier.' },
  };
  const m = messages[filter] || messages.all;
  return (
    <div className="empty-state">
      <div className="empty-illustration">
        <window.Icon.Inbox />
      </div>
      <h3>{m.h}</h3>
      <p>{m.p}</p>
      <button className="btn btn-primary" onClick={onCreate}>
        <window.Icon.Plus /> Neuer Auftrag
      </button>
    </div>
  );
}

function Dashboard({ orders, onOpenOrder, onNewOrder, onShowQR }) {
  const [filter, setFilter] = useState('all');
  const [query, setQuery] = useState('');

  const counts = useMemo(() => ({
    all:  orders.length,
    open: orders.filter(o => window.isOpen(o.status)).length,
    done: orders.filter(o => o.status === 'done').length,
  }), [orders]);

  const filtered = useMemo(() => {
    let list = orders;
    if (filter === 'open') list = list.filter(o => window.isOpen(o.status));
    if (filter === 'done') list = list.filter(o => o.status === 'done');
    if (query.trim()) {
      const q = query.toLowerCase();
      list = list.filter(o =>
        o.customerName.toLowerCase().includes(q) ||
        o.email.toLowerCase().includes(q) ||
        (o.deceased || '').toLowerCase().includes(q)
      );
    }
    return list;
  }, [orders, filter, query]);

  const gold = '#C9A86C', goldBg = '#F4E9D7';
  const green = '#4CAF50', greenBg = '#E8F5E9';
  const blue = '#3498db', blueBg = '#E8F4FD';

  return (
    <main className="portal-body" data-screen-label="01 Dashboard">
      <div className="page-heading">
        <div className="title-block">
          <h1>Auftragsübersicht</h1>
          <p>Alle aktiven und abgeschlossenen Erinnerungsaufträge auf einen Blick.</p>
        </div>
      </div>

      <div className="stats-row">
        <StatCard
          icon={<window.Icon.Folder />}
          value={counts.all}
          label="Aufträge gesamt"
          accent={gold} accentBg={goldBg}
        />
        <StatCard
          icon={<window.Icon.Clock />}
          value={counts.open}
          label="Aktiv in Bearbeitung"
          accent={blue} accentBg={blueBg}
        />
        <StatCard
          icon={<window.Icon.CheckCircle />}
          value={counts.done}
          label="Abgeschlossen"
          accent={green} accentBg={greenBg}
        />
      </div>

      <div className="toolbar">
        <div className="search-box">
          <window.Icon.Search />
          <input
            type="text"
            placeholder="Nach Name, E-Mail oder Verstorbener suchen..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        </div>
        <div className="filter-tabs" role="tablist">
          <button
            className={`filter-tab ${filter === 'all' ? 'active' : ''}`}
            onClick={() => setFilter('all')}
          >
            Alle <span className="count">{counts.all}</span>
          </button>
          <button
            className={`filter-tab ${filter === 'open' ? 'active' : ''}`}
            onClick={() => setFilter('open')}
          >
            Offen <span className="count">{counts.open}</span>
          </button>
          <button
            className={`filter-tab ${filter === 'done' ? 'active' : ''}`}
            onClick={() => setFilter('done')}
          >
            Abgeschlossen <span className="count">{counts.done}</span>
          </button>
        </div>
      </div>

      {filtered.length === 0 ? (
        <EmptyState onCreate={onNewOrder} filter={filter} />
      ) : (
        <div className="order-list">
          {filtered.map((o, i) => (
            <OrderCard key={o.id} order={o} index={i} onOpen={onOpenOrder} onQR={onShowQR} />
          ))}
        </div>
      )}
    </main>
  );
}

window.Dashboard = Dashboard;