"use client";

type Point = { label: string; value: number | null };

export function BarChart({
  title,
  points,
  max = 20,
}: {
  title: string;
  points: Point[];
  max?: number;
}) {
  return (
    <div className="rounded-2xl border border-[var(--border)] bg-white p-4">
      <h3 className="mb-3 text-sm font-bold">{title}</h3>
      {!points.length ? (
        <p className="text-xs text-[var(--muted)]">داده‌ای نیست.</p>
      ) : (
        <div className="space-y-2">
          {points.map((p) => {
            const pct = p.value == null ? 0 : Math.min(100, (p.value / max) * 100);
            return (
              <div key={p.label}>
                <div className="mb-1 flex justify-between text-xs">
                  <span>{p.label}</span>
                  <span className="text-[var(--muted)]">{p.value ?? "—"}</span>
                </div>
                <div className="h-2 overflow-hidden rounded-full bg-slate-100">
                  <div className="h-full rounded-full bg-primary" style={{ width: `${pct}%` }} />
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

export function LineChart({
  title,
  points,
}: {
  title: string;
  points: Point[];
}) {
  const values = points.map((p) => p.value ?? 0);
  const max = Math.max(20, ...values, 1);
  const w = 320;
  const h = 140;
  const pad = 16;
  const coords = points.map((p, i) => {
    const x = pad + (i * (w - pad * 2)) / Math.max(points.length - 1, 1);
    const y = h - pad - ((p.value ?? 0) / max) * (h - pad * 2);
    return `${x},${y}`;
  });

  return (
    <div className="rounded-2xl border border-[var(--border)] bg-white p-4">
      <h3 className="mb-3 text-sm font-bold">{title}</h3>
      {!points.length ? (
        <p className="text-xs text-[var(--muted)]">داده‌ای نیست.</p>
      ) : (
        <>
          <svg viewBox={`0 0 ${w} ${h}`} className="w-full">
            <polyline
              fill="none"
              stroke="var(--primary, #0f766e)"
              strokeWidth="2.5"
              points={coords.join(" ")}
            />
            {points.map((p, i) => {
              const [x, y] = coords[i].split(",").map(Number);
              return <circle key={p.label} cx={x} cy={y} r="3.5" fill="var(--primary, #0f766e)" />;
            })}
          </svg>
          <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-[var(--muted)]">
            {points.map((p) => (
              <span key={p.label}>{p.label}: {p.value ?? "—"}</span>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

export function RadarChart({
  title,
  points,
  max = 20,
}: {
  title: string;
  points: Point[];
  max?: number;
}) {
  const n = points.length;
  const size = 220;
  const cx = size / 2;
  const cy = size / 2;
  const r = 80;

  if (!n) {
    return (
      <div className="rounded-2xl border border-[var(--border)] bg-white p-4">
        <h3 className="mb-3 text-sm font-bold">{title}</h3>
        <p className="text-xs text-[var(--muted)]">داده‌ای نیست.</p>
      </div>
    );
  }

  const angle = (i: number) => (-Math.PI / 2) + (i * 2 * Math.PI) / n;
  const poly = points
    .map((p, i) => {
      const ratio = (p.value ?? 0) / max;
      const x = cx + Math.cos(angle(i)) * r * ratio;
      const y = cy + Math.sin(angle(i)) * r * ratio;
      return `${x},${y}`;
    })
    .join(" ");

  const axes = points.map((p, i) => {
    const x = cx + Math.cos(angle(i)) * r;
    const y = cy + Math.sin(angle(i)) * r;
    return { label: p.label, x, y };
  });

  return (
    <div className="rounded-2xl border border-[var(--border)] bg-white p-4">
      <h3 className="mb-3 text-sm font-bold">{title}</h3>
      <svg viewBox={`0 0 ${size} ${size}`} className="mx-auto block w-full max-w-[260px]">
        {[0.25, 0.5, 0.75, 1].map((scale) => (
          <circle key={scale} cx={cx} cy={cy} r={r * scale} fill="none" stroke="#e2e8f0" />
        ))}
        {axes.map((a) => (
          <line key={a.label} x1={cx} y1={cy} x2={a.x} y2={a.y} stroke="#e2e8f0" />
        ))}
        <polygon points={poly} fill="rgba(15,118,110,0.25)" stroke="#0f766e" strokeWidth="2" />
      </svg>
      <div className="mt-2 flex flex-wrap gap-2 text-[11px] text-[var(--muted)]">
        {points.map((p) => (
          <span key={p.label}>{p.label}: {p.value ?? "—"}</span>
        ))}
      </div>
    </div>
  );
}

export function HeatBars({
  title,
  rows,
}: {
  title: string;
  rows: Array<{ label: string; ratio: number; count: number; total: number }>;
}) {
  return (
    <div className="rounded-2xl border border-[var(--border)] bg-white p-4">
      <h3 className="mb-3 text-sm font-bold">{title}</h3>
      {!rows.length ? (
        <p className="text-xs text-[var(--muted)]">داده‌ای نیست.</p>
      ) : (
        <div className="space-y-2">
          {rows.map((row) => (
            <div key={row.label}>
              <div className="mb-1 flex justify-between text-xs">
                <span>{row.label}</span>
                <span className="text-[var(--muted)]">{row.count}/{row.total}</span>
              </div>
              <div className="h-2 overflow-hidden rounded-full bg-slate-100">
                <div
                  className="h-full rounded-full bg-amber-500"
                  style={{ width: `${Math.min(100, row.ratio * 100)}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}