import type { Meta, StoryObj } from '@storybook/react';
import { Typography } from './Typography';

const meta: Meta<typeof Typography> = {
  title: 'Atoms/Typography',
  component: Typography,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/3t6fpT5inh7zzjxQdW8U5p/Design-System---Template?node-id=23-30',
    },
  },
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'displayHero',
        'display1',
        'display2',
        'display3',
        'displaySm',
        'h1',
        'h2',
        'h3',
        'h4',
        'h5',
        'h6',
        'bodyLg',
        'body1',
        'body2',
        'bodyXs',
        'labelLg',
        'label',
        'labelSm',
        'caption',
        'captionSm',
        'overline',
        'overlineSm',
      ],
      description: 'Typography variant — 21 variants across 6 categories',
      table: { defaultValue: { summary: 'body1' } },
    },
    color: {
      control: 'select',
      options: ['textPrimary', 'textSecondary', 'textDisabled', 'primary', 'secondary', 'error'],
    },
    maxLines: { control: 'number' },
    gutterBottom: { control: 'boolean' },
  },
};

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

const SAMPLE = 'Discover, Explore, and Plan Funerals in Minutes, Not Hours';

// ─── Default ────────────────────────────────────────────────────────────────

export const Default: Story = {
  args: {
    children:
      'Funeral Arranger helps families find transparent, affordable funeral services across Australia.',
  },
};

// ─── Display (Noto Serif SC, Regular) ───────────────────────────────────────

/** 5 display levels — Noto Serif SC Regular. For hero/marketing text. All scale down on mobile. */
export const Display: Story = {
  name: 'Display (Serif)',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          displayHero — 80px
        </Typography>
        <Typography variant="displayHero">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          display1 — 64px
        </Typography>
        <Typography variant="display1">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          display2 — 52px
        </Typography>
        <Typography variant="display2">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          display3 — 40px
        </Typography>
        <Typography variant="display3">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          displaySm — 32px
        </Typography>
        <Typography variant="displaySm">{SAMPLE}</Typography>
      </div>
    </div>
  ),
};

// ─── Headings (Montserrat, Bold) ────────────────────────────────────────────

/** 6 heading levels — Montserrat Bold. For content structure. All scale down on mobile. */
export const Headings: Story = {
  name: 'Headings (Sans-serif)',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          h1 — 36px
        </Typography>
        <Typography variant="h1">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          h2 — 30px
        </Typography>
        <Typography variant="h2">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          h3 — 24px
        </Typography>
        <Typography variant="h3">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          h4 — 20px
        </Typography>
        <Typography variant="h4">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          h5 — 18px
        </Typography>
        <Typography variant="h5">{SAMPLE}</Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          h6 — 16px
        </Typography>
        <Typography variant="h6">{SAMPLE}</Typography>
      </div>
    </div>
  ),
};

// ─── Body (Montserrat, Medium) ──────────────────────────────────────────────

/** 4 body sizes — Montserrat Medium (500). For content text. */
export const Body: Story = {
  name: 'Body Text',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 640 }}>
      <div>
        <Typography variant="overline" gutterBottom>
          bodyLg — 18px
        </Typography>
        <Typography variant="bodyLg">
          Planning a funeral is one of the most difficult tasks a family faces. Funeral Arranger is
          here to help you navigate this process with care and transparency.
        </Typography>
      </div>
      <div>
        <Typography variant="overline" gutterBottom>
          body1 (default) — 16px
        </Typography>
        <Typography variant="body1">
          Compare funeral directors in your area, view transparent pricing, and make informed
          decisions at your own pace. Every family deserves clarity during this time.
        </Typography>
      </div>
      <div>
        <Typography variant="overline" gutterBottom>
          body2 (small) — 14px
        </Typography>
        <Typography variant="body2">
          Prices shown are indicative and may vary based on your specific requirements. Contact the
          funeral director directly for a detailed quote.
        </Typography>
      </div>
      <div>
        <Typography variant="overline" gutterBottom>
          bodyXs — 12px
        </Typography>
        <Typography variant="bodyXs">
          Terms and conditions apply. Funeral Arranger is a comparison service and does not directly
          provide funeral services. ABN 12 345 678 901.
        </Typography>
      </div>
    </div>
  ),
};

