import type { Meta, StoryObj } from "@storybook/react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./card";
import { Button } from "./button";
import { TrendingUp, TrendingDown, Users, Activity } from "lucide-react";

const meta: Meta<typeof Card> = {
  title: "UI/Card",
  component: Card,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {
    variant: {
      control: "select",
      options: ["default", "outlined", "elevated"],
      description: "Card visual style variant",
    },
    isHoverable: {
      control: "boolean",
      description: "Enable hover effect",
    },
  },
  subcomponents: {
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
    CardFooter,
  },
};

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

export const Default: Story = {
  render: () => (
    <Card className="w-80">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>
          This is a description of the card content.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>This is the main content of the card. You can put any content here.</p>
      </CardContent>
      <CardFooter>
        <Button variant="primary" size="sm">Action</Button>
        <Button variant="ghost" size="sm">Cancel</Button>
      </CardFooter>
    </Card>
  ),
};

export const Outlined: Story = {
  render: () => (
    <Card variant="outlined" className="w-80">
      <CardHeader>
        <CardTitle>Outlined Card</CardTitle>
        <CardDescription>
          Card with outlined variant and transparent background.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>This card uses the outlined variant with a border.</p>
      </CardContent>
      <CardFooter>
        <Button variant="outline" size="sm">View</Button>
      </CardFooter>
    </Card>
  ),
};

export const Elevated: Story = {
  render: () => (
    <Card variant="elevated" className="w-80">
      <CardHeader>
        <CardTitle>Elevated Card</CardTitle>
        <CardDescription>
          Card with elevated variant and shadow.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>This card uses the elevated variant with a shadow.</p>
      </CardContent>
      <CardFooter>
        <Button variant="primary" size="sm">Get Started</Button>
      </CardFooter>
    </Card>
  ),
};

export const Hoverable: Story = {
  render: () => (
    <Card variant="default" isHoverable className="w-80">
      <CardHeader>
        <CardTitle>Hoverable Card</CardTitle>
        <CardDescription>
          Hover over this card to see the effect.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>This card has a hover effect applied.</p>
      </CardContent>
    </Card>
  ),
};

export const WithoutHeader: Story = {
  render: () => (
    <Card className="w-80">
      <CardContent>
        <h3 className="text-lg font-bold text-[#e1e1e1] mb-2">Custom Content</h3>
        <p className="text-sm text-[#a0a0a0] mb-4">
          This card doesn't use the standard header component.
        </p>
        <div className="flex items-center gap-2">
          <div className="h-2 w-2 bg-green-500 rounded-full" />
          <span className="text-sm text-[#e1e1e1]">Status: Active</span>
        </div>
      </CardContent>
    </Card>
  ),
};

