import { DashboardShell } from '../../components/dashboard-shell';
import { dashboardStats } from '../../lib/mock-data';

export default async function DashboardPage() {
  return (
    <DashboardShell currentPath="/dashboard" title="Dashboard Overview">
      <section className="dashboard-overview-layout">
        <div className="dashboard-overview-main">
          <section className="dashboard-stat-grid">
            {dashboardStats.map((item) => (
              <article key={item.label} className="surface-card dashboard-kpi-card">
                <div className="dashboard-kpi-top">
                  <span className="card-kicker">{item.label.toUpperCase()}</span>
                  <span className="dashboard-kpi-icon">
                    <span className="material-symbols-outlined">
                      {item.label === 'Total Messages'
                        ? 'chat_bubble'
                        : item.label === 'Delivered'
                          ? 'done_all'
                          : item.label === 'Read Rate'
                            ? 'visibility'
                            : 'error'}
                    </span>
                  </span>
                </div>
                <div className="dashboard-kpi-metric">
                  <h3>{item.value}</h3>
                  <span className={`dashboard-kpi-delta ${item.tone}`}>
                    <span className="material-symbols-outlined">
                      {item.tone === 'success' ? 'trending_up' : item.tone === 'warning' ? 'trending_down' : 'remove'}
                    </span>
                    {item.delta}
                  </span>
                </div>
                <p className="card-caption">
                  {item.label === 'Total Messages'
                    ? 'vs last 30 days'
                    : item.label === 'Delivered'
                      ? '1,180,800 messages'
                      : item.label === 'Read Rate'
                        ? '914,400 read'
                        : '19,200 errors'}
                </p>
              </article>
            ))}
          </section>

          <section className="surface-card dashboard-volume-card">
            <div className="card-head">
              <h3>Message Volume (Last 7 Days)</h3>
              <select className="dashboard-select">
                <option>Daily</option>
                <option>Hourly</option>
              </select>
            </div>
            <div className="dashboard-line-chart">
              <div className="dashboard-line-axis">
                {[
                  ['MON', '60%'],
                  ['TUE', '75%'],
                  ['WED', '65%'],
                  ['THU', '90%'],
                  ['FRI', '80%'],
                  ['SAT', '40%'],
                  ['SUN', '35%'],
                ].map(([label, height]) => (
                  <div key={label} className="dashboard-axis-column">
                    <div className="dashboard-axis-line" style={{ height }} />
                    <span>{label}</span>
                  </div>
                ))}
              </div>
              <svg className="dashboard-line-svg" preserveAspectRatio="none" viewBox="0 0 800 300">
                <defs>
                  <linearGradient id="chartGradient" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#25D366" stopOpacity="0.3" />
                    <stop offset="100%" stopColor="#25D366" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <path d="M0,180 Q100,120 200,80 T400,150 T600,60 T800,180 V300 H0 Z" fill="url(#chartGradient)" />
                <path d="M0,180 Q100,120 200,80 T400,150 T600,60 T800,180" fill="none" stroke="#25D366" strokeLinecap="round" strokeWidth="4" />
              </svg>
            </div>
          </section>

          <section className="surface-card dashboard-campaigns-card">
            <div className="dashboard-table-head">
              <h3>Recent Campaigns</h3>
              <button type="button" className="dashboard-link-button">View All</button>
            </div>
            <table className="dashboard-table">
              <thead>
                <tr>
                  <th>Campaign Name</th>
                  <th>Audience</th>
                  <th>Status</th>
                  <th>Delivery</th>
                  <th>Date</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Summer Flash Sale #4</td>
                  <td>45,200 users</td>
                  <td><span className="status-pill success">SENT</span></td>
                  <td>99.2%</td>
                  <td>Oct 24, 2023</td>
                </tr>
                <tr>
                  <td>Member Newsletter Oct</td>
                  <td>12,800 users</td>
                  <td><span className="status-pill info">SCHEDULED</span></td>
                  <td>--</td>
                  <td>Oct 28, 2023</td>
                </tr>
                <tr>
                  <td>Product Launch Beta</td>
                  <td>800 users</td>
                  <td><span className="status-pill neutral">DRAFT</span></td>
                  <td>--</td>
                  <td>Nov 02, 2023</td>
                </tr>
              </tbody>
            </table>
          </section>
        </div>

        <aside className="dashboard-overview-side">
          <article className="surface-card dashboard-funnel-card">
            <h3>Delivery Funnel</h3>
            <div className="dashboard-funnel-list">
              {[
                ['Sent', '1,200,000', '100%', '0'],
                ['Delivered', '1,180,800 (98.4%)', '98%', '16'],
                ['Read', '914,400 (76.2%)', '76%', '32'],
                ['Replied', '216,000 (18%)', '18%', '48'],
              ].map(([label, value, width, offset]) => (
                <div key={label} className="dashboard-funnel-row" style={{ marginLeft: `${offset}px` }}>
                  <div className="dashboard-funnel-meta">
                    <span>{label}</span>
                    <span>{value}</span>
                  </div>
                  <div className="dashboard-funnel-track">
                    <div className="dashboard-funnel-fill" style={{ width }} />
                  </div>
                </div>
              ))}
            </div>
          </article>

          <article className="dashboard-webhook-card">
            <div className="dashboard-webhook-head">
              <div className="dashboard-webhook-title">
                <span className="material-symbols-outlined">terminal</span>
                <h3>Webhook Health</h3>
              </div>
              <span className="dashboard-live-dot" />
            </div>
            <div className="dashboard-endpoint-box">
              <div className="dashboard-endpoint-meta">
                <span>ENDPOINT</span>
                <span>LIVE</span>
              </div>
              <code>https://api.acme.corp/v1/wh/whatsapp</code>
            </div>
            <div className="dashboard-webhook-stats">
              <div><span>Avg. Response Time</span><strong>142ms</strong></div>
              <div><span>Success Rate</span><strong>99.98%</strong></div>
              <div><span>Pending Payloads</span><strong>0</strong></div>
            </div>
            <button type="button" className="dashboard-outline-button">View Debug Logs</button>
          </article>

          <article className="surface-card dashboard-alerts-card">
            <h3>System Alerts</h3>
            <div className="dashboard-alert danger">
              <span className="material-symbols-outlined">warning</span>
              <div>
                <strong>Credit Low Alert</strong>
                <p>Balance is below $50.00. Top up soon to avoid interruption.</p>
              </div>
            </div>
            <div className="dashboard-alert info">
              <span className="material-symbols-outlined">info</span>
              <div>
                <strong>New Feature</strong>
                <p>Multi-device authentication is now available for all business accounts.</p>
              </div>
            </div>
          </article>
        </aside>
      </section>
    </DashboardShell>
  );
}
