"use client";

import {
  PieChart, Pie, Cell, Legend, Tooltip,
  BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer,
} from "recharts";
import styles from "../../(dashboard)/modules/commonstyle/dattabale.module.css";

const CERT_COLORS = { Active: "#16a34a", "Expiring soon": "#d97706", Expired: "#dc2626" };
const AUDIT_COLORS = { Scheduled: "#d97706", "In progress": "#2563eb", Completed: "#16a34a" };

interface ChartDatum {
  name: string;
  value: number;
}

interface Props {
  certChartData: ChartDatum[];
  auditChartData: ChartDatum[];
}

// Split into its own component and loaded via next/dynamic with ssr:false in
// the parent page. recharts' ResponsiveContainer measures the browser DOM to
// size itself - during Next's server-render pass there is no DOM, the
// container is 0x0, and recharts can throw on that calculation. Keeping this
// component client-only avoids that crash entirely.
export default function DashboardCharts({ certChartData, auditChartData }: Props) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 20 }}>
      <div className={styles.tableWrapper} style={{ padding: 20 }}>
        <h3 style={{ margin: "0 0 12px", fontSize: 14, fontWeight: 700, color: "#1e293b" }}>
          Certificates by status
        </h3>
        {certChartData.length === 0 ? (
          <p style={{ fontSize: 13, color: "#94a3b8" }}>No certificates yet</p>
        ) : (
          <ResponsiveContainer width="100%" height={220}>
            <PieChart>
              <Pie data={certChartData} dataKey="value" nameKey="name" innerRadius={50} outerRadius={80} paddingAngle={2}>
                {certChartData.map((entry, i) => (
                  <Cell key={i} fill={CERT_COLORS[entry.name as keyof typeof CERT_COLORS]} />
                ))}
              </Pie>
              <Tooltip />
              <Legend wrapperStyle={{ fontSize: 12 }} />
            </PieChart>
          </ResponsiveContainer>
        )}
      </div>

      <div className={styles.tableWrapper} style={{ padding: 20 }}>
        <h3 style={{ margin: "0 0 12px", fontSize: 14, fontWeight: 700, color: "#1e293b" }}>
          Audits by status
        </h3>
        {auditChartData.every((d) => d.value === 0) ? (
          <p style={{ fontSize: 13, color: "#94a3b8" }}>No audits yet</p>
        ) : (
          <ResponsiveContainer width="100%" height={220}>
            <BarChart data={auditChartData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
              <XAxis dataKey="name" tick={{ fontSize: 11 }} />
              <YAxis allowDecimals={false} tick={{ fontSize: 11 }} />
              <Tooltip />
              <Bar dataKey="value" radius={[6, 6, 0, 0]}>
                {auditChartData.map((entry, i) => (
                  <Cell key={i} fill={AUDIT_COLORS[entry.name as keyof typeof AUDIT_COLORS]} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        )}
      </div>
    </div>
  );
}