import type { ReactNode } from 'react';
import { Card } from '@/components/ui/shared/Card';
import { ChartCardSkeleton } from '@/components/ui/today/TodaySkeleton';

interface ChartCardProps {
  title: string;
  subtitle?: string;
  /** Compact control in the title row (e.g. period select) — does not grow card height. */
  headerAction?: ReactNode;
  children: ReactNode;
  emptyMessage?: string;
  isEmpty?: boolean;
  loading?: boolean;
  /**
   * Three-column layout for chart + legend gadgets:
   * 1) title + legends, 2) centered chart panel, 3) header action (period select).
   * Column order is grid flow — RTL reverses naturally with `dir`.
   */
  sidePanelLayout?: boolean;
  chartPanel?: ReactNode;
}

function ChartCardTitleBlock({
  title,
  subtitle,
}: Pick<ChartCardProps, 'title' | 'subtitle'>) {
  return (
    <div className="mb-3 shrink-0">
      <h2 className="min-w-0 truncate text-base font-semibold text-card-foreground">
        {title}
      </h2>
      {subtitle ? <p className="mt-1 text-xs text-text-muted">{subtitle}</p> : null}
    </div>
  );
}

function ChartCardHeader({
  title,
  subtitle,
  headerAction,
}: Pick<ChartCardProps, 'title' | 'subtitle' | 'headerAction'>) {
  return (
    <div className="mb-3 shrink-0">
      <div className="flex items-center justify-between gap-2">
        <h2 className="min-w-0 truncate text-base font-semibold text-card-foreground">
          {title}
        </h2>
        {headerAction ? <div className="shrink-0">{headerAction}</div> : null}
      </div>
      {subtitle ? <p className="mt-1 text-xs text-text-muted">{subtitle}</p> : null}
    </div>
  );
}

export function ChartCard({
  title,
  subtitle,
  headerAction,
  children,
  emptyMessage,
  isEmpty = false,
  loading = false,
  sidePanelLayout = false,
  chartPanel,
}: ChartCardProps) {
  if (loading) {
    return <ChartCardSkeleton />;
  }

  if (sidePanelLayout) {
    return (
      <Card className="grid h-full min-h-0 grid-cols-[minmax(0,1.1fr)_minmax(0,1.4fr)_auto] gap-x-3 overflow-hidden">
        {/* Col 1 — title + legends (unchanged stacking) */}
        <div className="flex min-h-0 flex-col overflow-hidden">
          <ChartCardTitleBlock title={title} subtitle={subtitle} />
          {isEmpty ? (
            <div className="flex min-h-0 flex-1 items-center justify-center">
              <div className="flex w-full items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border/50 bg-background-secondary/20 py-8">
                <p className="px-4 text-center text-sm text-text-muted">{emptyMessage}</p>
              </div>
            </div>
          ) : (
            <div className="min-h-0 flex-1 overflow-hidden">{children}</div>
          )}
        </div>

        {/* Col 2 — pie / chart, centered */}
        {!isEmpty && chartPanel ? (
          <div className="flex min-h-0 items-center justify-center overflow-hidden py-1">
            <div className="aspect-square h-full max-h-full w-full max-w-full">
              {chartPanel}
            </div>
          </div>
        ) : (
          <div className="min-h-0" aria-hidden />
        )}

        {/* Col 3 — period select at top, aligned to the outer end like other gadgets */}
        <div className="flex shrink-0 flex-col items-end self-start pt-0.5">
          {headerAction}
        </div>
      </Card>
    );
  }

  return (
    <Card className="flex h-full min-h-0 flex-col overflow-hidden">
      <ChartCardHeader title={title} subtitle={subtitle} headerAction={headerAction} />

      {isEmpty ? (
        <div className="flex min-h-0 flex-1 items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border/50 bg-background-secondary/20">
          <p className="px-4 text-center text-sm text-text-muted">{emptyMessage}</p>
        </div>
      ) : (
        <div className="flex min-h-0 flex-1 flex-col">{children}</div>
      )}
    </Card>
  );
}
