import type { Meta, StoryObj } from '@storybook/react';
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartCard,
  DashboardBarChart,
  DashboardLineChart,
  HorizontalBarChart,
  InteractiveTimeSeriesChart,
  ComboMetricChart,
  DonutBreakdownChart,
  SparklineChart,
  RadarMetricChart,
  PieMetricChart,
  RadialBarMetricChart,
  GaugeChart,
  type ChartConfig,
  type GaugeChartThreshold,
} from './chart';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, LineChart, Line } from 'recharts';
import { Card, CardHeader, CardTitle, CardContent } from '../card';
import React from 'react';
import { TrendingUp, TrendingDown, Minus } from 'lucide-react';

const meta: Meta<typeof DashboardBarChart> = {
  title: 'UI/Chart',
  component: DashboardBarChart,
  render: args => <DashboardBarChart {...args} />,
  parameters: {
    layout: 'fullscreen',
  },
  decorators: [
    Story => (
      <div className="w-full min-w-0 p-8">
        <Story />
      </div>
    ),
  ],
  argTypes: {
    barSize: {
      control: 'select',
      options: ['sm', 'md', 'lg', 'xl'],
      description: 'Controls only the bar thickness.',
    },
    stacked: { control: 'boolean' },
    showGrid: { control: 'boolean' },
    showLegend: { control: 'boolean' },
  },
};

export default meta;
type Story = StoryObj<typeof DashboardBarChart>;

// ─── Shared data ──────────────────────────────────────────────────────────────

const data = [
  { month: 'Jan', revenue: 4000, expenses: 2400 },
  { month: 'Feb', revenue: 3000, expenses: 1398 },
  { month: 'Mar', revenue: 6000, expenses: 3200 },
  { month: 'Apr', revenue: 2780, expenses: 3908 },
  { month: 'May', revenue: 1890, expenses: 4800 },
  { month: 'Jun', revenue: 2390, expenses: 3800 },
];

const chartConfig: ChartConfig = {
  revenue: { label: 'Revenue', color: 'var(--chart-1)' },
  expenses: { label: 'Expenses', color: 'var(--chart-5)' },
};

const richChartConfig: ChartConfig = {
  revenue: { label: 'Revenue', color: 'var(--chart-1)' },
  pipeline: { label: 'Pipeline', color: 'var(--chart-4)' },
  conversion: { label: 'Conversion', color: 'var(--chart-2)' },
  churn: { label: 'Churn', color: 'var(--chart-5)' },
};

const richData = [
  { date: 'Apr 01', revenue: 4200, pipeline: 2600, conversion: 32, churn: 8 },
  { date: 'Apr 08', revenue: 5200, pipeline: 3200, conversion: 38, churn: 7 },
  { date: 'Apr 15', revenue: 6100, pipeline: 3900, conversion: 42, churn: 6 },
  { date: 'Apr 22', revenue: 5600, pipeline: 4300, conversion: 41, churn: 9 },
  { date: 'Apr 29', revenue: 7200, pipeline: 4700, conversion: 48, churn: 5 },
  { date: 'May 06', revenue: 7900, pipeline: 5300, conversion: 52, churn: 4 },
  { date: 'May 13', revenue: 8400, pipeline: 5800, conversion: 55, churn: 3 },
  { date: 'May 20', revenue: 9100, pipeline: 6200, conversion: 58, churn: 4 },
];

const breakdownConfig: ChartConfig = {
  enterprise: { label: 'Enterprise', color: 'var(--chart-1)' },
  midmarket: { label: 'Mid-market', color: 'var(--chart-4)' },
  startup: { label: 'Startup', color: 'var(--chart-2)' },
};

const breakdownData = [
  { name: 'enterprise', value: 52 },
  { name: 'midmarket', value: 31 },
  { name: 'startup', value: 17 },
];

// ─── Primitive stories ────────────────────────────────────────────────────────

export const BarChartExample: Story = {
  name: 'Primitive / Bar Chart',
  render: () => (
    <Card className="w-full max-w-4xl">
      <CardHeader>
        <CardTitle>Monthly Performance</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[300px] w-full">
          <BarChart data={data}>
            <CartesianGrid vertical={false} strokeDasharray="3 3" />
            <XAxis dataKey="month" tickLine={false} axisLine={false} />
            <ChartTooltip content={<ChartTooltipContent />} />
            <ChartLegend content={<ChartLegendContent />} />
            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={[4, 4, 0, 0]} />
            <Bar dataKey="expenses" fill="var(--color-expenses)" radius={[4, 4, 0, 0]} />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  ),
};