// ─── Label, Caption, Overline ───────────────────────────────────────────────

/** UI text variants — labels (medium 500), captions (regular 400), overlines (semibold 600 uppercase) */
export const UIText: Story = {
  name: 'UI Text (Label / Caption / Overline)',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          labelLg — 16px medium
        </Typography>
        <Typography variant="labelLg" display="block">
          Form label or section label
        </Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          label — 14px medium
        </Typography>
        <Typography variant="label" display="block">
          Default form label
        </Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          labelSm — 12px medium
        </Typography>
        <Typography variant="labelSm" display="block">
          Compact label or tag text
        </Typography>
      </div>
      <div style={{ marginTop: 8 }}>
        <Typography variant="captionSm" color="textSecondary">
          caption — 12px regular
        </Typography>
        <Typography variant="caption" display="block">
          Fine print, timestamps, metadata
        </Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          captionSm — 11px regular
        </Typography>
        <Typography variant="captionSm" display="block">
          Compact metadata, footnotes
        </Typography>
      </div>
      <div style={{ marginTop: 8 }}>
        <Typography variant="captionSm" color="textSecondary">
          overline — 12px semibold uppercase
        </Typography>
        <Typography variant="overline" display="block">
          Section overline
        </Typography>
      </div>
      <div>
        <Typography variant="captionSm" color="textSecondary">
          overlineSm — 11px semibold uppercase
        </Typography>
        <Typography variant="overlineSm" display="block">
          Compact overline
        </Typography>
      </div>
    </div>
  ),
};

// ─── Colours ────────────────────────────────────────────────────────────────

export const Colours: Story = {
  name: 'Colours',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Typography color="textPrimary">Text Primary — main body text (neutral.800)</Typography>
      <Typography color="textSecondary">Text Secondary — helper text (neutral.600)</Typography>
      <Typography color="textDisabled">Text Disabled — inactive (neutral.400)</Typography>
      <Typography color="primary">Primary — brand emphasis (brand.600)</Typography>
      <Typography color="secondary">Secondary — neutral emphasis (neutral.600)</Typography>
      <Typography color="error">Error — validation errors (red.600)</Typography>
      <Typography color="warning.main">Warning — cautionary (amber.600)</Typography>
      <Typography color="success.main">Success — confirmations (green.600)</Typography>
      <Typography color="info.main">Info — helpful tips (blue.600)</Typography>
    </div>
  ),
};

// ─── Font Families ──────────────────────────────────────────────────────────

/** The two font families: serif for display, sans-serif for everything else */
export const FontFamilies: Story = {
  name: 'Font Families',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div>
        <Typography variant="overline" gutterBottom>
          Display font — Noto Serif SC (Regular 400)
        </Typography>
        <Typography variant="display3">Warm, trustworthy, and professional</Typography>
        <Typography variant="caption" color="textSecondary" sx={{ mt: 1 }}>
          Used exclusively for display variants (hero through sm). Regular weight — serif carries
          inherent visual weight at large sizes.
        </Typography>
      </div>
      <div>
        <Typography variant="overline" gutterBottom>
          Body font — Montserrat
        </Typography>
        <Typography variant="h3" gutterBottom>
          Clean, modern, and highly readable
        </Typography>
        <Typography>
          Used for all headings (h1–h6), body text, labels, captions, and UI elements. Headings use
          Bold (700), body uses Medium (500), captions use Regular (400).
        </Typography>
      </div>
    </div>
  ),
};

// ─── Max Lines ──────────────────────────────────────────────────────────────

