import type { Meta, StoryObj } from "@storybook/react";
import { StatCard } from "./StatCard";
import { TrendingUp, TrendingDown, DollarSign, Users, Activity, BarChart3 } from "lucide-react";

const meta: Meta<typeof StatCard> = {
  title: "UI/StatCard",
  component: StatCard,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    label: {
      control: "text",
      description: "Card label text",
    },
    value: {
      control: "text",
      description: "Main value to display",
    },
    subValue: {
      control: "text",
      description: "Secondary value text",
    },
    change: {
      control: "object",
      description: "Change indicator with value and direction",
    },
    icon: {
      control: false,
      description: "Icon element to display",
    },
    isLoading: {
      control: "boolean",
      description: "Show loading skeleton",
    },
  },
};

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

export const Default: Story = {
  args: {
    label: "Total Revenue",
    value: "$45,231",
    subValue: "vs last month",
  },
};

export const WithIcon: Story = {
  args: {
    label: "Total Revenue",
    value: "$45,231",
    subValue: "vs last month",
    icon: <DollarSign size={18} />,
  },
};

export const WithPositiveChange: Story = {
  args: {
    label: "Active Users",
    value: "2,847",
    change: {
      value: 12.5,
      isPositive: true,
    },
    icon: <Users size={18} />,
  },
};

export const WithNegativeChange: Story = {
  args: {
    label: "Bounce Rate",
    value: "42.3%",
    change: {
      value: 3.1,
      isPositive: false,
    },
    icon: <Activity size={18} />,
  },
};

export const Loading: Story = {
  args: {
    label: "Loading...",
    value: "",
    isLoading: true,
  },
};

export const AllVariants: Story = {
  render: () => (
    <div className="grid grid-cols-3 gap-4">
      <StatCard
        label="Total Revenue"
        value="$48,352"
        change={{ value: 12.5, isPositive: true }}
        icon={<DollarSign size={18} />}
      />
      <StatCard
        label="Active Users"
        value="2,847"
        change={{ value: 8.2, isPositive: true }}
        icon={<Users size={18} />}
      />
      <StatCard
        label="Sessions"
        value="1,429"
        change={{ value: 5.4, isPositive: false }}
        icon={<BarChart3 size={18} />}
      />
      <StatCard
        label="Page Views"
        value="18.2K"
        subValue="Avg: 1,200/day"
        icon={<Activity size={18} />}
      />
      <StatCard
        label="Conversion"
        value="3.24%"
        change={{ value: 0.8, isPositive: true }}
        icon={<TrendingUp size={18} />}
      />
      <StatCard
        label="Churn Rate"
        value="2.1%"
        change={{ value: 0.3, isPositive: false }}
        icon={<TrendingDown size={18} />}
      />
    </div>
  ),
};

export const DashboardExample: Story = {
  render: () => (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full max-w-4xl">
      <StatCard
        label="Total Equity"
        value="$125,430"
        change={{ value: 5.2, isPositive: true }}
        icon={<DollarSign size={18} />}
      />
      <StatCard
        label="Daily P&L"
        value="+$2,840"
        change={{ value: 2.3, isPositive: true }}
        icon={<TrendingUp size={18} />}
      />
      <StatCard
        label="Total Trades"
        value="1,247"
        subValue="24 today"
        icon={<BarChart3 size={18} />}
      />
      <StatCard
        label="Active Agents"
        value="8 / 12"
        subValue="4 resting"
        icon={<Users size={18} />}
      />
    </div>
  ),
};

export const CryptoDashboard: Story = {
  render: () => (
    <div className="grid grid-cols-2 gap-4 w-full max-w-2xl">
      <StatCard
        label="BTC/USDT Position"
        value="+2.45 BTC"
        change={{ value: 8.5, isPositive: true }}
        subValue="$145,230 USD"
      />
      <StatCard
        label="ETH/USDT Position"
        value="+15.2 ETH"
        change={{ value: 3.2, isPositive: true }}
        subValue="$52,840 USD"
      />
      <StatCard
        label="Unrealized P&L"
        value="+$12,450"
        change={{ value: 15.3, isPositive: true }}
        icon={<TrendingUp size={18} />}
      />
      <StatCard
        label="Margin Used"
        value="32%"
        subValue="$62,000 / $200,000"
        icon={<Activity size={18} />}
      />
    </div>
  ),
};
