'use client';

import { ReactNode } from 'react';
import { useTranslations } from 'next-intl';
import { motion } from 'framer-motion';

import { cn } from '@/lib/utils';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

interface ChartContainerProps {
  /** Chart title */
  title: string;
  /** Optional description */
  description?: string;
  /** Chart content */
  children: ReactNode;
  /** Whether data is loading */
  isLoading?: boolean;
  /** Chart height */
  height?: number;
  /** Additional CSS classes */
  className?: string;
  /** Header action element (e.g., dropdown for time range) */
  headerAction?: ReactNode;
}

/**
 * Responsive container for chart components
 * Provides consistent styling and loading states
 */
export function ChartContainer({
  title,
  description,
  children,
  isLoading = false,
  height = 300,
  className,
  headerAction,
}: ChartContainerProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Card className={className}>
        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
          <div>
            <CardTitle className="text-base font-medium">{title}</CardTitle>
            {description && <CardDescription>{description}</CardDescription>}
          </div>
          {headerAction}
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="flex items-center justify-center" style={{ height }}>
              <div className="space-y-3 w-full">
                <Skeleton className="h-[60%] w-full" style={{ height: height * 0.6 }} />
                <div className="flex justify-center gap-4">
                  <Skeleton className="h-4 w-16" />
                  <Skeleton className="h-4 w-16" />
                  <Skeleton className="h-4 w-16" />
                </div>
              </div>
            </div>
          ) : (
            <div style={{ height }} className="w-full">
              {children}
            </div>
          )}
        </CardContent>
      </Card>
    </motion.div>
  );
}

/**
 * Chart legend component
 */
interface ChartLegendProps {
  items: Array<{
    name: string;
    color: string;
    value?: string | number;
  }>;
  className?: string;
}

export function ChartLegend({ items, className }: ChartLegendProps) {
  return (
    <div className={cn('flex flex-wrap justify-center gap-4', className)}>
      {items.map((item) => (
        <div key={item.name} className="flex items-center gap-2">
          <div
            className="h-3 w-3 rounded-full"
            style={{ backgroundColor: item.color }}
          />
          <span className="text-sm text-muted-foreground">
            {item.name}
            {item.value !== undefined && (
              <span className="ml-1 font-medium text-foreground">{item.value}</span>
            )}
          </span>
        </div>
      ))}
    </div>
  );
}

/**
 * Empty state for charts with no data
 */
export function ChartEmptyState({ message }: { message?: string }) {
  const tCommon = useTranslations('common');
  const displayMessage = message ?? tCommon('noData');
  return (
    <div className="flex h-full items-center justify-center">
      <div className="text-center">
        <svg
          className="mx-auto h-12 w-12 text-muted-foreground/50"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={1.5}
            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
          />
        </svg>
        <p className="mt-2 text-sm text-muted-foreground">{displayMessage}</p>
      </div>
    </div>
  );
}
