'use client'

import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts'

interface ContentOverviewChartProps {
  published: number
  drafts: number
  scheduled: number
}

const COLORS = ['#22c55e', '#f59e0b', '#a855f7']

export function ContentOverviewChart({ published, drafts, scheduled }: ContentOverviewChartProps) {
  const total = published + drafts + scheduled
  const data = [
    { name: 'Published', value: published },
    { name: 'Drafts', value: drafts },
    { name: 'Scheduled', value: scheduled },
  ]

  if (total === 0) {
    return (
      <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
        No content yet
      </div>
    )
  }

  return (
    <div className="flex items-center gap-6">
      <div className="h-36 w-36 shrink-0">
        <ResponsiveContainer width="100%" height="100%">
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              innerRadius={38}
              outerRadius={65}
              dataKey="value"
              strokeWidth={2}
              stroke="#fff"
            >
              {data.map((_, idx) => (
                <Cell key={idx} fill={COLORS[idx]} />
              ))}
            </Pie>
          </PieChart>
        </ResponsiveContainer>
      </div>
      <div className="space-y-3">
        {data.map((entry, idx) => {
          const pct = total > 0 ? Math.round((entry.value / total) * 100) : 0
          return (
            <div key={entry.name} className="flex items-center gap-3">
              <span
                className="h-2.5 w-2.5 shrink-0 rounded-full"
                style={{ backgroundColor: COLORS[idx] }}
              />
              <div className="min-w-0">
                <span className="text-foreground text-sm">{entry.name}</span>
                <div className="flex items-baseline gap-2">
                  <span className="text-foreground text-lg font-medium">
                    {entry.value.toLocaleString()}
                  </span>
                  <span className="text-muted-foreground text-xs">{pct}%</span>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
