"use client";

import * as React from "react";
import type { LucideIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

import { formatDriftAmount } from "./format-drift";

export function DriftSection({
  title,
  description,
  icon: Icon,
  children,
  className,
}: {
  title: string;
  description?: string;
  icon?: LucideIcon;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <section
      className={cn(
        "overflow-hidden rounded-2xl border border-border/70 bg-card shadow-[0_1px_2px_rgba(0,0,0,0.04)]",
        className,
      )}
    >
      <div className="border-border/60 border-b px-5 py-4">
        <h3 className="flex items-center gap-2 font-medium text-sm tracking-tight">
          {Icon ? <Icon className="size-4 shrink-0 text-emerald-600 dark:text-emerald-400" /> : null}
          {title}
        </h3>
        {description ? <p className="mt-1 text-muted-foreground text-xs leading-relaxed">{description}</p> : null}
      </div>
      {children}
    </section>
  );
}

export function DriftKpiCard({
  label,
  value,
  icon: Icon,
  hint,
}: {
  label: string;
  value: string;
  icon: LucideIcon;
  hint?: string;
}) {
  return (
    <Card className="relative h-full gap-0 overflow-hidden border-border/70 bg-card py-0 shadow-[0_1px_2px_rgba(0,0,0,0.04)] transition-shadow hover:shadow-md">
      <CardContent className="flex h-full items-start justify-between gap-3 p-4 sm:p-5">
        <div className="min-w-0">
          <p className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.14em]">{label}</p>
          <p className="mt-2 truncate font-semibold text-xl tabular-nums tracking-tight leading-none sm:text-[1.35rem]">
            {value}
          </p>
          {hint ? <p className="mt-2 text-muted-foreground text-xs">{hint}</p> : null}
        </div>
        <div className="flex size-10 shrink-0 items-center justify-center rounded-2xl border border-border/60 bg-muted/40 text-muted-foreground">
          <Icon className="size-4" />
        </div>
      </CardContent>
    </Card>
  );
}

export function DriftStatusBadge({ drift }: { drift: number }) {
  if (Math.abs(drift) < 0.5) {
    return (
      <Badge variant="outline" className="border-emerald-200 bg-emerald-50 font-medium text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400">
        On target
      </Badge>
    );
  }
  if (drift > 0) {
    return (
      <Badge variant="outline" className="border-amber-200 bg-amber-50 font-medium text-amber-700 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-400">
        Over target
      </Badge>
    );
  }
  return (
    <Badge variant="outline" className="border-sky-200 bg-sky-50 font-medium text-sky-700 dark:border-sky-800 dark:bg-sky-950/40 dark:text-sky-400">
      Under target
    </Badge>
  );
}

export function AllocationCompareBar({
  idealPct,
  actualPct,
  color,
  className,
}: {
  idealPct: number;
  actualPct: number;
  color: string;
  className?: string;
}) {
  const idealWidth = Math.min(Math.max(idealPct, 0), 100);
  const actualWidth = Math.min(Math.max(actualPct, 0), 100);

  return (
    <div className={cn("space-y-1", className)}>
      <div className="relative h-2 w-full max-w-[140px] rounded-full bg-muted/70">
        <div
          className="absolute inset-y-0 left-0 rounded-full opacity-35"
          style={{ width: `${idealWidth}%`, background: color }}
        />
        <div
          className="absolute inset-y-0 left-0 rounded-full"
          style={{ width: `${actualWidth}%`, background: color }}
        />
      </div>
      <div className="flex gap-3 text-[10px] text-muted-foreground tabular-nums">
        <span>Ideal {idealWidth.toFixed(1)}%</span>
        <span>Actual {actualWidth.toFixed(1)}%</span>
      </div>
    </div>
  );
}

export function ReallocationAction({
  action,
  amount,
  reportingCode,
}: {
  action: "add" | "reduce" | "ok";
  amount: number;
  reportingCode: string;
}) {
  if (action === "ok") {
    return <span className="text-muted-foreground text-sm">On target</span>;
  }

  const isAdd = action === "add";
  const display = formatDriftAmount(Math.abs(amount), reportingCode);

  return (
    <Badge
      variant="outline"
      className={cn(
        "font-semibold tabular-nums",
        isAdd
          ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-400"
          : "border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400",
      )}
    >
      {isAdd ? `Add ${display}` : `Reduce ${display}`}
    </Badge>
  );
}