import type { Meta, StoryObj } from '@storybook/html';
import { Stepper, type StepperOptions } from '@42/core/stepper';
import '@42/styles/stepper.css';
import '@42/styles/button.css';
import '@42/styles/card.css';

const WIZARD_CSS = `
<style>
  .wizard [data-c42-stepper] {
    gap: 1rem;
  }

  .wizard [data-c42-stepper-step] {
    display: block;
    border: 2px solid var(--c42-color-border, #e5e7eb);
    border-radius: var(--c42-radius, 0.75rem);
    padding: 1rem 1.25rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }

  .wizard [data-c42-stepper-step][data-state='current'] {
    border-color: var(--c42-color-accent, #4f46e5);
    box-shadow: 0 0 0 1px var(--c42-color-accent, #4f46e5);
  }

  .wizard [data-c42-stepper-step][data-state='completed'] {
    border-color: var(--c42-color-border, #e5e7eb);
    background: var(--c42-color-surface, #f9fafb);
  }

  .wizard [data-c42-stepper-step][data-state='upcoming'] {
    border-color: var(--c42-color-border, #e5e7eb);
    background: var(--c42-color-surface, #f9fafb);
    opacity: 0.7;
    pointer-events: none;
  }

  .wizard [data-c42-stepper-step][data-state='upcoming'] .step-title {
    color: var(--c42-color-muted, #6b7280);
  }

  .wizard [data-c42-stepper-step][data-state='upcoming'] .step-edit-btn {
    color: var(--c42-color-muted, #6b7280);
    border-color: var(--c42-color-border, #e5e7eb);
  }

  .wizard [data-c42-stepper-step][data-state='upcoming'] .step-panel-content {
    display: none;
  }

  .wizard .step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .wizard .step-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--c42-color-accent, #4f46e5);
  }

  .wizard .step-title .check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--c42-color-accent, #4f46e5);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
  }

  .wizard .step-title .dot {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    border: 2px solid var(--c42-color-accent, #4f46e5);
  }

  .wizard .step-summary {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--c42-color-muted, #6b7280);
  }

  .wizard [data-c42-stepper-step][data-state='completed'] .step-panel-content {
    display: none;
  }

  .wizard [data-c42-stepper-step][data-state='current'] .step-summary {
    display: none;
  }

  .wizard [data-c42-stepper-step][data-state='current'] .step-edit-btn {
    display: none;
  }

  .wizard .step-panel-content {
    margin-top: 1rem;
  }

  .wizard .step-edit-btn {
    font-size: 0.8rem;
    color: var(--c42-color-accent, #4f46e5);
    border: 1px solid var(--c42-color-accent, #4f46e5);
    background: transparent;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
  }

  .wizard .form-group {
    margin-bottom: 1rem;
  }

  .wizard .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    color: var(--c42-color-fg, #1f2937);
  }

  .wizard .form-group input,
  .wizard .form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--c42-color-border, #e5e7eb);
    border-radius: 0.375rem;
    font: inherit;
    font-size: 0.875rem;
    resize: vertical;
  }

  .wizard .form-group .hint {
    font-size: 0.75rem;
    color: var(--c42-color-accent, #4f46e5);
    margin-top: 0.25rem;
  }

  .wizard .step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
</style>
`;

const meta: Meta<StepperOptions> = {
  title: 'Core/Navigation/Stepper/Wizard Cards',
  tags: ['autodocs'],
  argTypes: {
    linear: { control: 'boolean' },
  },
  args: { linear: true },
  render: (args) => {
    const wrapper = document.createElement('div');
    wrapper.classList.add('wizard');
    wrapper.innerHTML = `${WIZARD_CSS}
      <div data-c42-stepper>
        <!-- Step 1: Sender -->
        <div data-c42-stepper-step data-value="sender">
          <div class="step-header">
            <div class="step-title">
              <span class="check" data-c42-stepper-indicator>✓</span>
              <span>Sender</span>
            </div>
            <button class="step-edit-btn" data-c42-stepper-trigger>Edit</button>
          </div>
          <p class="step-summary">Sender: Laravel42</p>
          <div data-c42-stepper-panel>
            <div class="step-panel-content">
              <div class="form-group">
                <label>Sender name</label>
                <input type="text" value="Laravel42" />
              </div>
              <div class="form-group">
                <label>Reply-to email</label>
                <input type="email" placeholder="reply@example.com" />
              </div>
              <div class="step-actions">
                <button class="c42-button" data-next>Next</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 2: Recipients -->
        <div data-c42-stepper-step data-value="recipients">
          <div class="step-header">
            <div class="step-title">
              <span class="check" data-c42-stepper-indicator>✓</span>
              <span>Recipients</span>
            </div>
            <button class="step-edit-btn" data-c42-stepper-trigger>Manage</button>
          </div>
          <p class="step-summary">3 unique recipients</p>
          <div data-c42-stepper-panel>
            <div class="step-panel-content">
              <div class="form-group">
                <label>Mailing list</label>
                <input type="text" placeholder="Select a list or segment..." />
              </div>
              <div class="step-actions">
                <button class="c42-button" data-variant="secondary" data-prev>Back</button>
                <button class="c42-button" data-next>Next</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 3: Subject -->
        <div data-c42-stepper-step data-value="subject">
          <div class="step-header">
            <div class="step-title">
              <span class="dot" data-c42-stepper-indicator></span>
              <span>Subject</span>
            </div>
            <button class="step-edit-btn" data-c42-stepper-trigger>Edit</button>
          </div>
          <p class="step-summary">Add a subject to the campaign</p>
          <div data-c42-stepper-panel>
            <div class="step-panel-content">
              <div class="form-group">
                <label>Subject line</label>
                <textarea rows="2" maxlength="200" placeholder="Write a compelling subject...">Testing</textarea>
              </div>
              <div class="form-group">
                <label>Preheader</label>
                <input type="text" maxlength="50" placeholder="Preview text..." />
                <p class="hint">The preheader is the short summary text that follows the subject line in the inbox.</p>
              </div>
              <div class="step-actions">
                <button class="c42-button" data-variant="secondary" data-prev>Back</button>
                <button class="c42-button" data-next>Next</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Step 4: Content -->
        <div data-c42-stepper-step data-value="content">
          <div class="step-header">
            <div class="step-title">
              <span class="dot" data-c42-stepper-indicator></span>
              <span>Content</span>
            </div>
            <button class="step-edit-btn" data-c42-stepper-trigger>Edit</button>
          </div>
          <p class="step-summary">Design your email body</p>
          <div data-c42-stepper-panel>
            <div class="step-panel-content">
              <div class="form-group">
                <label>Template</label>
                <input type="text" placeholder="Choose a template..." />
              </div>
              <div class="step-actions">
                <button class="c42-button" data-variant="secondary" data-prev>Back</button>
                <button class="c42-button" data-next>Send campaign</button>
              </div>
            </div>
          </div>
        </div>
      </div>`;

    const root = wrapper.querySelector<HTMLElement>('[data-c42-stepper]')!;
    const stepper = new Stepper(root, { ...args, defaultValue: 'subject' });

    // Wire next/prev buttons inside each step panel
    wrapper.querySelectorAll<HTMLElement>('[data-next]').forEach((btn) => {
      btn.addEventListener('click', () => stepper.next());
    });
    wrapper.querySelectorAll<HTMLElement>('[data-prev]').forEach((btn) => {
      btn.addEventListener('click', () => stepper.prev());
    });

    return wrapper;
  },
};

export default meta;

type Story = StoryObj<StepperOptions>;

export const Default: Story = {};
export const FromStart: Story = { args: { defaultValue: 'sender' } };