export const LineChartExample: Story = {
  name: 'Primitive / Line Chart',
  render: () => (
    <Card className="w-full max-w-4xl">
      <CardHeader>
        <CardTitle>Revenue Trends</CardTitle>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[300px] w-full">
          <LineChart data={data}>
            <CartesianGrid vertical={false} strokeDasharray="3 3" />
            <XAxis dataKey="month" tickLine={false} axisLine={false} />
            <ChartTooltip content={<ChartTooltipContent />} />
            <Line
              type="monotone"
              dataKey="revenue"
              stroke="var(--color-revenue)"
              strokeWidth={3}
              dot={{ r: 4, fill: 'var(--color-revenue)', strokeWidth: 0 }}
              activeDot={{ r: 6, strokeWidth: 0 }}
            />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  ),
};

// ─── Dashboard chart stories ──────────────────────────────────────────────────

export const DashboardBarChartExample: Story = {
  name: 'Bar Chart',
  args: {
    data: richData,
    indexKey: 'date',
    config: richChartConfig,
    colors: {
      revenue: 'var(--chart-1)',
      pipeline: 'var(--chart-4)',
    },
    barSize: 'lg',
    series: [
      { key: 'revenue', stackId: 'money' },
      { key: 'pipeline', stackId: 'money' },
    ],
    stacked: true,
  },
  render: args => (
    <ChartCard title="Revenue by Week" description="Stacked dashboard-ready comparison">
      <DashboardBarChart {...args} />
    </ChartCard>
  ),
};

export const DashboardLineChartExample: Story = {
  name: 'Line Chart',
  render: () => (
    <ChartCard title="Growth Trend" description="Multi-series line chart with smooth curves">
      <DashboardLineChart
        data={richData}
        indexKey="date"
        config={richChartConfig}
        colors={{
          revenue: 'var(--chart-1)',
          pipeline: 'var(--chart-4)',
          conversion: 'var(--chart-2)',
        }}
        series={[
          { key: 'revenue', label: 'Revenue' },
          { key: 'pipeline', label: 'Pipeline' },
          { key: 'conversion', label: 'Conversion' },
        ]}
        showDots
        curveType="monotone"
        strokeWidth={2.5}
      />
    </ChartCard>
  ),
};

export const HorizontalBarChartExample: Story = {
  name: 'Horizontal Bar Chart',
  render: () => (
    <ChartCard title="Top Segments" description="Ranking chart for dashboard comparisons">
      <HorizontalBarChart
        data={[
          { segment: 'Enterprise', revenue: 7600 },
          { segment: 'Mid-market', revenue: 5400 },
          { segment: 'Startup', revenue: 3100 },
          { segment: 'Partners', revenue: 2200 },
        ]}
        indexKey="segment"
        config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
        colors={{ revenue: 'var(--chart-1)' }}
        barSize="xl"
        categoryWidth={110}
        showLegend={false}
      />
    </ChartCard>
  ),
};

export const InteractiveTimeSeriesExample: Story = {
  name: 'Interactive Time Series',
  render: () => (
    <ChartCard
      title="Executive Trend"
      description="Switch metric and period without leaving the card"
    >
      <InteractiveTimeSeriesChart
        data={richData}
        indexKey="date"
        config={richChartConfig}
        colors={['var(--chart-1)', 'var(--chart-4)', 'var(--chart-2)']}
        series={[
          { key: 'revenue', label: 'Revenue' },
          { key: 'pipeline', label: 'Pipeline' },
          { key: 'conversion', label: 'Conversion' },
        ]}
        gradientFill
      />
    </ChartCard>
  ),
};

export const GradientAreaChartExample: Story = {
  name: 'Gradient Area Chart',
  render: () => (
    <ChartCard
      title="Revenue Over Time"
      description="Area chart with gradient fill for a modern look"
    >
      <InteractiveTimeSeriesChart
        data={richData}
        indexKey="date"
        config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
        colors={['var(--chart-1)']}
        series={[{ key: 'revenue', label: 'Revenue' }]}
        gradientFill
        showDots
        periods={[
          { value: '7d', label: '7 days' },
          { value: '30d', label: '30 days' },
        ]}
      />
    </ChartCard>
  ),
};

export const ComboMetricChartExample: Story = {
  name: 'Combo Metric Chart',
  render: () => (
    <ChartCard title="Pipeline Health" description="Bars for volume with a line for rate">
      <ComboMetricChart
        data={richData}
        indexKey="date"
        config={richChartConfig}
        colors={{
          pipeline: 'var(--chart-4)',
          conversion: 'var(--chart-2)',
        }}
        barSize="lg"
        series={[
          { key: 'pipeline', type: 'bar' },
          { key: 'conversion', type: 'line' },
        ]}
      />
    </ChartCard>
  ),
};

