'use client';

import React from 'react';
import { 
  BarChart, Bar, LineChart, Line, FunnelChart, Funnel,
  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, LabelList 
} from 'recharts';

// Premium Translucent Dropdown Floating Tooltip
export const CustomChartTooltip = ({ active, payload, label }: any) => {
  if (active && payload && payload.length) {
    return (
      <div className="bg-background/95 backdrop-blur-md border border-border/60 shadow-xl px-3 py-2 rounded-lg text-left transition-all duration-200">
        <p className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80 mb-1.5">{label}</p>
        <div className="space-y-1">
          {payload.map((entry: any, index: number) => (
            <div key={index} className="flex items-center gap-4 justify-between text-xs font-medium">
              <span className="flex items-center gap-1.5 text-muted-foreground">
                <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: entry.color || entry.fill }} />
                {entry.name}
              </span>
              <span className="font-semibold text-foreground text-right">{entry.value.toLocaleString()}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  return null;
};

// Common configuration configurations to maintain unified minimalism
const axisConfig = {
  stroke: "currentColor",
  className: "text-muted-foreground/40",
  fontSize: 10,
  fontWeight: 600,
  tickLine: false,
  axisLine: false,
};

// 1. ENROLLMENT TRENDS COMPONENT
export const EnrollmentTrendsChart = ({ data }: { data: any[] }) => (
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={data} margin={{ top: 10, right: 10, left: -25, bottom: 0 }}>
      <CartesianGrid strokeDasharray="0" stroke="var(--border)" vertical={false} opacity={0.4} />
      <XAxis dataKey="name" {...axisConfig} dy={8} />
      <YAxis {...axisConfig} dx={-4} />
      <Tooltip content={<CustomChartTooltip />} cursor={{ stroke: 'var(--border)', strokeWidth: 1 }} />
      <Legend iconType="circle" iconSize={6} wrapperStyle={{ fontSize: '10px', fontWeight: 600, textTransform: 'uppercase', paddingTop: '15px' }} />
      <Line type="monotone" dataKey="enrollments" name="Enrolled" stroke="var(--primary)" strokeWidth={2} dot={false} activeDot={{ r: 4, strokeWidth: 0 }} />
      <Line type="monotone" dataKey="completed" name="Completed" stroke="#10b981" strokeWidth={1.5} strokeDasharray="4 4" dot={false} />
    </LineChart>
  </ResponsiveContainer>
);

// 2. DISTRICT PERFORMANCE COMPONENT
export const DistrictPerformanceChart = ({ data }: { data: any[] }) => (
  <ResponsiveContainer width="100%" height="100%">
    <BarChart data={data} margin={{ top: 10, right: 10, left: -25, bottom: 0 }} barGap={5}>
      <CartesianGrid strokeDasharray="0" stroke="var(--border)" vertical={false} opacity={0.4} />
      <XAxis dataKey="name" {...axisConfig} dy={8} />
      <YAxis {...axisConfig} dx={-4} />
      <Tooltip content={<CustomChartTooltip />} cursor={{ fill: 'var(--muted)', opacity: 0.2 }} />
      <Legend iconType="circle" iconSize={6} wrapperStyle={{ fontSize: '10px', fontWeight: 600, textTransform: 'uppercase', paddingTop: '15px' }} />
      <Bar dataKey="students" name="Students" fill="var(--primary)" radius={[3, 3, 0, 0]} maxBarSize={28} />
      <Bar dataKey="advisors" name="Advisors" fill="rgba(var(--primary-rgb), 0.35)" stroke="var(--primary)" strokeWidth={1} radius={[3, 3, 0, 0]} maxBarSize={28} />
    </BarChart>
  </ResponsiveContainer>
);

// 3. SECTOR GROWTH COMPONENT
export const SectorGrowthChart = ({ data }: { data: any[] }) => (
  <ResponsiveContainer width="100%" height="100%">
    <BarChart data={data} margin={{ top: 10, right: 10, left: -25, bottom: 0 }}>
      <CartesianGrid strokeDasharray="0" stroke="var(--border)" vertical={false} opacity={0.4} />
      <XAxis dataKey="name" {...axisConfig} dy={8} />
      <YAxis {...axisConfig} dx={-4} />
      <Tooltip content={<CustomChartTooltip />} cursor={{ fill: 'var(--muted)', opacity: 0.2 }} />
      <Bar dataKey="sectorsAdded" name="Sectors Activated" fill="#10b981" opacity={0.85} radius={[3, 3, 0, 0]} maxBarSize={18} />
    </BarChart>
  </ResponsiveContainer>
);

// 4. CONVERSION FUNNEL COMPONENT
export const ConversionFunnelChart = ({ data }: { data: any[] }) => (
  <ResponsiveContainer width="95%" height="95%">
    <FunnelChart margin={{ top: 0, right: 20, left: 20, bottom: 0 }}>
      <Tooltip content={<CustomChartTooltip />} />
      <Funnel dataKey="value" data={data} isAnimationActive opacity={0.9}>
        <LabelList position="right" fill="currentColor" className="text-muted-foreground font-bold text-[10px] uppercase tracking-wider" dataKey="name" stroke="none" dx={8} />
      </Funnel>
    </FunnelChart>
  </ResponsiveContainer>
);