import type { Meta, StoryObj } from '@storybook/vue3';
import { ref } from 'vue';
import TitanCard from './TitanCard.vue';
import TitanInput from '../ui/TitanInput.vue';
import TitanDatePicker from '../ui/TitanDatePicker.vue';
import TitanTextarea from '../ui/TitanTextarea.vue';

const meta = {
  component: TitanCard,
  title: 'Layout/TitanCard',
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'system'],
      description: 'Card variant - default (white) or system (translucent)',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: 'default' },
      },
    },
    title: {
      control: 'text',
      description: 'Heading text displayed in the card header',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: undefined },
      },
    },
    logo: {
      control: 'boolean',
      description: 'Whether to show the Titan logo in the top right',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: true },
      },
    },
    class: {
      control: 'text',
      description: 'Additional CSS classes to apply',
      table: {
        type: { summary: 'string' },
        defaultValue: { summary: undefined },
      },
    },
  },
  parameters: {
    backgrounds: {
      default: 'dark-green',
      values: [
        { name: 'dark-green', value: '#003822' },
        { name: 'light', value: '#f9fafb' },
      ],
    },
  },
} satisfies Meta<typeof TitanCard>;

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

/**
 * Default white card variant with logo and heading.
 * This is the primary style used in most contexts.
 */
export const Default: Story = {
  args: {
    variant: 'default',
    title: "Let's start by gathering some basic information for the obituary.",
    logo: true,
  },
  render: (args) => ({
    components: { TitanCard, TitanInput, TitanDatePicker, TitanTextarea },
    setup() {
      const name = ref('');
      const dateOfBirth = ref('');
      const dateOfDeath = ref('');
      const location = ref('');
      const notes = ref('');
      return { args, name, dateOfBirth, dateOfDeath, location, notes };
    },
    template: `
      <TitanCard v-bind="args">
        <div class="space-y-6">
          <div>
            <label class="block text-body-sm font-medium mb-2">NAMES & DATES</label>
            <TitanInput v-model="name" placeholder="Your Loved One's Name" />
          </div>
          <div class="grid grid-cols-2 gap-4">
            <TitanDatePicker v-model="dateOfBirth" label="DOB" />
            <TitanDatePicker v-model="dateOfDeath" label="DOD" />
          </div>
          <div>
            <TitanInput v-model="location" placeholder="Funeral Location" />
          </div>
          <div>
            <TitanTextarea v-model="notes" placeholder="Additional notes" :rows="4" />
          </div>
        </div>
      </TitanCard>
    `,
  }),
};

/**
 * System variant with translucent background and white logo.
 * Used for overlay contexts on dark backgrounds.
 */
export const System: Story = {
  args: {
    variant: 'system',
    title: "Let's start by gathering some basic information for the obituary.",
    logo: true,
  },
  render: (args) => ({
    components: { TitanCard, TitanInput, TitanDatePicker, TitanTextarea },
    setup() {
      const name = ref('');
      const dateOfBirth = ref('');
      const dateOfDeath = ref('');
      const location = ref('');
      const notes = ref('');
      return { args, name, dateOfBirth, dateOfDeath, location, notes };
    },
    template: `
      <TitanCard v-bind="args">
        <div class="space-y-6">
          <div>
            <label class="block text-body-sm font-medium mb-2">NAMES & DATES</label>
            <TitanInput v-model="name" placeholder="Your Loved One's Name" />
          </div>
          <div class="grid grid-cols-2 gap-4">
            <TitanDatePicker v-model="dateOfBirth" label="DOB" />
            <TitanDatePicker v-model="dateOfDeath" label="DOD" />
          </div>
          <div>
            <TitanInput v-model="location" placeholder="Funeral Location" />
          </div>
          <div>
            <TitanTextarea v-model="notes" placeholder="Additional notes" :rows="4" />
          </div>
        </div>
      </TitanCard>
    `,
  }),
};

/**
 * Card without logo for simpler layouts.
 */
export const WithoutLogo: Story = {
  args: {
    variant: 'default',
    title: 'Simple Card Header',
    logo: false,
  },
  render: (args) => ({
    components: { TitanCard },
    setup() {
      return { args };
    },
    template: `
      <TitanCard v-bind="args">
        <p class="text-body-md">
          This card doesn't display the Titan logo in the top right corner.
        </p>
      </TitanCard>
    `,
  }),
};

