"use client";

import type { ReactNode } from "react";
import { GripVertical, X } from "lucide-react";
import type { DraggableAttributes, DraggableSyntheticListeners } from "@dnd-kit/core";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useT } from "@/i18n";
import { cn } from "@/lib/cn";
import { LiveBadge, TONE_CLASSES } from "./shared";
import type { WidgetMeta } from "./types";

/**
 * Shared card chrome for every dashboard widget: title, tone chip, optional
 * live badge and, during edit mode, a drag handle + remove button.
 */
export function WidgetShell({
  meta,
  editMode,
  onRemove,
  dragHandleAttributes,
  dragHandleListeners,
  children,
}: {
  meta: WidgetMeta;
  editMode: boolean;
  onRemove?: () => void;
  dragHandleAttributes?: DraggableAttributes | undefined;
  dragHandleListeners?: DraggableSyntheticListeners | undefined;
  children: ReactNode;
}) {
  const t = useT();
  const Icon = meta.icon;

  return (
    <Card className="h-full shadow-[0_1px_2px_rgba(27,18,85,0.04)] transition-[box-shadow,transform] duration-200 hover:shadow-[0_8px_24px_rgba(27,18,85,0.08)]">
      <CardHeader className="flex-row items-start justify-between space-y-0 gap-2 pb-3">
        <div className="flex min-w-0 items-start gap-3">
          <span
            className={cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-lg", TONE_CLASSES[meta.tone])}
            aria-hidden
          >
            <Icon className="h-[18px] w-[18px]" strokeWidth={2.1} />
          </span>
          <div className="min-w-0">
            <CardTitle className="text-sm">{t(meta.titleKey)}</CardTitle>
            {meta.hintKey ? (
              <p className="mt-0.5 text-xs text-muted-foreground">{t(meta.hintKey)}</p>
            ) : null}
          </div>
        </div>
        <div className="flex shrink-0 items-center gap-1">
          {meta.live ? <LiveBadge label={t("widgets.live")} /> : null}
          {editMode ? (
            <>
              <button
                type="button"
                aria-label={t("widgets.drag")}
                title={t("widgets.drag")}
                {...(dragHandleAttributes ?? {})}
                {...(dragHandleListeners ?? {})}
                className="cursor-grab rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground active:cursor-grabbing"
              >
                <GripVertical className="h-4 w-4" aria-hidden />
              </button>
              <button
                type="button"
                aria-label={t("widgets.remove")}
                title={t("widgets.remove")}
                onClick={onRemove}
                className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
              >
                <X className="h-4 w-4" aria-hidden />
              </button>
            </>
          ) : null}
        </div>
      </CardHeader>
      <CardContent>{children}</CardContent>
    </Card>
  );
}