export const WithoutFooter: Story = {
  render: () => (
    <Card className="w-80">
      <CardHeader>
        <CardTitle>Simple Card</CardTitle>
        <CardDescription>
          A card without footer actions.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-[#a0a0a0]">
          This card only has a header and content area.
        </p>
      </CardContent>
    </Card>
  ),
};

export const Minimal: Story = {
  render: () => (
    <Card className="w-80">
      <CardContent>
        <p className="text-sm text-[#a0a0a0]">
          A minimal card with just content.
        </p>
      </CardContent>
    </Card>
  ),
};

export const MetricCardExample: Story = {
  render: () => (
    <Card variant="elevated" className="w-72">
      <CardContent className="pt-6">
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-semibold text-[#a0a0a0] uppercase tracking-wider">
            Total Revenue
          </h3>
          <Activity className="h-4 w-4 text-[#00ffcc]" />
        </div>
        <div className="flex items-baseline gap-2">
          <span className="text-3xl font-bold text-[#e1e1e1]">$45,231</span>
          <span className="flex items-center text-sm text-green-500">
            <TrendingUp className="h-4 w-4 mr-1" />
            +20.1%
          </span>
        </div>
        <p className="text-xs text-[#a0a0a0] mt-2">
          from last month
        </p>
      </CardContent>
    </Card>
  ),
};

export const UserCardExample: Story = {
  render: () => (
    <Card variant="outlined" className="w-80">
      <CardContent className="pt-6">
        <div className="flex items-center gap-4 mb-4">
          <div className="h-12 w-12 rounded-full bg-[#2c2c2c] flex items-center justify-center">
            <Users className="h-6 w-6 text-[#a0a0a0]" />
          </div>
          <div>
            <h4 className="text-sm font-semibold text-[#e1e1e1]">John Doe</h4>
            <p className="text-xs text-[#a0a0a0]">john.doe@example.com</p>
          </div>
        </div>
        <div className="space-y-2">
          <div className="flex justify-between text-sm">
            <span className="text-[#a0a0a0]">Projects</span>
            <span className="text-[#e1e1e1]">24</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-[#a0a0a0]">Tasks</span>
            <span className="text-[#e1e1e1]">156</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-[#a0a0a0]">Completion</span>
            <span className="text-[#e1e1e1]">89%</span>
          </div>
        </div>
      </CardContent>
    </Card>
  ),
};

export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-wrap gap-6">
      <Card variant="default" className="w-72">
        <CardHeader>
          <CardTitle>Default</CardTitle>
          <CardDescription>Basic card style</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-[#a0a0a0]">
            Background color with no border
          </p>
        </CardContent>
      </Card>

      <Card variant="outlined" className="w-72">
        <CardHeader>
          <CardTitle>Outlined</CardTitle>
          <CardDescription>Bordered card style</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-[#a0a0a0]">
            Transparent background with border
          </p>
        </CardContent>
      </Card>

      <Card variant="elevated" className="w-72">
        <CardHeader>
          <CardTitle>Elevated</CardTitle>
          <CardDescription>Shadow card style</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-[#a0a0a0]">
            Background with large shadow
          </p>
        </CardContent>
      </Card>
    </div>
  ),
};

export const DashboardCards: Story = {
  render: () => (
    <div className="flex flex-wrap gap-6">
      <Card variant="elevated" className="w-64">
        <CardContent className="pt-6">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-semibold text-[#a0a0a0] uppercase tracking-wider">
              Revenue
            </span>
            <TrendingUp className="h-4 w-4 text-green-500" />
          </div>
          <p className="text-2xl font-bold text-[#e1e1e1] mb-1">$48,352</p>
          <p className="text-xs text-green-500 flex items-center">
            <TrendingUp className="h-3 w-3 mr-1" />
            +12.5%
          </p>
        </CardContent>
      </Card>

      <Card variant="elevated" className="w-64">
        <CardContent className="pt-6">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-semibold text-[#a0a0a0] uppercase tracking-wider">
              Users
            </span>
            <Users className="h-4 w-4 text-[#00ffcc]" />
          </div>
          <p className="text-2xl font-bold text-[#e1e1e1] mb-1">2,847</p>
          <p className="text-xs text-green-500 flex items-center">
            <TrendingUp className="h-3 w-3 mr-1" />
            +8.2%
          </p>
        </CardContent>
      </Card>

      <Card variant="elevated" className="w-64">
        <CardContent className="pt-6">
          <div className="flex items-center justify-between mb-2">
            <span className="text-xs font-semibold text-[#a0a0a0] uppercase tracking-wider">
              Bounce Rate
            </span>
            <Activity className="h-4 w-4 text-red-500" />
          </div>
          <p className="text-2xl font-bold text-[#e1e1e1] mb-1">42.3%</p>
          <p className="text-xs text-red-500 flex items-center">
            <TrendingDown className="h-3 w-3 mr-1" />
            -3.1%
          </p>
        </CardContent>
      </Card>
    </div>
  ),
};

export const WithActions: Story = {
  render: () => (
    <div className="flex flex-wrap gap-6">
      <Card className="w-80">
        <CardHeader>
          <CardTitle>Confirm Action</CardTitle>
          <CardDescription>
            Are you sure you want to proceed?
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-[#a0a0a0]">
            This action cannot be undone. Please confirm.
          </p>
        </CardContent>
        <CardFooter className="justify-end gap-2">
          <Button variant="ghost" size="sm">Cancel</Button>
          <Button variant="danger" size="sm">Delete</Button>
        </CardFooter>
      </Card>

      <Card variant="outlined" className="w-80">
        <CardHeader>
          <CardTitle>Settings</CardTitle>
          <CardDescription>
            Configure your preferences
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-[#a0a0a0] mb-4">
            Manage your account settings and preferences.
          </p>
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-sm text-[#e1e1e1]">Notifications</span>
              <div className="h-4 w-8 bg-[#2c2c2c] rounded-full relative">
                <div className="h-4 w-4 bg-[#00ffcc] rounded-full absolute right-0" />
              </div>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-sm text-[#e1e1e1]">Dark Mode</span>
              <div className="h-4 w-8 bg-[#2c2c2c] rounded-full relative">
                <div className="h-4 w-4 bg-[#00ffcc] rounded-full absolute right-0" />
              </div>
            </div>
          </div>
        </CardContent>
        <CardFooter className="justify-end">
          <Button variant="primary" size="sm">Save Changes</Button>
        </CardFooter>
      </Card>
    </div>
  ),
};
