"use client";

import {
  formatOwnerRupiah,
  type OwnerCategorySegment,
} from "@/lib/dashboard/owner-dashboard";
import { motion } from "motion/react";
import { OwnerSectionHeader } from "./owner-section-header";

type OwnerCategoryDonutProps = {
  title: string;
  segments: OwnerCategorySegment[];
  valueType: "amount" | "qty";
};

function buildConicGradient(segments: OwnerCategorySegment[]) {
  const total = segments.reduce((sum, segment) => sum + segment.value, 0);

  if (total <= 0 || segments.length === 0) {
    return "conic-gradient(#e8e8e8 0deg 360deg)";
  }

  let currentDeg = 0;

  const stops = segments.map((segment) => {
    const sweep = (segment.value / total) * 360;
    const start = currentDeg;
    const end = currentDeg + sweep;
    currentDeg = end;

    return `${segment.color} ${start}deg ${end}deg`;
  });

  return `conic-gradient(from -90deg, ${stops.join(", ")})`;
}

function formatLegendValue(value: number, valueType: "amount" | "qty") {
  if (valueType === "amount") {
    return formatOwnerRupiah(value);
  }

  return new Intl.NumberFormat("id-ID").format(value);
}

export function OwnerCategoryDonut({
  title,
  segments,
  valueType,
}: OwnerCategoryDonutProps) {
  const gradient = buildConicGradient(segments);

  return (
    <motion.section
      initial={{ opacity: 0, y: 14 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
      className="overflow-hidden rounded-[10px] border border-neutral-40 bg-neutral-10"
    >
      <OwnerSectionHeader title={title} />

      <div className="flex flex-col items-center gap-6 p-5 pt-6">
        {segments.length === 0 ? (
          <p className="text-m-regular w-full rounded-lg border border-dashed border-neutral-40 bg-neutral-20 px-5 py-8 text-center text-neutral-80">
            Belum ada data kategori untuk filter ini.
          </p>
        ) : (
          <>
            <div className="relative size-[168px]">
              <motion.div
                initial={{ scale: 0.86, opacity: 0 }}
                animate={{ scale: 1, opacity: 1 }}
                transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
                className="absolute inset-0 rounded-full"
                style={{ background: gradient }}
                aria-hidden
              />
              <div className="absolute inset-[30px] rounded-full bg-neutral-10" />
            </div>

            <div className="grid w-full grid-cols-2 gap-x-5 gap-y-4">
              {segments.map((segment, index) => (
                <motion.div
                  key={segment.label}
                  initial={{ opacity: 0, y: 6 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{
                    duration: 0.35,
                    delay: 0.15 + index * 0.05,
                    ease: [0.16, 1, 0.3, 1],
                  }}
                  className="flex min-w-0 items-center gap-2"
                >
                  <span
                    className="h-8 w-1 shrink-0 rounded-full"
                    style={{ backgroundColor: segment.color }}
                    aria-hidden
                  />
                  <div className="flex min-w-0 flex-1 items-center justify-between gap-2">
                    <p className="text-m-medium truncate text-neutral-100">
                      {segment.label}
                    </p>
                    <p className="text-s-regular shrink-0 tabular-nums text-neutral-80">
                      {formatLegendValue(segment.value, valueType)}
                    </p>
                  </div>
                </motion.div>
              ))}
            </div>
          </>
        )}
      </div>
    </motion.section>
  );
}