export const ComboWithGradientAreaExample: Story = {
  name: 'Combo Chart with Gradient Area',
  render: () => (
    <ChartCard
      title="Revenue & Pipeline"
      description="Gradient area for revenue, line for conversion rate"
    >
      <ComboMetricChart
        data={richData}
        indexKey="date"
        config={richChartConfig}
        colors={{
          revenue: 'var(--chart-1)',
          conversion: 'var(--chart-2)',
        }}
        series={[
          { key: 'revenue', type: 'area' },
          { key: 'conversion', type: 'line' },
        ]}
        gradientFill
        curveType="monotone"
      />
    </ChartCard>
  ),
};

export const DonutBreakdownExample: Story = {
  name: 'Donut Chart',
  render: () => (
    <ChartCard title="Customer Mix" description="Interactive segment breakdown">
      <DonutBreakdownChart
        data={breakdownData}
        config={breakdownConfig}
        colors={['var(--chart-1)', 'var(--chart-4)', 'var(--chart-2)']}
        centerValue="100%"
        centerLabel="Accounts"
      />
    </ChartCard>
  ),
};

// ─── Sparkline stories ────────────────────────────────────────────────────────

const sparkData = [
  { v: 12 },
  { v: 18 },
  { v: 14 },
  { v: 22 },
  { v: 19 },
  { v: 28 },
  { v: 24 },
  { v: 31 },
  { v: 27 },
  { v: 35 },
];

const sparkDataDown = [
  { v: 35 },
  { v: 30 },
  { v: 28 },
  { v: 22 },
  { v: 25 },
  { v: 18 },
  { v: 20 },
  { v: 14 },
  { v: 12 },
  { v: 8 },
];

