"use client"

import { CheckCircle2, FileCode2 } from "lucide-react"

import { cn } from "@/lib/utils"

type XmlSelectedFileProgressListProps = {
  files: File[]
  percents: number[] | null
}

function CircularPercent({
  value,
  complete,
}: {
  value: number
  complete: boolean
}) {
  const size = 36
  const stroke = 3
  const radius = (size - stroke) / 2
  const circumference = 2 * Math.PI * radius
  const offset = circumference - (Math.min(100, Math.max(0, value)) / 100) * circumference

  return (
    <div
      className="relative shrink-0"
      style={{ width: size, height: size }}
      aria-label={`${value}%`}
    >
      <svg width={size} height={size} className="-rotate-90" viewBox={`0 0 ${size} ${size}`}>
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          className="stroke-muted"
          strokeWidth={stroke}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          className={complete ? "stroke-green-600" : "stroke-primary"}
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={offset}
        />
      </svg>
      <span
        className={cn(
          "absolute inset-0 flex items-center justify-center text-[10px] font-medium tabular-nums leading-none",
          complete ? "text-green-700 dark:text-green-400" : "text-foreground"
        )}
      >
        {value}
      </span>
    </div>
  )
}

export function XmlSelectedFileProgressList({
  files,
  percents,
}: XmlSelectedFileProgressListProps) {
  if (!files.length) return null

  return (
    <ul className="max-w-md space-y-1.5">
      {files.map((file, index) => {
        const percent = percents?.[index]
        const isComplete = percent === 100
        const isProcessing = percent != null

        return (
          <li
            key={`${file.name}-${index}`}
            className={cn(
              "flex items-center gap-2 rounded-md border px-2 py-1.5",
              isComplete
                ? "border-green-600 bg-green-50 dark:bg-green-950/30"
                : "border-border bg-muted/20"
            )}
          >
            {isComplete ? (
              <CheckCircle2 className="size-3.5 shrink-0 text-green-600" />
            ) : (
              <FileCode2 className="size-3.5 shrink-0 text-muted-foreground" />
            )}
            <span
              className={cn(
                "min-w-0 flex-1 truncate text-xs",
                isComplete
                  ? "text-green-700 dark:text-green-400"
                  : "text-foreground"
              )}
            >
              {file.name}
            </span>
            {isProcessing ? (
              <CircularPercent value={percent} complete={isComplete} />
            ) : null}
          </li>
        )
      })}
    </ul>
  )
}

export function percentsForFiles(files: File[], overallPercent: number): number[] {
  const sizes = files.map((file) => Math.max(file.size, 1))
  const total = sizes.reduce((sum, size) => sum + size, 0)
  let remaining = (Math.min(100, Math.max(0, overallPercent)) / 100) * total

  return sizes.map((size) => {
    const loaded = Math.min(remaining, size)
    remaining = Math.max(0, remaining - size)
    return Math.min(100, Math.round((loaded / size) * 100))
  })
}