import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { UiButton } from '../UiButton';
import { UiInput } from '../UiInput';
import {
  UiCard,
  UiCardAction,
  UiCardContent,
  UiCardDescription,
  UiCardFooter,
  UiCardHeader,
  UiCardTitle,
} from './index';

/**
 * UiCard is a surface container that groups related content using `UiCardHeader`, `UiCardContent`, `UiCardFooter`, and an optional `UiCardAction`.
 * Use it for self-contained units like summaries, stats, login forms, and list items.
 */
const meta: Meta<typeof UiCard> = {
  title: 'Components/UiCard',
  component: UiCard,
  tags: ['autodocs'],
  argTypes: {},
  args: {},
};

export default meta;

type Story = StoryObj<typeof UiCard>;

const defaultTemplateSource = `<script setup lang="ts">
import {
  UiCard,
  UiCardAction,
  UiCardContent,
  UiCardDescription,
  UiCardFooter,
  UiCardHeader,
  UiCardTitle,
  UiButton,
  UiInput,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiCard class="w-full max-w-sm">
    <UiCardHeader>
      <UiCardTitle>Login to your account</UiCardTitle>
      <UiCardDescription>
        Enter your email below to login to your account
      </UiCardDescription>
      <UiCardAction>
        <UiButton variant="link">Sign Up</UiButton>
      </UiCardAction>
    </UiCardHeader>
    <UiCardContent>
      <form>
        <div class="grid w-full items-center gap-4">
          <div class="flex flex-col gap-y-1.5">
            <label for="email" class="body-14-medium">Email</label>
            <UiInput id="email" type="email" placeholder="m@example.com" />
          </div>
          <div class="flex flex-col gap-y-1.5">
            <div class="flex items-center">
              <label for="password" class="body-14-medium">Password</label>
              <a href="#" class="body-14-regular ml-auto inline-block underline">
                Forgot your password?
              </a>
            </div>
            <UiInput id="password" type="password" />
          </div>
        </div>
      </form>
    </UiCardContent>
    <UiCardFooter class="flex flex-col gap-2">
      <UiButton class="w-full">Login</UiButton>
      <UiButton variant="outline" class="w-full">Login with Google</UiButton>
    </UiCardFooter>
  </UiCard>
</template>`;

/**
 * Login card example from shadcn-vue docs.
 * Shows header with action, form content, and footer with buttons.
 */
export const Default: Story = {
  render: () => ({
    components: {
      UiCard,
      UiCardAction,
      UiCardContent,
      UiCardDescription,
      UiCardFooter,
      UiCardHeader,
      UiCardTitle,
      UiButton,
      UiInput,
    },
    template: `<UiCard class="w-full max-w-sm">
      <UiCardHeader>
        <UiCardTitle>Login to your account</UiCardTitle>
        <UiCardDescription>
          Enter your email below to login to your account
        </UiCardDescription>
        <UiCardAction>
          <UiButton variant="link">Sign Up</UiButton>
        </UiCardAction>
      </UiCardHeader>
      <UiCardContent>
        <form>
          <div class="grid w-full items-center gap-4">
            <div class="flex flex-col gap-y-1.5">
              <label for="email" class="body-14-medium">Email</label>
              <UiInput id="email" type="email" placeholder="m@example.com" />
            </div>
            <div class="flex flex-col gap-y-1.5">
              <div class="flex items-center">
                <label for="password" class="body-14-medium">Password</label>
                <a href="#" class="body-14-regular ml-auto inline-block underline">
                  Forgot your password?
                </a>
              </div>
              <UiInput id="password" type="password" />
            </div>
          </div>
        </form>
      </UiCardContent>
      <UiCardFooter class="flex flex-col gap-2">
        <UiButton class="w-full">Login</UiButton>
        <UiButton variant="outline" class="w-full">Login with Google</UiButton>
      </UiCardFooter>
    </UiCard>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const simpleTemplateSource = `<script setup lang="ts">
import {
  UiCard,
  UiCardContent,
  UiCardDescription,
  UiCardFooter,
  UiCardHeader,
  UiCardTitle,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiCard>
    <UiCardHeader>
      <UiCardTitle>Card Title</UiCardTitle>
      <UiCardDescription>Card Description</UiCardDescription>
    </UiCardHeader>
    <UiCardContent>
      <p>Card Content</p>
    </UiCardContent>
    <UiCardFooter>
      <p>Card Footer</p>
    </UiCardFooter>
  </UiCard>
</template>`;

/**
 * Simple card usage example from shadcn-vue docs.
 */
export const Simple: Story = {
  render: () => ({
    components: {
      UiCard,
      UiCardContent,
      UiCardDescription,
      UiCardFooter,
      UiCardHeader,
      UiCardTitle,
    },
    template: `<UiCard>
      <UiCardHeader>
        <UiCardTitle>Card Title</UiCardTitle>
        <UiCardDescription>Card Description</UiCardDescription>
      </UiCardHeader>
      <UiCardContent>
        <p>Card Content</p>
      </UiCardContent>
      <UiCardFooter>
        <p>Card Footer</p>
      </UiCardFooter>
    </UiCard>`,
  }),
  parameters: {
    docs: {
      source: {
        code: simpleTemplateSource,
      },
    },
  },
};