export const SparklineExample: Story = {
  name: 'Sparkline Chart',
  render: () => (
    <div className="space-y-6 max-w-2xl">
      <p className="text-sm text-muted-foreground">
        Sparklines are minimal inline charts designed for stat cards and table cells.
      </p>

      {/* Stat cards with sparklines */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <Card className="p-4">
          <div className="flex items-start justify-between mb-3">
            <div>
              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
                Revenue
              </p>
              <p className="text-2xl font-bold mt-0.5">$35.2K</p>
            </div>
            <span className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 bg-emerald-50 dark:bg-emerald-950 dark:text-emerald-400 px-2 py-0.5 rounded-full">
              <TrendingUp className="size-3" />
              +12%
            </span>
          </div>
          <SparklineChart
            data={sparkData}
            dataKey="v"
            color="var(--chart-2)"
            filled
            showEndDot
            className="h-12"
          />
        </Card>

        <Card className="p-4">
          <div className="flex items-start justify-between mb-3">
            <div>
              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
                Churn
              </p>
              <p className="text-2xl font-bold mt-0.5">8.4%</p>
            </div>
            <span className="inline-flex items-center gap-1 text-xs font-medium text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400 px-2 py-0.5 rounded-full">
              <TrendingDown className="size-3" />
              -3%
            </span>
          </div>
          <SparklineChart
            data={sparkDataDown}
            dataKey="v"
            color="var(--chart-5)"
            filled
            showEndDot
            className="h-12"
          />
        </Card>

        <Card className="p-4">
          <div className="flex items-start justify-between mb-3">
            <div>
              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
                Pipeline
              </p>
              <p className="text-2xl font-bold mt-0.5">$128K</p>
            </div>
            <span className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
              <Minus className="size-3" />
              0%
            </span>
          </div>
          <SparklineChart
            data={[
              { v: 20 },
              { v: 22 },
              { v: 19 },
              { v: 23 },
              { v: 21 },
              { v: 24 },
              { v: 22 },
              { v: 25 },
              { v: 23 },
              { v: 24 },
            ]}
            dataKey="v"
            color="var(--chart-4)"
            filled
            showEndDot
            className="h-12"
          />
        </Card>
      </div>

      {/* Sparkline variants */}
      <ChartCard title="Sparkline Variants" description="Line-only vs filled area">
        <div className="space-y-4 py-2">
          <div className="flex items-center gap-4">
            <span className="text-xs text-muted-foreground w-24 shrink-0">Filled (default)</span>
            <SparklineChart
              data={sparkData}
              dataKey="v"
              color="var(--chart-1)"
              filled
              className="h-10 flex-1"
            />
          </div>
          <div className="flex items-center gap-4">
            <span className="text-xs text-muted-foreground w-24 shrink-0">Line only</span>
            <SparklineChart
              data={sparkData}
              dataKey="v"
              color="var(--chart-3)"
              filled={false}
              showEndDot={false}
              className="h-10 flex-1"
            />
          </div>
          <div className="flex items-center gap-4">
            <span className="text-xs text-muted-foreground w-24 shrink-0">Step curve</span>
            <SparklineChart
              data={sparkData}
              dataKey="v"
              color="var(--chart-6)"
              filled
              curveType="step"
              className="h-10 flex-1"
            />
          </div>
        </div>
      </ChartCard>
    </div>
  ),
};

// ─── Dashboard layout story ───────────────────────────────────────────────────

export const DashboardLayoutExample: Story = {
  name: 'Dashboard Layout',
  render: () => {
    const kpiData = [
      {
        label: 'Total Revenue',
        value: '$128.4K',
        trend: '+18%',
        up: true,
        sparkData: sparkData,
        color: 'var(--chart-1)',
      },
      {
        label: 'Active Pipeline',
        value: '$62.1K',
        trend: '+9%',
        up: true,
        sparkData: sparkData.map(d => ({ v: d.v * 0.7 })),
        color: 'var(--chart-4)',
      },
      {
        label: 'Conversion Rate',
        value: '58%',
        trend: '+4%',
        up: true,
        sparkData: sparkData.map(d => ({ v: d.v * 0.5 })),
        color: 'var(--chart-2)',
      },
      {
        label: 'Churn Rate',
        value: '3.2%',
        trend: '-1%',
        up: false,
        sparkData: sparkDataDown,
        color: 'var(--chart-5)',
      },
    ];

    return (
      <div className="space-y-6">
        {/* KPI row */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {kpiData.map(kpi => (
            <Card key={kpi.label} className="p-4">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <p className="text-xs text-muted-foreground font-medium">{kpi.label}</p>
                  <p className="text-xl font-bold mt-0.5">{kpi.value}</p>
                </div>
                <span
                  className={`inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${
                    kpi.up
                      ? 'text-emerald-600 bg-emerald-50 dark:bg-emerald-950 dark:text-emerald-400'
                      : 'text-red-600 bg-red-50 dark:bg-red-950 dark:text-red-400'
                  }`}
                >
                  {kpi.up ? <TrendingUp className="size-3" /> : <TrendingDown className="size-3" />}
                  {kpi.trend}
                </span>
              </div>
              <SparklineChart
                data={kpi.sparkData}
                dataKey="v"
                color={kpi.color}
                filled
                showEndDot
                className="h-10"
              />
            </Card>
          ))}
        </div>

        {/* Main charts row */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
          <div className="lg:col-span-2">
            <ChartCard title="Revenue & Pipeline" description="Weekly performance overview">
              <InteractiveTimeSeriesChart
                data={richData}
                indexKey="date"
                config={richChartConfig}
                colors={['var(--chart-1)', 'var(--chart-4)', 'var(--chart-2)']}
                series={[
                  { key: 'revenue', label: 'Revenue' },
                  { key: 'pipeline', label: 'Pipeline' },
                  { key: 'conversion', label: 'Conversion' },
                ]}
                gradientFill
                periods={[
                  { value: '7d', label: '7 days' },
                  { value: '30d', label: '30 days' },
                ]}
              />
            </ChartCard>
          </div>

          <ChartCard title="Customer Mix" description="Segment breakdown">
            <DonutBreakdownChart
              data={breakdownData}
              config={breakdownConfig}
              colors={['var(--chart-1)', 'var(--chart-4)', 'var(--chart-2)']}
              centerValue="100%"
              centerLabel="Accounts"
            />
          </ChartCard>
        </div>

        {/* Bottom row */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          <ChartCard title="Top Segments" description="Revenue by customer segment">
            <HorizontalBarChart
              data={[
                { segment: 'Enterprise', revenue: 7600 },
                { segment: 'Mid-market', revenue: 5400 },
                { segment: 'Startup', revenue: 3100 },
                { segment: 'Partners', revenue: 2200 },
              ]}
              indexKey="segment"
              config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
              colors={{ revenue: 'var(--chart-1)' }}
              barSize="xl"
              categoryWidth={110}
              showLegend={false}
            />
          </ChartCard>

          <ChartCard title="Pipeline Health" description="Volume vs conversion rate">
            <ComboMetricChart
              data={richData}
              indexKey="date"
              config={richChartConfig}
              colors={{
                pipeline: 'var(--chart-4)',
                conversion: 'var(--chart-2)',
              }}
              barSize="lg"
              series={[
                { key: 'pipeline', type: 'bar' },
                { key: 'conversion', type: 'line' },
              ]}
            />
          </ChartCard>
        </div>
      </div>
    );
  },
};

// ─── State stories ────────────────────────────────────────────────────────────

export const EmptyStateExample: Story = {
  name: 'State / Empty',
  render: () => (
    <ChartCard
      title="Revenue by Week"
      description="The empty state is rendered by the chart wrapper"
    >
      <DashboardBarChart
        data={[]}
        indexKey="date"
        config={richChartConfig}
        emptyDescription="No revenue events were found for the selected period."
      />
    </ChartCard>
  ),
};

export const ConnectionErrorExample: Story = {
  name: 'State / Connection Error',
  render: () => (
    <ChartCard title="Pipeline Health" description="Connection errors stay inside the chart panel">
      <ComboMetricChart
        data={richData}
        indexKey="date"
        config={richChartConfig}
        error="Unable to connect to the analytics service."
        onRetry={() => undefined}
      />
    </ChartCard>
  ),
};

export const LoadingStateExample: Story = {
  name: 'State / Loading',
  render: () => (
    <ChartCard title="Revenue by Week" description="Loading skeleton while data is fetched">
      <DashboardBarChart data={[]} indexKey="date" config={richChartConfig} isLoading />
    </ChartCard>
  ),
};

// ─── Variant stories ──────────────────────────────────────────────────────────

export const BarSizeVariantsExample: Story = {
  name: 'Variants / Bar Sizes',
  render: () => (
    <div className="space-y-6">
      <ChartCard title="Thin Bars" description='barSize="sm"'>
        <DashboardBarChart
          data={richData}
          indexKey="date"
          config={richChartConfig}
          series={[{ key: 'revenue' }]}
          barSize="sm"
          showLegend={false}
        />
      </ChartCard>
      <ChartCard title="Wide Bars" description='barSize="xl"'>
        <DashboardBarChart
          data={richData}
          indexKey="date"
          config={richChartConfig}
          series={[{ key: 'revenue' }]}
          barSize="xl"
          showLegend={false}
        />
      </ChartCard>
    </div>
  ),
};

export const CurveTypeVariantsExample: Story = {
  name: 'Variants / Curve Types',
  render: () => (
    <div className="space-y-6">
      {(['monotone', 'linear', 'step', 'natural', 'basis'] as const).map(curve => (
        <ChartCard
          key={curve}
          title={`curveType="${curve}"`}
          description="Line chart curve interpolation"
        >
          <DashboardLineChart
            data={richData}
            indexKey="date"
            config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
            series={[{ key: 'revenue' }]}
            curveType={curve}
            showLegend={false}
            showDots={curve === 'linear'}
          />
        </ChartCard>
      ))}
    </div>
  ),
};

export const ColorPaletteExample: Story = {
  name: 'Variants / Color Palette',
  render: () => {
    const paletteConfig: ChartConfig = {
      chart1: { label: 'chart-1 (indigo)', color: 'var(--chart-1)' },
      chart2: { label: 'chart-2 (emerald)', color: 'var(--chart-2)' },
      chart3: { label: 'chart-3 (amber)', color: 'var(--chart-3)' },
      chart4: { label: 'chart-4 (blue)', color: 'var(--chart-4)' },
      chart5: { label: 'chart-5 (red)', color: 'var(--chart-5)' },
      chart6: { label: 'chart-6 (purple)', color: 'var(--chart-6)' },
      chart7: { label: 'chart-7 (teal)', color: 'var(--chart-7)' },
      chart8: { label: 'chart-8 (rose)', color: 'var(--chart-8)' },
    };

    const paletteData = [
      {
        name: 'A',
        chart1: 80,
        chart2: 70,
        chart3: 60,
        chart4: 75,
        chart5: 55,
        chart6: 65,
        chart7: 72,
        chart8: 68,
      },
    ];

    return (
      <ChartCard
        title="Chart Color Palette"
        description="All 8 chart tokens — vibrant, accessible, harmonious"
      >
        <DashboardBarChart
          data={paletteData}
          indexKey="name"
          config={paletteConfig}
          barSize="xl"
          showGrid={false}
        />
      </ChartCard>
    );
  },
};

// ─── Radar Chart Stories ───────────────────────────────────────────────────────

const radarData = [
  { skill: 'Performance', score: 88 },
  { skill: 'Reliability', score: 72 },
  { skill: 'Security', score: 95 },
  { skill: 'Scalability', score: 65 },
  { skill: 'Usability', score: 80 },
  { skill: 'Maintainability', score: 58 },
];

const radarMultiData = [
  { skill: 'Performance', teamA: 88, teamB: 62 },
  { skill: 'Reliability', teamA: 72, teamB: 85 },
  { skill: 'Security', teamA: 95, teamB: 70 },
  { skill: 'Scalability', teamA: 65, teamB: 90 },
  { skill: 'Usability', teamA: 80, teamB: 55 },
  { skill: 'Maintainability', teamA: 58, teamB: 78 },
];

export const RadarChartFilled: Story = {
  name: 'Radar Chart / Filled',
  render: () => (
    <ChartCard title="System Health Score" description="Filled radar — single series">
      <RadarMetricChart
        data={radarData}
        labelKey="skill"
        series={[{ key: 'score', label: 'Score' }]}
        filled
        showLegend={false}
      />
    </ChartCard>
  ),
};

export const RadarChartOutline: Story = {
  name: 'Radar Chart / Outline',
  render: () => (
    <ChartCard title="System Health Score" description="Outline only — no fill">
      <RadarMetricChart
        data={radarData}
        labelKey="skill"
        series={[{ key: 'score', label: 'Score' }]}
        filled={false}
        showDots
        showLegend={false}
      />
    </ChartCard>
  ),
};

export const RadarChartMultiSeries: Story = {
  name: 'Radar Chart / Multi-Series',
  render: () => (
    <ChartCard title="Team Comparison" description="Two teams across 6 dimensions">
      <RadarMetricChart
        data={radarMultiData}
        labelKey="skill"
        series={[
          { key: 'teamA', label: 'Team Alpha' },
          { key: 'teamB', label: 'Team Beta' },
        ]}
        filled
        fillOpacity={0.2}
        showDots
      />
    </ChartCard>
  ),
};

export const RadarChartVariants: Story = {
  name: 'Radar Chart / All Variants',
  render: () => (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <ChartCard title="Filled" description="Default filled area">
        <RadarMetricChart
          data={radarData}
          labelKey="skill"
          series={[{ key: 'score', label: 'Score' }]}
          filled
          showLegend={false}
        />
      </ChartCard>
      <ChartCard title="Outline + Dots" description="No fill, with dots">
        <RadarMetricChart
          data={radarData}
          labelKey="skill"
          series={[{ key: 'score', label: 'Score' }]}
          filled={false}
          showDots
          showLegend={false}
        />
      </ChartCard>
      <ChartCard title="Multi-Series" description="Comparison overlay">
        <RadarMetricChart
          data={radarMultiData}
          labelKey="skill"
          series={[
            { key: 'teamA', label: 'Team A' },
            { key: 'teamB', label: 'Team B' },
          ]}
          filled
          fillOpacity={0.18}
        />
      </ChartCard>
    </div>
  ),
};

// ─── Pie Chart Stories ────────────────────────────────────────────────────────

const pieData = [
  { category: 'Infrastructure', spend: 42000 },
  { category: 'Engineering', spend: 31000 },
  { category: 'Marketing', spend: 18500 },
  { category: 'Operations', spend: 12000 },
  { category: 'Other', spend: 6500 },
];

export const PieChartSimple: Story = {
  name: 'Pie Chart / Simple',
  render: () => (
    <ChartCard title="Budget Breakdown" description="Simple pie — no labels">
      <PieMetricChart
        data={pieData}
        nameKey="category"
        valueKey="spend"
        valueFormatter={v => `$${(v as number).toLocaleString()}`}
      />
    </ChartCard>
  ),
};

export const PieChartWithLabels: Story = {
  name: 'Pie Chart / With Labels',
  render: () => (
    <ChartCard title="Budget Breakdown" description="Pie with percentage labels">
      <PieMetricChart
        data={pieData}
        nameKey="category"
        valueKey="spend"
        showLabels
        valueFormatter={v => `$${(v as number).toLocaleString()}`}
      />
    </ChartCard>
  ),
};

export const PieChartExploded: Story = {
  name: 'Pie Chart / Exploded Slice',
  render: () => (
    <ChartCard title="Budget Breakdown" description="Largest slice highlighted with drop shadow">
      <PieMetricChart
        data={pieData}
        nameKey="category"
        valueKey="spend"
        showLabels
        explodeIndex={0}
        valueFormatter={v => `$${(v as number).toLocaleString()}`}
      />
    </ChartCard>
  ),
};

export const PieChartDonutVariant: Story = {
  name: 'Pie Chart / Donut Variant',
  render: () => (
    <ChartCard title="Budget Breakdown" description="Pie with inner radius (donut style)">
      <PieMetricChart
        data={pieData}
        nameKey="category"
        valueKey="spend"
        innerRadius="45%"
        showLabels
        valueFormatter={v => `$${(v as number).toLocaleString()}`}
      />
    </ChartCard>
  ),
};

export const PieChartVariants: Story = {
  name: 'Pie Chart / All Variants',
  render: () => (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <ChartCard title="Simple" description="No labels">
        <PieMetricChart data={pieData} nameKey="category" valueKey="spend" />
      </ChartCard>
      <ChartCard title="With Labels" description="Percentage labels">
        <PieMetricChart data={pieData} nameKey="category" valueKey="spend" showLabels />
      </ChartCard>
      <ChartCard title="Exploded" description="First slice highlighted">
        <PieMetricChart
          data={pieData}
          nameKey="category"
          valueKey="spend"
          showLabels
          explodeIndex={0}
        />
      </ChartCard>
      <ChartCard title="Donut" description="Inner radius 45%">
        <PieMetricChart
          data={pieData}
          nameKey="category"
          valueKey="spend"
          innerRadius="45%"
          showLabels
        />
      </ChartCard>
    </div>
  ),
};

// ─── Radial Bar Chart Stories ─────────────────────────────────────────────────

const radialData = [
  { name: 'Infrastructure', value: 78 },
  { name: 'Engineering', value: 62 },
  { name: 'Marketing', value: 45 },
  { name: 'Operations', value: 91 },
];

export const RadialBarChartSingle: Story = {
  name: 'Radial Bar / Single Bar',
  render: () => (
    <ChartCard title="Deployment Success Rate" description="Single radial bar — full circle">
      <RadialBarMetricChart
        data={[{ name: 'Success Rate', value: 87 }]}
        dataKey="value"
        nameKey="name"
        showLegend={false}
        innerRadius="60%"
        outerRadius="90%"
        valueFormatter={v => `${v}%`}
      />
    </ChartCard>
  ),
};

export const RadialBarChartMulti: Story = {
  name: 'Radial Bar / Multi-Bar',
  render: () => (
    <ChartCard title="Department KPIs" description="Multiple radial bars with background track">
      <RadialBarMetricChart
        data={radialData}
        dataKey="value"
        nameKey="name"
        innerRadius="20%"
        outerRadius="90%"
        valueFormatter={v => `${v}%`}
      />
    </ChartCard>
  ),
};

export const RadialBarChartSemiCircle: Story = {
  name: 'Radial Bar / Semi-Circle',
  render: () => (
    <ChartCard
      title="Department KPIs"
      description="Semi-circle layout (startAngle=180, endAngle=0)"
    >
      <RadialBarMetricChart
        data={radialData}
        dataKey="value"
        nameKey="name"
        innerRadius="30%"
        outerRadius="90%"
        startAngle={180}
        endAngle={0}
        valueFormatter={v => `${v}%`}
      />
    </ChartCard>
  ),
};

export const RadialBarChartVariants: Story = {
  name: 'Radial Bar / All Variants',
  render: () => (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <ChartCard title="Single Bar" description="Full circle">
        <RadialBarMetricChart
          data={[{ name: 'Success', value: 87 }]}
          dataKey="value"
          nameKey="name"
          showLegend={false}
          innerRadius="60%"
          outerRadius="90%"
          valueFormatter={v => `${v}%`}
        />
      </ChartCard>
      <ChartCard title="Multi-Bar" description="Stacked radial bars">
        <RadialBarMetricChart
          data={radialData}
          dataKey="value"
          nameKey="name"
          innerRadius="20%"
          outerRadius="90%"
          valueFormatter={v => `${v}%`}
        />
      </ChartCard>
      <ChartCard title="Semi-Circle" description="180° arc layout">
        <RadialBarMetricChart
          data={radialData}
          dataKey="value"
          nameKey="name"
          innerRadius="30%"
          outerRadius="90%"
          startAngle={180}
          endAngle={0}
          valueFormatter={v => `${v}%`}
        />
      </ChartCard>
    </div>
  ),
};

// ─── Gauge Chart Stories ──────────────────────────────────────────────────────

const gaugeThresholds: GaugeChartThreshold[] = [
  { value: 33, color: 'var(--chart-5)', label: 'Critical' },
  { value: 66, color: 'var(--chart-3)', label: 'Warning' },
  { value: 100, color: 'var(--chart-2)', label: 'Healthy' },
];

export const GaugeChartSimple: Story = {
  name: 'Gauge Chart / Simple',
  render: () => (
    <ChartCard
      title="CPU Usage"
      description="Simple gauge — single color"
      className="max-w-sm mx-auto"
    >
      <div className="flex justify-center py-4">
        <GaugeChart value={67} label="CPU Usage" />
      </div>
    </ChartCard>
  ),
};

export const GaugeChartWithThresholds: Story = {
  name: 'Gauge Chart / With Thresholds',
  render: () => (
    <ChartCard
      title="System Health"
      description="Color zones: critical / warning / healthy"
      className="max-w-sm mx-auto"
    >
      <div className="flex justify-center py-4">
        <GaugeChart value={72} label="Overall Health" thresholds={gaugeThresholds} />
      </div>
    </ChartCard>
  ),
};

export const GaugeChartNoNeedle: Story = {
  name: 'Gauge Chart / No Needle',
  render: () => (
    <ChartCard
      title="Memory Usage"
      description="Arc only — no needle indicator"
      className="max-w-sm mx-auto"
    >
      <div className="flex justify-center py-4">
        <GaugeChart value={45} label="Memory" showNeedle={false} thresholds={gaugeThresholds} />
      </div>
    </ChartCard>
  ),
};

export const GaugeChartVariants: Story = {
  name: 'Gauge Chart / All Variants',
  render: () => (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <ChartCard title="Low (22%)" description="Critical zone">
        <div className="flex justify-center py-2">
          <GaugeChart value={22} label="CPU" thresholds={gaugeThresholds} />
        </div>
      </ChartCard>
      <ChartCard title="Medium (55%)" description="Warning zone">
        <div className="flex justify-center py-2">
          <GaugeChart value={55} label="Memory" thresholds={gaugeThresholds} />
        </div>
      </ChartCard>
      <ChartCard title="High (88%)" description="Healthy zone">
        <div className="flex justify-center py-2">
          <GaugeChart value={88} label="Disk I/O" thresholds={gaugeThresholds} />
        </div>
      </ChartCard>
    </div>
  ),
};

export const GaugeChartDashboard: Story = {
  name: 'Gauge Chart / Infrastructure Dashboard',
  render: () => {
    const metrics = [
      { label: 'CPU', value: 34, unit: '%' },
      { label: 'Memory', value: 71, unit: '%' },
      { label: 'Disk', value: 58, unit: '%' },
      { label: 'Network', value: 22, unit: '%' },
    ];

    return (
      <div className="space-y-4">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {metrics.map(m => (
            <ChartCard key={m.label} title={m.label} description={`Current ${m.label} utilization`}>
              <div className="flex justify-center py-2">
                <GaugeChart
                  value={m.value}
                  label={m.label}
                  thresholds={gaugeThresholds}
                  valueFormatter={v => `${v}${m.unit}`}
                />
              </div>
            </ChartCard>
          ))}
        </div>
      </div>
    );
  },
};

// ─── Complete Chart Library Overview ─────────────────────────────────────────

export const CompleteLibraryOverview: Story = {
  name: 'Complete Library / All Chart Types',
  render: () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {/* Bar */}
        <ChartCard title="Bar Chart" description="Categorical comparison">
          <DashboardBarChart
            data={[
              { month: 'Jan', revenue: 42000 },
              { month: 'Feb', revenue: 38000 },
              { month: 'Mar', revenue: 51000 },
              { month: 'Apr', revenue: 47000 },
              { month: 'May', revenue: 55000 },
            ]}
            indexKey="month"
            config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
            series={[{ key: 'revenue', label: 'Revenue' }]}
            showLegend={false}
          />
        </ChartCard>

        {/* Line */}
        <ChartCard title="Line Chart" description="Trend over time">
          <DashboardLineChart
            data={[
              { month: 'Jan', users: 1200 },
              { month: 'Feb', users: 1450 },
              { month: 'Mar', users: 1380 },
              { month: 'Apr', users: 1620 },
              { month: 'May', users: 1890 },
            ]}
            indexKey="month"
            config={{ users: { label: 'Users', color: 'var(--chart-2)' } }}
            series={[{ key: 'users', label: 'Users' }]}
            showLegend={false}
          />
        </ChartCard>

        {/* Donut */}
        <ChartCard title="Donut Chart" description="Part-to-whole">
          <DonutBreakdownChart
            data={[
              { name: 'Active', value: 68 },
              { name: 'Idle', value: 22 },
              { name: 'Offline', value: 10 },
            ]}
            nameKey="name"
            valueKey="value"
            config={{
              Active: { label: 'Active', color: 'var(--chart-2)' },
              Idle: { label: 'Idle', color: 'var(--chart-3)' },
              Offline: { label: 'Offline', color: 'var(--chart-5)' },
            }}
            centerValue="68%"
            centerLabel="Active"
            showLegend={false}
          />
        </ChartCard>

        {/* Radar */}
        <ChartCard title="Radar Chart" description="Multi-dimensional">
          <RadarMetricChart
            data={radarData}
            labelKey="skill"
            series={[{ key: 'score', label: 'Score' }]}
            filled
            showLegend={false}
          />
        </ChartCard>

        {/* Pie */}
        <ChartCard title="Pie Chart" description="Proportional slices">
          <PieMetricChart
            data={pieData}
            nameKey="category"
            valueKey="spend"
            showLabels
            showLegend={false}
          />
        </ChartCard>

        {/* Radial Bar */}
        <ChartCard title="Radial Bar" description="Progress rings">
          <RadialBarMetricChart
            data={radialData}
            dataKey="value"
            nameKey="name"
            innerRadius="20%"
            outerRadius="90%"
            valueFormatter={v => `${v}%`}
          />
        </ChartCard>
      </div>

      {/* Gauge row */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {[
          { label: 'CPU', value: 34 },
          { label: 'Memory', value: 71 },
          { label: 'Disk', value: 58 },
        ].map(m => (
          <ChartCard key={m.label} title={`Gauge — ${m.label}`} description="Semicircle gauge">
            <div className="flex justify-center py-2">
              <GaugeChart value={m.value} label={m.label} thresholds={gaugeThresholds} />
            </div>
          </ChartCard>
        ))}
      </div>
    </div>
  ),
};