export const MaxLines: Story = {
  name: 'Max Lines (Truncation)',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 400 }}>
      <div>
        <Typography variant="label" gutterBottom>
          maxLines=1
        </Typography>
        <Typography maxLines={1}>
          H. Parsons Funeral Directors — trusted by Australian families for over 30 years, providing
          compassionate and transparent funeral services.
        </Typography>
      </div>
      <div>
        <Typography variant="label" gutterBottom>
          maxLines=2
        </Typography>
        <Typography maxLines={2}>
          H. Parsons Funeral Directors — trusted by Australian families for over 30 years, providing
          compassionate and transparent funeral services across metropolitan and regional areas.
        </Typography>
      </div>
    </div>
  ),
};

// ─── Realistic Content ──────────────────────────────────────────────────────

export const RealisticContent: Story = {
  name: 'Realistic Content',
  render: () => (
    <div style={{ maxWidth: 640, display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Typography variant="overline">Funeral planning</Typography>
      <Typography variant="display3">Compare funeral services in your area</Typography>
      <Typography variant="bodyLg" color="textSecondary">
        Transparent pricing and service comparison to help you make informed decisions during a
        difficult time.
      </Typography>
      <Typography variant="h2" sx={{ mt: 2 }}>
        How it works
      </Typography>
      <Typography>
        Enter your suburb or postcode to find funeral directors near you. Each listing includes a
        full price breakdown, service inclusions, and reviews from families who have used their
        services.
      </Typography>
      <Typography variant="h3" sx={{ mt: 1 }}>
        Step 1: Browse packages
      </Typography>
      <Typography>
        Compare packages side by side. Each package clearly shows what is and isn't included, so
        there are no surprises.
      </Typography>
      <Typography variant="caption" color="textSecondary" sx={{ mt: 2 }}>
        Prices are indicative and current as of March 2026. Contact the funeral director for a
        binding quote.
      </Typography>
    </div>
  ),
};

// ─── Complete Scale ─────────────────────────────────────────────────────────

/** All 21 variants in a single view — matches the Figma "Fonts - Desktop" layout */
export const CompleteScale: Story = {
  name: 'Complete Scale (All 21 Variants)',
  render: () => {
    const variants = [
      { variant: 'displayHero', label: 'display/hero — 80px' },
      { variant: 'display1', label: 'display/1 — 64px' },
      { variant: 'display2', label: 'display/2 — 52px' },
      { variant: 'display3', label: 'display/3 — 40px' },
      { variant: 'displaySm', label: 'display/sm — 32px' },
      { variant: 'h1', label: 'heading/1 — 36px' },
      { variant: 'h2', label: 'heading/2 — 30px' },
      { variant: 'h3', label: 'heading/3 — 24px' },
      { variant: 'h4', label: 'heading/4 — 20px' },
      { variant: 'h5', label: 'heading/5 — 18px' },
      { variant: 'h6', label: 'heading/6 — 16px' },
      { variant: 'bodyLg', label: 'body/lg — 18px' },
      { variant: 'body1', label: 'body/md — 16px' },
      { variant: 'body2', label: 'body/sm — 14px' },
      { variant: 'bodyXs', label: 'body/xs — 12px' },
      { variant: 'labelLg', label: 'label/lg — 16px' },
      { variant: 'label', label: 'label/md — 14px' },
      { variant: 'labelSm', label: 'label/sm — 12px' },
      { variant: 'caption', label: 'caption/md — 12px' },
      { variant: 'captionSm', label: 'caption/sm — 11px' },
      { variant: 'overline', label: 'overline/md — 12px' },
      { variant: 'overlineSm', label: 'overline/sm — 11px' },
    ] as const;

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {variants.map(({ variant, label }) => (
          <div key={variant} style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
            <Typography
              variant="captionSm"
              color="textSecondary"
              sx={{ width: 160, flexShrink: 0, textAlign: 'right' }}
            >
              {label}
            </Typography>
            <Typography variant={variant}>{SAMPLE}</Typography>
          </div>
        ))}
      </div>
    );
  },
};