'use client';

import { useState } from 'react';
import { defineStory, useSelect } from '@djangocfg/playground';
import { Button, Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-core/components';
import { Tour, useTour } from './index';
import type { Tour as TourConfig } from './types';

export default defineStory({
  title: 'Tools/Tour',
  component: Tour,
  description: 'Onboarding tours with spotlight highlighting and keyboard navigation.',
});

// Demo tours
const demoTours: TourConfig[] = [
  {
    id: 'basic',
    steps: [
      {
        id: 'welcome',
        target: '[data-tour-step-id="header"]',
        title: 'Welcome to the Demo',
        content: 'This tour will show you the main features of this page.',
        position: 'bottom',
      },
      {
        id: 'sidebar',
        target: '[data-tour-step-id="sidebar"]',
        title: 'Navigation Sidebar',
        content: 'Use this sidebar to navigate between different sections.',
        position: 'right',
      },
      {
        id: 'content',
        target: '[data-tour-step-id="main-content"]',
        title: 'Main Content Area',
        content: 'This is where all your content will be displayed.',
        position: 'top',
      },
      {
        id: 'actions',
        target: '[data-tour-step-id="action-button"]',
        title: 'Quick Actions',
        content: 'Click here to perform quick actions.',
        position: 'left',
      },
    ],
  },
  {
    id: 'cards',
    defaults: {
      spotlightPadding: 12,
    },
    steps: [
      {
        id: 'step-1',
        target: '[data-tour-step-id="card-1"]',
        title: 'First Card',
        content: 'This card shows important information.',
        position: 'bottom',
      },
      {
        id: 'step-2',
        target: '[data-tour-step-id="card-2"]',
        title: 'Second Card',
        content: 'Another important card with different data.',
        position: 'bottom',
      },
      {
        id: 'step-3',
        target: '[data-tour-step-id="card-3"]',
        title: 'Third Card',
        content: 'The last card in this row.',
        position: 'bottom',
        nextLabel: 'Complete Tour',
      },
    ],
  },
];

// Demo component with tour targets
function DemoLayout() {
  const { start, isActive, currentStepIndex, totalSteps } = useTour();

  return (
    <div className="min-h-[500px] rounded-lg bg-muted/30 p-4">
      {/* Header */}
      <header
        data-tour-step-id="header"
        className="mb-4 rounded-lg bg-primary p-4 text-primary-foreground"
      >
        <div className="flex items-center justify-between">
          <h1 className="text-xl font-bold">Tour Demo</h1>
          <div className="flex gap-2">
            <Button
              variant="secondary"
              size="sm"
              onClick={() => start('basic')}
              disabled={isActive}
            >
              Basic Tour
            </Button>
            <Button
              variant="secondary"
              size="sm"
              onClick={() => start('cards')}
              disabled={isActive}
            >
              Cards Tour
            </Button>
          </div>
        </div>
      </header>

      <div className="flex gap-4">
        {/* Sidebar */}
        <aside
          data-tour-step-id="sidebar"
          className="w-48 rounded-lg bg-card p-4 shadow"
        >
          <nav className="space-y-2">
            <div className="rounded bg-muted p-2 text-sm">Dashboard</div>
            <div className="rounded p-2 text-sm hover:bg-muted">Settings</div>
            <div className="rounded p-2 text-sm hover:bg-muted">Profile</div>
            <div className="rounded p-2 text-sm hover:bg-muted">Help</div>
          </nav>
        </aside>

        {/* Main content */}
        <main className="flex-1 space-y-4">
          <div
            data-tour-step-id="main-content"
            className="rounded-lg bg-card p-6 shadow"
          >
            <h2 className="mb-4 text-lg font-semibold">Main Content</h2>
            <p className="text-muted-foreground">
              This is the main content area.
              {isActive && (
                <span className="ml-2 text-primary">
                  (Step {currentStepIndex + 1} of {totalSteps})
                </span>
              )}
            </p>

            <Button data-tour-step-id="action-button" className="mt-4">
              Quick Action
            </Button>
          </div>

          {/* Cards row */}
          <div className="grid grid-cols-3 gap-4">
            <Card data-tour-step-id="card-1">
              <CardHeader>
                <CardTitle className="text-base">Card 1</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">First card content.</p>
              </CardContent>
            </Card>

            <Card data-tour-step-id="card-2">
              <CardHeader>
                <CardTitle className="text-base">Card 2</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">Second card content.</p>
              </CardContent>
            </Card>

            <Card data-tour-step-id="card-3">
              <CardHeader>
                <CardTitle className="text-base">Card 3</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">Third card content.</p>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </div>
  );
}

export const Interactive = () => {
  const [progressVariant] = useSelect('progressVariant', {
    options: ['dots', 'bar', 'fraction', 'none'] as const,
    defaultValue: 'dots',
    label: 'Progress Variant',
  });

  return (
    <Tour
      tours={demoTours}
      progressVariant={progressVariant}
      onStart={(id) => console.log('Tour started:', id)}
      onComplete={(id) => console.log('Tour completed:', id)}
      onSkip={(id, step) => console.log('Tour skipped:', id, 'at step', step)}
      onStepChange={(index, step, direction) =>
        console.log('Step:', index, step.id, direction)
      }
    >
      <DemoLayout />
    </Tour>
  );
};

export const WithProgressBar = () => (
  <Tour tours={demoTours} progressVariant="bar">
    <DemoLayout />
  </Tour>
);

export const WithFraction = () => (
  <Tour tours={demoTours} progressVariant="fraction">
    <DemoLayout />
  </Tour>
);

export const NoSpotlight = () => (
  <Tour tours={demoTours} spotlight={false}>
    <DemoLayout />
  </Tour>
);

export const CloseOnOverlayClick = () => (
  <Tour tours={demoTours} closeOnOverlayClick>
    <DemoLayout />
  </Tour>
);

export const NoSkipButton = () => (
  <Tour tours={demoTours} showSkipButton={false}>
    <DemoLayout />
  </Tour>
);

export const WithArrow = () => (
  <Tour tours={demoTours} showArrow>
    <DemoLayout />
  </Tour>
);

export const WithBlur = () => (
  <Tour tours={demoTours} spotlightBlur={4} spotlightOpacity={0.3}>
    <DemoLayout />
  </Tour>
);

export const WithArrowAndBlur = () => (
  <Tour tours={demoTours} showArrow spotlightBlur={3} spotlightOpacity={0.4}>
    <DemoLayout />
  </Tour>
);

export const WithPulseRing = () => (
  <Tour tours={demoTours} pulseRing>
    <DemoLayout />
  </Tour>
);

export const NoAnimation = () => (
  <Tour tours={demoTours} animated={false}>
    <DemoLayout />
  </Tour>
);

export const FullFeatured = () => (
  <Tour
    tours={demoTours}
    showArrow
    spotlightBlur={2}
    spotlightOpacity={0.4}
    pulseRing
  >
    <DemoLayout />
  </Tour>
);
