import type { ChartData } from "chart.js"
import type { Meta, StoryObj } from "@storybook/vue3-vite"
import ChartDisplay from "./ChartDisplay.vue"
import { componentDoc } from "@/lib/storybook"

const lineData: ChartData<"line"> = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "Revenue",
      data: [12, 19, 14, 22, 28, 31],
      borderColor: "hsl(var(--primary))",
      backgroundColor: "hsl(var(--primary) / 0.2)",
      tension: 0.35,
      fill: true,
    },
  ],
}

const barData: ChartData<"bar"> = {
  labels: ["Q1", "Q2", "Q3", "Q4"],
  datasets: [
    {
      label: "Tickets",
      data: [120, 190, 145, 230],
      backgroundColor: "hsl(var(--primary) / 0.8)",
    },
  ],
}

const pieData: ChartData<"pie"> = {
  labels: ["GA", "VIP", "Press", "Comp"],
  datasets: [
    {
      data: [60, 20, 8, 12],
      backgroundColor: [
        "hsl(var(--primary))",
        "hsl(var(--success))",
        "hsl(var(--warning))",
        "hsl(var(--info))",
      ],
    },
  ],
}

const radarData: ChartData<"radar"> = {
  labels: ["Speed", "Accuracy", "UX", "Reliability", "Security"],
  datasets: [
    {
      label: "v1",
      data: [3, 4, 2, 4, 3],
      borderColor: "hsl(var(--muted-foreground))",
      backgroundColor: "hsl(var(--muted) / 0.4)",
    },
    {
      label: "v2",
      data: [4, 5, 5, 4, 4],
      borderColor: "hsl(var(--primary))",
      backgroundColor: "hsl(var(--primary) / 0.2)",
    },
  ],
}

const meta = {
  title: "Elements/Display/ChartDisplay",
  component: ChartDisplay,
  tags: ["autodocs"],
  args: {
    chartType: "line",
    data: lineData as ChartData,
    height: 320,
  },
  parameters: componentDoc("ChartDisplay", { barrel: "display" }),
  decorators: [
    () => ({ template: '<div class="max-w-2xl p-4"><story /></div>' }),
  ],
} satisfies Meta<typeof ChartDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { chartType: "line", data: lineData as ChartData },
}

export const Bar: Story = {
  args: { chartType: "bar", data: barData as ChartData },
}

export const Pie: Story = {
  args: { chartType: "pie", data: pieData as ChartData, height: 360 },
}

export const Doughnut: Story = {
  args: { chartType: "doughnut", data: pieData as ChartData, height: 360 },
}

export const Radar: Story = {
  args: { chartType: "radar", data: radarData as ChartData, height: 360 },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { ChartDisplay },
    setup() {
      return { lineData, barData, pieData, radarData }
    },
    template: `
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <ChartDisplay chart-type="line" :data="lineData" :height="260" />
        <ChartDisplay chart-type="bar" :data="barData" :height="260" />
        <ChartDisplay chart-type="pie" :data="pieData" :height="260" />
        <ChartDisplay chart-type="radar" :data="radarData" :height="260" />
      </div>
    `,
  }),
}