/**
 * Card without title for custom header layouts.
 */
export const WithoutTitle: Story = {
  args: {
    variant: 'default',
    logo: true,
  },
  render: (args) => ({
    components: { TitanCard },
    setup() {
      return { args };
    },
    template: `
      <TitanCard v-bind="args">
        <p class="text-body-md">
          This card has no title, just content. The logo is still visible in the top right.
        </p>
      </TitanCard>
    `,
  }),
};

/**
 * Card with custom header slot for complex layouts.
 */
export const CustomHeader: Story = {
  args: {
    variant: 'default',
    logo: true,
  },
  render: (args) => ({
    components: { TitanCard },
    setup() {
      return { args };
    },
    template: `
      <TitanCard v-bind="args">
        <template #header>
          <div class="flex items-center justify-between">
            <div>
              <h2 class="font-serif text-heading-md text-titan-green-800">Custom Header</h2>
              <p class="text-body-sm opacity-70 mt-1">With subtitle and custom layout</p>
            </div>
          </div>
        </template>
        <p class="text-body-md">
          This demonstrates using the header slot for complete control over the header area.
        </p>
      </TitanCard>
    `,
  }),
};

/**
 * Card with long content to test overflow and scrolling behavior.
 */
export const LongContent: Story = {
  args: {
    variant: 'default',
    title: 'Card with Extended Content',
    logo: true,
  },
  render: (args) => ({
    components: { TitanCard },
    setup() {
      return { args };
    },
    template: `
      <TitanCard v-bind="args">
        <div class="space-y-4">
          <p class="text-body-md">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <p class="text-body-md">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
          <p class="text-body-md">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          </p>
          <p class="text-body-md">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p class="text-body-md">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
          </p>
        </div>
      </TitanCard>
    `,
  }),
};

/**
 * Minimal content card to test spacing with little content.
 */
export const MinimalContent: Story = {
  args: {
    variant: 'default',
    title: 'Simple Card',
    logo: true,
  },
  render: (args) => ({
    components: { TitanCard },
    setup() {
      return { args };
    },
    template: `
      <TitanCard v-bind="args">
        <p class="text-body-md">Brief message.</p>
      </TitanCard>
    `,
  }),
};

/**
 * Mobile responsive view (320px width).
 */
export const Mobile: Story = {
  args: {
    variant: 'default',
    title: "Let's start by gathering information",
    logo: true,
  },
  parameters: {
    viewport: {
      defaultViewport: 'mobile1',
    },
  },
  render: (args) => ({
    components: { TitanCard, TitanInput, TitanDatePicker },
    setup() {
      const name = ref('');
      const date = ref('');
      return { args, name, date };
    },
    template: `
      <TitanCard v-bind="args">
        <div class="space-y-4">
          <TitanInput v-model="name" placeholder="Name" />
          <TitanDatePicker v-model="date" />
        </div>
      </TitanCard>
    `,
  }),
};

/**
 * Tablet responsive view (768px width).
 */
export const Tablet: Story = {
  args: {
    variant: 'default',
    title: "Let's start by gathering some basic information",
    logo: true,
  },
  parameters: {
    viewport: {
      defaultViewport: 'tablet',
    },
  },
  render: (args) => ({
    components: { TitanCard, TitanInput, TitanDatePicker },
    setup() {
      const firstName = ref('');
      const lastName = ref('');
      const date = ref('');
      return { args, firstName, lastName, date };
    },
    template: `
      <TitanCard v-bind="args">
        <div class="space-y-4">
          <div class="grid grid-cols-2 gap-4">
            <TitanInput v-model="firstName" placeholder="First Name" />
            <TitanInput v-model="lastName" placeholder="Last Name" />
          </div>
          <TitanDatePicker v-model="date" />
        </div>
      </TitanCard>
    `,
  }),
};

/**
 * Interactive playground with all controls.
 * Use the Controls panel to experiment with different prop combinations.
 */
export const Playground: Story = {
  args: {
    variant: 'default',
    title: 'Interactive Card',
    logo: true,
  },
  render: (args) => ({
    components: { TitanCard },
    setup() {
      return { args };
    },
    template: `
      <TitanCard v-bind="args">
        <p class="text-body-md">
          Use the controls panel to customize this card's appearance.
        </p>
      </TitanCard>
    `,
  }),
};