"use client"

// Dependency-free, dark-themed admin charts (Tailwind divs + inline SVG).
// Mirrors the look of components/dashboard/revenue-chart.tsx — no recharts.

const PLAN_META: { key: string; label: string; color: string; text: string }[] = [
  { key: "starter", label: "Starter", color: "rgba(255,255,255,0.4)", text: "text-white/40" },
  { key: "pro", label: "Pro", color: "#6366f1", text: "text-indigo-400" }, // indigo
  { key: "landlord", label: "Landlord", color: "#8b5cf6", text: "text-violet-400" }, // violet
  { key: "lifetime", label: "Lifetime", color: "#f59e0b", text: "text-amber-400" }, // amber
]

export function PlanDonut({ data }: { data: Record<string, number> }) {
  const total = PLAN_META.reduce((sum, p) => sum + (data[p.key] ?? 0), 0)

  // Donut geometry
  const size = 160
  const stroke = 22
  const radius = (size - stroke) / 2
  const circumference = 2 * Math.PI * radius

  // Build cumulative arc segments
  let cumulative = 0
  const segments = PLAN_META.map((p) => {
    const value = data[p.key] ?? 0
    const fraction = total > 0 ? value / total : 0
    const dash = fraction * circumference
    const offset = cumulative * circumference
    cumulative += fraction
    return { ...p, value, fraction, dash, offset }
  })

  return (
    <div className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5 h-full">
      <div className="mb-5">
        <p className="text-xs font-medium uppercase tracking-wider text-white/40 mb-1">Plan Distribution</p>
        <p className="text-2xl font-bold text-white tabular-nums">{total.toLocaleString()}</p>
        <p className="text-xs text-white/40 mt-0.5">Total accounts</p>
      </div>

      <div className="flex flex-col sm:flex-row items-center gap-6">
        {/* Donut */}
        <div className="relative shrink-0" style={{ width: size, height: size }}>
          <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
            {/* Track */}
            <circle
              cx={size / 2}
              cy={size / 2}
              r={radius}
              fill="none"
              stroke="rgba(255,255,255,0.05)"
              strokeWidth={stroke}
            />
            {total > 0 &&
              segments.map(
                (s) =>
                  s.value > 0 && (
                    <circle
                      key={s.key}
                      cx={size / 2}
                      cy={size / 2}
                      r={radius}
                      fill="none"
                      stroke={s.color}
                      strokeWidth={stroke}
                      strokeDasharray={`${s.dash} ${circumference - s.dash}`}
                      strokeDashoffset={-s.offset}
                      strokeLinecap="butt"
                    />
                  )
              )}
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="text-2xl font-bold text-white tabular-nums leading-none">{total.toLocaleString()}</span>
            <span className="text-[10px] uppercase tracking-wider text-white/30 mt-1">accounts</span>
          </div>
        </div>

        {/* Legend */}
        <div className="flex-1 w-full space-y-2.5">
          {segments.map((s) => {
            const pct = total > 0 ? Math.round(s.fraction * 100) : 0
            return (
              <div key={s.key} className="flex items-center gap-3">
                <span className="h-2.5 w-2.5 shrink-0 rounded-sm" style={{ backgroundColor: s.color }} />
                <span className="flex-1 text-sm text-white/70">{s.label}</span>
                <span className="text-sm font-semibold text-white tabular-nums">{s.value.toLocaleString()}</span>
                <span className="w-10 text-right text-xs text-white/40 tabular-nums">{pct}%</span>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}

export function SignupsBars({ data }: { data: { month: string; label: string; count: number }[] }) {
  const max = Math.max(...data.map((d) => d.count), 1)
  const total = data.reduce((sum, d) => sum + d.count, 0)
  const currentMonthKey = new Date().toISOString().slice(0, 7)
  const last = data[data.length - 1]?.count ?? 0
  const prev = data[data.length - 2]?.count ?? 0
  const trendPct = prev > 0 ? Math.round(((last - prev) / prev) * 100) : null

  return (
    <div className="rounded-2xl border border-white/[0.06] bg-[#16161f] p-5 h-full">
      {/* Header */}
      <div className="flex items-start justify-between mb-6">
        <div>
          <p className="text-xs font-medium uppercase tracking-wider text-white/40 mb-1">New Signups</p>
          <p className="text-2xl font-bold text-white tabular-nums">{total.toLocaleString()}</p>
          <p className="text-xs text-white/40 mt-0.5">
            Last {data.length} months
            {trendPct !== null && (
              <span className={trendPct >= 0 ? "text-emerald-400 ml-1.5" : "text-red-400 ml-1.5"}>
                · {trendPct >= 0 ? "+" : ""}
                {trendPct}% vs prev
              </span>
            )}
          </p>
        </div>
        <div className="flex items-center gap-1.5 text-xs text-white/40">
          <div className="h-2 w-2 rounded-full bg-rose-500" />
          Signups
        </div>
      </div>

      {/* Bars */}
      <div className="flex items-end justify-between gap-2 h-28">
        {data.map((d) => {
          const isCurrent = d.month === currentMonthKey
          const heightPct = max > 0 ? (d.count / max) * 100 : 0
          const minHeight = d.count > 0 ? 8 : 4
          return (
            <div key={d.month} className="group flex flex-col items-center gap-1.5 flex-1">
              <span className="text-[10px] font-medium text-white/50 tabular-nums">{d.count}</span>
              <div className="relative w-full flex items-end" style={{ height: "100px" }}>
                <div
                  className={`w-full rounded-t-lg transition-all duration-500 ${
                    isCurrent
                      ? "bg-gradient-to-t from-rose-600 to-rose-400"
                      : d.count > 0
                      ? "bg-white/[0.12] group-hover:bg-white/[0.2]"
                      : "bg-white/[0.04]"
                  }`}
                  style={{ height: `${Math.max(heightPct, minHeight)}%` }}
                />
              </div>
              <span className={`text-[10px] font-medium ${isCurrent ? "text-rose-400" : "text-white/30"}`}>
                {d.label}
              </span>
            </div>
          )
        })}
      </div>
    </div>
  )
}
