"use client";

import {
  PieChart,
  Pie,
  Cell,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { CHART_COLORS, chartTheme } from "@/config/chart-theme";
import type { ChoiceBreakdown } from "@/types/analytics";

interface ChoiceBarsChartProps {
  choices: ChoiceBreakdown[];
  selectionLabel?: string;
}

export function ChoiceBarsChart({
  choices,
  selectionLabel = "answers",
}: ChoiceBarsChartProps) {
  const withResponses = choices.filter((c) => c.count > 0);
  const maxPercent = Math.max(...choices.map((c) => c.percent), 1);

  if (choices.length === 0 || withResponses.length === 0) {
    return (
      <p className="py-8 text-center text-sm text-muted">No responses yet.</p>
    );
  }

  return (
    <div className="grid gap-6 lg:grid-cols-[1.5fr_1fr] lg:items-center">
      <div className="space-y-3">
        {choices.map((choice) => (
          <div key={choice.label}>
            <div className="mb-1 flex items-baseline justify-between gap-3 text-[13px]">
              <span className="font-semibold text-navy">{choice.label}</span>
              <span className="shrink-0 font-mono text-xs font-bold text-muted">
                {choice.count} · {choice.percent}%
              </span>
            </div>
            <div className="h-2.5 overflow-hidden rounded-full bg-[#F1F5F9]">
              <div
                className="h-full rounded-full bg-gradient-to-r from-primary to-accent transition-all"
                style={{ width: `${(choice.percent / maxPercent) * 100}%` }}
              />
            </div>
          </div>
        ))}
      </div>

      <div>
        <div className="h-[200px] w-full">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie
                data={withResponses}
                dataKey="count"
                nameKey="label"
                cx="50%"
                cy="50%"
                innerRadius={52}
                outerRadius={78}
                paddingAngle={3}
              >
                {withResponses.map((entry, i) => (
                  <Cell
                    key={entry.label}
                    fill={CHART_COLORS.pie[i % CHART_COLORS.pie.length]}
                  />
                ))}
              </Pie>
              <Tooltip
                {...chartTheme.tooltip}
                formatter={(value, name) => [
                  `${value} ${selectionLabel}`,
                  String(name),
                ]}
              />
            </PieChart>
          </ResponsiveContainer>
        </div>
        <ul className="mt-1 space-y-1.5">
          {withResponses.map((c, i) => (
            <li
              key={c.label}
              className="flex items-center gap-2 text-[12px] text-navy"
            >
              <span
                className="h-2.5 w-2.5 shrink-0 rounded-full"
                style={{
                  backgroundColor: CHART_COLORS.pie[i % CHART_COLORS.pie.length],
                }}
              />
              <span className="min-w-0 flex-1 truncate font-medium">{c.label}</span>
              <span className="shrink-0 font-mono text-[11px] text-muted">
                {c.percent}%
              </span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}