"use client";
import React, { useState } from "react";

interface ReportDef {
  title: string;
  sub: string;
  head: string[];
  rows: Record<string, string[][]>;
}

const REPORT_DEFS: Record<string, ReportDef> = {
  policies: {
    title: "Policies by Month",
    sub: "Policies you submitted",
    head: ["Month", "Submitted", "Approved"],
    rows: {
      sep: [["September 2026", "2", "1"]],
      aug: [["August 2026", "1", "1"]],
      jul: [["July 2026", "1", "1"]],
    },
  },
  commission: {
    title: "Commission by Month",
    sub: "Earned vs paid",
    head: ["Month", "Earned", "Paid"],
    rows: {
      sep: [["September 2026", "₹3,675", "₹0"]],
      aug: [["August 2026", "₹3,600", "₹3,600"]],
      jul: [["July 2026", "₹2,700", "₹2,700"]],
    },
  },
  product: {
    title: "Product-wise Breakdown",
    sub: "Your business split by product",
    head: ["Product", "Policies", "Premium"],
    rows: {
      sep: [["Motor", "1", "₹24,500"]],
      aug: [["Health", "1", "₹18,000"]],
      jul: [["Life", "1", "₹15,000"]],
    },
  },
  conversion: {
    title: "Lead Conversion",
    sub: "Your enquiry-to-policy conversion",
    head: ["Month", "Leads", "Converted", "Rate"],
    rows: {
      sep: [["September 2026", "2", "0", "0%"]],
      aug: [["August 2026", "3", "1", "33%"]],
      jul: [["July 2026", "1", "1", "100%"]],
    },
  },
};

const MONTH_LABELS: Record<string, string> = {
  sep: "September 2026",
  aug: "August 2026",
  jul: "July 2026",
};

export default function ReportsPage() {
  const [activeReport, setActiveReport] = useState<string | null>(null);
  const [month, setMonth] = useState<string>("sep");
  const def = activeReport ? REPORT_DEFS[activeReport] : null;
  const rows = def ? def.rows[month] || [] : [];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Reports</h1>
          <p>Your own performance, filtered by month.</p>
        </div>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
          gap: 14,
          marginBottom: 16,
        }}
      >
        <div className="card">
          <h3>Policies by Month</h3>
          <div className="sub">Policies you&apos;ve submitted, by month.</div>
          <button
            className="btn btn-secondary btn-sm"
            onClick={() => setActiveReport("policies")}
          >
            View
          </button>
        </div>
        <div className="card">
          <h3>Commission by Month</h3>
          <div className="sub">Earned vs paid, by month.</div>
          <button
            className="btn btn-secondary btn-sm"
            onClick={() => setActiveReport("commission")}
          >
            View
          </button>
        </div>
        <div className="card">
          <h3>Product-wise Breakdown</h3>
          <div className="sub">Your business split by product.</div>
          <button
            className="btn btn-secondary btn-sm"
            onClick={() => setActiveReport("product")}
          >
            View
          </button>
        </div>
        <div className="card">
          <h3>Lead Conversion</h3>
          <div className="sub">Your enquiry-to-policy conversion rate.</div>
          <button
            className="btn btn-secondary btn-sm"
            onClick={() => setActiveReport("conversion")}
          >
            View
          </button>
        </div>
      </div>
      {def && (
        <div className="card">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-start",
            }}
          >
            <div>
              <h3>{def.title}</h3>
              <div className="sub">
                {def.sub} — {MONTH_LABELS[month]}
              </div>
            </div>
            <div className="field" style={{ margin: 0, minWidth: 160 }}>
              <select
                value={month}
                onChange={(e) => setMonth(e.target.value)}
              >
                <option value="sep">September 2026</option>
                <option value="aug">August 2026</option>
                <option value="jul">July 2026</option>
              </select>
            </div>
          </div>
          <div
            className="table-wrap"
            style={{ boxShadow: "none", marginTop: 12 }}
          >
            <table>
              <tbody>
                <tr>
                  {def.head.map((h) => (
                    <th key={h}>{h}</th>
                  ))}
                </tr>
                {rows.map((r, i) => (
                  <tr key={i}>
                    {r.map((c, j) => (
                      <td key={j}>{c}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}