"use client";

import React from "react";
import { cn } from "../shared/utils";

// Simple icon component to replace lucide-react dependency
const TrendingUpIcon = ({ className }: { className?: string }) => (
  <svg
    className={cn("h-4 w-4", className)}
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
    />
  </svg>
);

// Chart configuration type
interface ChartConfig {
  [key: string]: {
    label: string;
    color: string;
  };
}

// Chart data type
interface ChartData {
  month: string;
  desktop: number;
}

// Chart container component
interface ChartContainerProps {
  children: React.ReactNode;
  config: ChartConfig;
}

const ChartContainer: React.FC<ChartContainerProps> = ({ children }) => {
  return (
    <div className="w-full h-[300px] flex items-center justify-center">
      {children}
    </div>
  );
};

// Chart tooltip component
interface ChartTooltipProps {
  children: React.ReactNode;
  cursor?: boolean;
  content?: React.ReactNode;
}

const ChartTooltip: React.FC<ChartTooltipProps> = ({ children, content }) => {
  return (
    <div className="relative">
      {children}
      {content && (
        <div className="absolute top-0 left-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2 text-sm">
          {content}
        </div>
      )}
    </div>
  );
};

// Chart tooltip content component
const ChartTooltipContent: React.FC<{ hideLabel?: boolean }> = ({ hideLabel }) => {
  return (
    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2">
      <div className="text-sm font-medium">Chart Data</div>
      {!hideLabel && <div className="text-xs text-gray-500">Click to view details</div>}
    </div>
  );
};

// Simple bar chart component using CSS
const SimpleBarChart: React.FC<{ data: ChartData[] }> = ({ data }) => {
  const maxValue = Math.max(...data.map(item => item.desktop));
  
  return (
    <div className="w-full h-full flex items-end justify-between gap-2 px-4">
      {data.map((item, index) => (
        <div key={index} className="flex flex-col items-center gap-2">
          <div className="relative">
            <div
              className="w-12 bg-blue-500 rounded-t-lg transition-all duration-300 hover:bg-blue-600"
              style={{
                height: `${(item.desktop / maxValue) * 200}px`,
                minHeight: '20px'
              }}
            />
            <div className="absolute -top-6 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 hover:opacity-100 transition-opacity duration-200">
              {item.desktop}
            </div>
          </div>
          <div className="text-xs text-gray-600 dark:text-gray-400 font-medium">
            {item.month.slice(0, 3)}
          </div>
        </div>
      ))}
    </div>
  );
};

// Card components
interface CardProps {
  children: React.ReactNode;
  className?: string;
}

const Card: React.FC<CardProps> = ({ children, className }) => (
  <div className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}>
    {children}
  </div>
);

const CardHeader: React.FC<CardProps> = ({ children, className }) => (
  <div className={cn("flex flex-col space-y-1.5 p-6", className)}>
    {children}
  </div>
);

const CardTitle: React.FC<CardProps> = ({ children, className }) => (
  <h3 className={cn("text-2xl font-semibold leading-none tracking-tight", className)}>
    {children}
  </h3>
);

const CardDescription: React.FC<CardProps> = ({ children, className }) => (
  <p className={cn("text-sm text-muted-foreground", className)}>
    {children}
  </p>
);

const CardContent: React.FC<CardProps> = ({ children, className }) => (
  <div className={cn("p-6 pt-0", className)}>
    {children}
  </div>
);

const CardFooter: React.FC<CardProps> = ({ children, className }) => (
  <div className={cn("flex items-center p-6 pt-0", className)}>
    {children}
  </div>
);

// Chart configuration
const chartConfig: ChartConfig = {
  desktop: {
    label: "Desktop",
    color: "var(--chart-1, #3b82f6)",
  },
};

// Chart data
const chartData: ChartData[] = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

export function ChartBarDefault() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Bar Chart</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <SimpleBarChart data={chartData} />
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-start gap-2 text-sm">
        <div className="flex gap-2 leading-none font-medium">
          Trending up by 5.2% this month <TrendingUpIcon />
        </div>
        <div className="text-muted-foreground leading-none">
          Showing total visitors for the last 6 months
        </div>
      </CardFooter>
    </Card>
  );
}

// Export types for external use
export type { ChartConfig, ChartData };
export { ChartContainer, ChartTooltip, ChartTooltipContent };
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };