/**
 * Shared Email Marketing dashboard widgets — a KPI stat tile and a
 * delivery-health segmented bar. Used by both the Overview tab and the
 * Campaign detail (Statistics) drawer so the two stay visually consistent.
 */
import { type ReactElement } from "react";
import { ArrowDown, ArrowUp } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "./card";

export interface EmailOverviewStat {
  label: string;
  value: string;
  hint?: string;
  /** Change vs last month, magnitude only (e.g. "12%", "0.3pp"). */
  delta?: string;
  trend?: "up" | "down";
  /** Whether the change is favourable — drives green (good) vs red (bad). */
  positive?: boolean;
}

export interface EmailDeliverySegment {
  label: string;
  count: number;
  /** Tailwind bg-* token for the segment bar + legend swatch. */
  colorClass: string;
}

/** Single KPI tile: label + value + optional trend delta and context hint. */
export function EmailStatTile({
  stat,
}: {
  stat: EmailOverviewStat;
}): ReactElement {
  return (
    <Card className="gap-0 border-border py-0">
      <CardContent className="flex flex-col gap-1 p-4">
        <span className="text-overline text-muted-foreground">
          {stat.label}
        </span>
        <span className="text-h3 text-foreground">{stat.value}</span>
        {(stat.delta || stat.hint) ? <div className="flex min-w-0 items-center gap-1.5">
            {stat.delta ? <span
                className={`flex shrink-0 items-center gap-0.5 text-caption ${
                  stat.positive ? "text-success-text" : "text-destructive"
                }`}
              >
                {stat.trend === "down" ? (
                  <ArrowDown className="size-3" />
                ) : (
                  <ArrowUp className="size-3" />
                )}
                {stat.delta}
              </span> : null}
            {stat.hint ? <span className="truncate text-caption text-muted-foreground">
                {stat.hint}
              </span> : null}
          </div> : null}
      </CardContent>
    </Card>
  );
}

/** Delivery-health breakdown: a segmented bar + a legend with counts and %. */
export function EmailDeliveryHealth({
  segments,
}: {
  segments: EmailDeliverySegment[];
}): ReactElement {
  const total = segments.reduce((sum, s) => sum + s.count, 0) || 1;

  return (
    <Card className="gap-2 border-border py-4 sm:py-6">
      <CardHeader className="px-3 sm:px-6">
        <CardTitle className="text-overline text-muted-foreground">
          Delivery health
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-col gap-4 px-3 sm:px-6">
        <div className="flex h-2.5 w-full overflow-hidden">
          {segments.map((s) => (
            <div
              className={`h-full ${s.colorClass}`}
              key={s.label}
              style={{ width: `${(s.count / total) * 100}%` }}
            />
          ))}
        </div>

        <div className="flex flex-col gap-2">
          {segments.map((s) => (
            <div
              className="flex items-center justify-between gap-2"
              key={s.label}
            >
              <div className="flex min-w-0 items-center gap-2">
                <span
                  className={`size-2.5 shrink-0 rounded-full ${s.colorClass}`}
                />
                <span className="truncate text-body-small text-muted-foreground">
                  {s.label}
                </span>
              </div>
              <div className="flex shrink-0 items-center gap-2">
                <span className="text-body-small font-medium tabular-nums text-foreground">
                  {s.count.toLocaleString()}
                </span>
                <span className="w-11 text-right text-caption tabular-nums text-muted-foreground">
                  {((s.count / total) * 100).toFixed(1)}%
                </span>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}