"use client";
import CommonError from "@/app/components/CommonError";
import { useDashboard } from "./_hooks";

function money(v?: string) {
  const n = parseFloat(v ?? "0");
  return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

export default function DashboardContent() {
  const { data, trend, loading, error } = useDashboard();

  if (loading) {
    return (
      <div className="d-flex justify-content-center py-9">
        <div className="spinner-border text-primary" role="status" />
      </div>
    );
  }

  return (
    <>
      <CommonError message={error} type="error" />
      {data && (
        <>
          <div className="row g-3 mb-4">
            <KpiCard label="Gross Sales" value={money(data.gross_sales)} icon="fa-sack-dollar" tone="primary" />
            <KpiCard label="Net Profit" value={`${money(data.net_profit)} (${data.net_margin_pct}%)`} icon="fa-chart-line" tone="success" />
            <KpiCard label="Transactions" value={String(data.transaction_count)} icon="fa-receipt" tone="info" />
            <KpiCard label="Avg. Sale Value" value={money(data.average_transaction_value)} icon="fa-calculator" tone="warning" />
            <KpiCard label="Low Stock Alerts" value={String(data.low_stock_alert_count)} icon="fa-triangle-exclamation" tone="danger" />
          </div>

          <div className="row g-3 mb-4">
            <div className="col-12 col-xl-6">
              <div className="card h-100">
                <div className="card-header"><h5 className="mb-0">Sales Trend (last 30 days)</h5></div>
                <div className="card-body">
                  {trend.length === 0 ? (
                    <p className="text-body-tertiary mb-0">No sales in this period yet.</p>
                  ) : (
                    <MiniBarChart points={trend} />
                  )}
                </div>
              </div>
            </div>
            <div className="col-12 col-xl-6">
              <div className="card h-100">
                <div className="card-header"><h5 className="mb-0">Sales By Branch</h5></div>
                <div className="card-body p-0">
                  <table className="table table-sm mb-0">
                    <thead><tr><th>Branch</th><th className="text-end">Transactions</th><th className="text-end">Total</th></tr></thead>
                    <tbody>
                      {data.sales_by_branch.map((b, i) => (
                        <tr key={i}>
                          <td>{b.branch__name}</td>
                          <td className="text-end">{b.count}</td>
                          <td className="text-end">{money(b.total)}</td>
                        </tr>
                      ))}
                      {data.sales_by_branch.length === 0 && (
                        <tr><td colSpan={3} className="text-center text-body-tertiary">No data yet.</td></tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div className="row g-3 mb-4">
            <div className="col-12 col-xl-6">
              <ProductRankTable title="Best-Selling Products" rows={data.top_products} />
            </div>
            <div className="col-12 col-xl-6">
              <ProductRankTable title="Worst-Selling Products" rows={data.worst_products} />
            </div>
          </div>

          <div className="card">
            <div className="card-header"><h5 className="mb-0">Cashier Performance</h5></div>
            <div className="card-body p-0">
              <table className="table table-sm mb-0">
                <thead><tr><th>Cashier</th><th className="text-end">Transactions</th><th className="text-end">Total Sold</th></tr></thead>
                <tbody>
                  {data.cashier_performance.map((c) => (
                    <tr key={c.cashier_id}>
                      <td>{c.cashier__first_name} {c.cashier__last_name}</td>
                      <td className="text-end">{c.count}</td>
                      <td className="text-end">{money(c.total)}</td>
                    </tr>
                  ))}
                  {data.cashier_performance.length === 0 && (
                    <tr><td colSpan={3} className="text-center text-body-tertiary">No data yet.</td></tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}
    </>
  );
}

function KpiCard({ label, value, icon, tone }: { label: string; value: string; icon: string; tone: string }) {
  return (
    <div className="col-6 col-lg">
      <div className="card h-100">
        <div className="card-body">
          <div className={`icon-item icon-item-sm bg-${tone}-subtle text-${tone} mb-2`}>
            <span className={`fa-solid ${icon}`} />
          </div>
          <h4 className="mb-0 fs-6">{value}</h4>
          <p className="text-body-tertiary mb-0 small">{label}</p>
        </div>
      </div>
    </div>
  );
}

function ProductRankTable({ title, rows }: { title: string; rows: { product__name: string; qty_sold: string; revenue: string }[] }) {
  return (
    <div className="card h-100">
      <div className="card-header"><h5 className="mb-0">{title}</h5></div>
      <div className="card-body p-0">
        <table className="table table-sm mb-0">
          <thead><tr><th>Product</th><th className="text-end">Qty</th><th className="text-end">Revenue</th></tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td>{r.product__name}</td>
                <td className="text-end">{r.qty_sold}</td>
                <td className="text-end">{money(r.revenue)}</td>
              </tr>
            ))}
            {rows.length === 0 && <tr><td colSpan={3} className="text-center text-body-tertiary">No data yet.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/** Zero-dependency bar chart (no charting lib in package.json) — good enough for a trend glance. */
function MiniBarChart({ points }: { points: { bucket: string; total: string }[] }) {
  const max = Math.max(...points.map((p) => parseFloat(p.total)), 1);
  return (
    <div className="d-flex align-items-end gap-1" style={{ height: 160 }}>
      {points.map((p, i) => {
        const h = Math.max((parseFloat(p.total) / max) * 100, 2);
        return (
          <div
            key={i}
            className="bg-primary rounded-top flex-fill"
            style={{ height: `${h}%` }}
            title={`${new Date(p.bucket).toLocaleDateString()}: ${p.total}`}
          />
        );
      })}
    </div>
  );
}