import React, { useState } from "react";
import { fn } from "@storybook/test";
import { KeyboardShortcuts } from "../components/KeyboardShortCuts";
import { ShortcutModal } from "../components/KeyboardShortCuts/ShortcutModal";
import { TutorialModal } from "../components/KeyboardShortCuts/tutorial";
import { AllSetBox } from "../components/KeyboardShortCuts/allSetBox";
import { Button } from "../components/Button";
import { isMac } from "../utils/shortcuts";
// import filterPanelDemo from "../assets/filterPanelDemo.mov";
// import sidenavDemo from "../assets/sidenavDemo.mov";

export default {
  title: "Components/KeyboardShortcuts",
  component: KeyboardShortcuts,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
    docs: {
      description: {
        component:
          "A multi-step onboarding flow that introduces users to keyboard shortcuts. " +
          "It consists of three sequential views: a **Landing Page** (animated carousel of shortcut previews), " +
          "a **Tutorial Modal** (interactive step-by-step walkthrough), and an **All Set Box** (completion confirmation). " +
          "A separate **Shortcut Modal** provides a full searchable reference of all available shortcuts.",
      },
    },
  },
  argTypes: {
    showLandingPage: {
      description:
        "If true, renders the landing page card with the auto-advancing shortcut carousel and action buttons.",
      control: { type: "boolean" },
      table: {
        defaultValue: { summary: true },
        type: { summary: "boolean" },
      },
    },
    showTutorial: {
      description:
        "If true, renders the interactive tutorial modal that walks users through each shortcut step by step.",
      control: { type: "boolean" },
      table: {
        defaultValue: { summary: false },
        type: { summary: "boolean" },
      },
    },
    showAllSetBox: {
      description:
        'If true, renders the "You\'re All Set!" confirmation box shown after the tutorial is completed.',
      control: { type: "boolean" },
      table: {
        defaultValue: { summary: false },
        type: { summary: "boolean" },
      },
    },
    onRemindMeLater: {
      description:
        'Callback fired when the "Remind me later" button is clicked on the landing page.',
      table: {
        type: { summary: "() => void" },
        defaultValue: { summary: "() => {}" },
      },
    },
  },
  args: {
    onRemindMeLater: fn(),
  },
};

// ---------------------------------------------------------------------------
// Story 1: Landing Page (default)
// ---------------------------------------------------------------------------

export const LandingPage = {
  name: "Landing Page",
  args: {
    showLandingPage: true,
    showTutorial: false,
    showAllSetBox: false,
      // screen2VideoSrc: filterPanelDemo,
      // screen3VideoSrc: sidenavDemo,
  },
  parameters: {
    docs: {
      description: {
        story:
          "The default entry point of the flow. Displays a card with a **New feature** badge, a three-slide auto-advancing carousel showcasing shortcut previews, and footer action buttons. " +
          "The carousel pauses on each slide for its configured duration before automatically advancing. " +
          "Click the dot indicators to manually jump to any slide. " +
          'Clicking **Try Now** moves the user into the interactive tutorial. Clicking **✕** dismisses the card.',
      },
    },
  },
};

// ---------------------------------------------------------------------------
// Story 2: Tutorial Modal
// ---------------------------------------------------------------------------

export const Tutorial = {
  name: "Tutorial Modal",
  args: {
    showLandingPage: false,
    showTutorial: true,
    showAllSetBox: false,
  },
  parameters: {
    docs: {
      description: {
        story:
          "The interactive tutorial tooltip. It overlays the application UI and guides the user through three keyboard shortcuts: " +
          "**⌥F** (open/close filters), **⌥B** (keyboard settings), and **⌥K** (shortcut panel). " +
          "Press each key combo to advance to the next step. A progress indicator tracks completion. " +
          'Clicking **Skip** dismisses the tutorial without completing it.',
      },
    },
  },
};

// ---------------------------------------------------------------------------
// Story 3: All Set Box
// ---------------------------------------------------------------------------

export const AllSet = {
  name: "All Set Box",
  args: {
    showLandingPage: false,
    showTutorial: false,
    showAllSetBox: true,
  },
  parameters: {
    docs: {
      description: {
        story:
          'The completion confirmation box shown after the tutorial is finished. ' +
          'Displays a "You\'re All Set!" message with a celebratory animation and a short description. ' +
          'Clicking **✕** dismisses the box.',
      },
    },
  },
};

// ---------------------------------------------------------------------------
// Story 4: Full Onboarding Flow (interactive demo)
// ---------------------------------------------------------------------------

export const FullFlow = {
  name: "Full Onboarding Flow",
  render: () => <FullFlowDemo />,
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        story:
          "An end-to-end walkthrough of the complete onboarding experience. " +
          'Clicking **Try Now** on the landing page transitions to the tutorial. ' +
          "Completing all three tutorial steps (⌥F → ⌥B → ⌥K) transitions to the All Set box. " +
          'Use **Reset** to restart the flow from the beginning.',
      },
    },
  },
};

function FullFlowDemo() {
  const [showLandingPage, setShowLandingPage] = useState(true);
  const [showTutorial, setShowTutorial] = useState(false);
  const [showAllSetBox, setShowAllSetBox] = useState(false);

  const reset = () => {
    setShowAllSetBox(false);
    setShowTutorial(false);
    setShowLandingPage(true);
  };

  return (
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#f8fafc",
        fontFamily: "sans-serif",
        flexDirection: "column",
        gap: 24,
      }}
    >
      <div
        style={{
          padding: "8px 16px",
          borderRadius: 8,
          backgroundColor: "#1e293b",
          color: "#e2e8f0",
          fontSize: 12,
          display: "flex",
          alignItems: "center",
          gap: 12,
        }}
      >
        <span>
          State:{" "}
          <strong>
            {showLandingPage
              ? "Landing Page"
              : showTutorial
              ? "Tutorial"
              : showAllSetBox
              ? "All Set"
              : "Dismissed"}
          </strong>
        </span>
        <Button
          variant="tertiary"
          onClick={reset}
          style={{ color: "#94a3b8", fontSize: 11 }}
        >
          Reset
        </Button>
      </div>

      <KeyboardShortcuts
        showLandingPage={showLandingPage}
        showTutorial={showTutorial}
        showAllSetBox={showAllSetBox}
        onRemindMeLater={() => setShowLandingPage(false)}
      />
    </div>
  );
}

// ---------------------------------------------------------------------------
// Story 5: Shortcut Modal
// ---------------------------------------------------------------------------

export const ShortcutModalStory = {
  name: "Shortcut Modal",
  render: () => <ShortcutModalDemo />,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        story:
          "A searchable reference panel listing all available keyboard shortcuts grouped into three categories: " +
          "**Navigation**, **Table**, and **View**. " +
          "Type in the search box to filter shortcuts by title or description across all tabs. " +
          "Pressing **Esc** or clicking **✕** closes the modal. " +
          "Triggered in-app via **⌥K**.",
      },
    },
  },
};

function ShortcutModalDemo() {
  const [isOpen, setIsOpen] = useState(false);
  
  const navigationShortcuts = [
    {
      title: "Copy Cells",
      description: "Copy selected cells to clipboard ",
      keys: [isMac ? "⌘" : "Ctrl", "C"],
    },
    {
      title: "Paste cells",
      description: "Paste clipboard Content to Selected cells",
      keys: [isMac ? "⌘" : "Ctrl", "V"],
    },
    {
      title: "Select all rows",
      description: "Select all rows in the table",
      keys: [isMac ? "⌘" : "Ctrl", "A"],
    },
    {
      title: "Copy Cells",
      description: "Copy selected cells to clipboard ",
      keys: [isMac ? "⌘" : "Ctrl", "C"],
    },
    {
      title: "Paste cells",
      description: "Paste clipboard Content to Selected cells",
      keys: [isMac ? "⌘" : "Ctrl", "V"],
    },
    {
      title: "Select all rows",
      description: "Select all rows in the table",
      keys: [isMac ? "⌘" : "Ctrl", "A"],
    },
    {
      title: "Copy Cells",
      description: "Copy selected cells to clipboard ",
      keys: [isMac ? "⌘" : "Ctrl", "C"],
    },
    {
      title: "Paste cells",
      description: "Paste clipboard Content to Selected cells",
      keys: [isMac ? "⌘" : "Ctrl", "V"],
    },
    {
      title: "Select all rows",
      description: "Select all rows in the table",
      keys: [isMac ? "⌘" : "Ctrl", "A"],
    },
  ];
  const tableShortcuts = [
    {
      title: "Copy Cells",
      description: "Copy selected cells to clipboard ",
      keys: [isMac ? "⌘" : "Ctrl", "C"],
    },
    {
      title: "Paste cells",
      description: "Paste clipboard Content to Selected cells",
      keys: [isMac ? "⌘" : "Ctrl", "V"],
    },
    {
      title: "Select all rows",
      description: "Select all rows in the table",
      keys: [isMac ? "⌘" : "Ctrl", "A"],
    },
  ];
  const viewShortcuts = [
    {
      title: "Copy Cells",
      description: "Copy selected cells to clipboard ",
      keys: [isMac ? "⌘" : "Ctrl", "C"],
    },
    {
      title: "Paste cells",
      description: "Paste clipboard Content to Selected cells",
      keys: [isMac ? "⌘" : "Ctrl", "V"],
    },
    {
      title: "Select all rows",
      description: "Select all rows in the table",
      keys: [isMac ? "⌘" : "Ctrl", "A"],
      onClick: () => console.log("Select all rows"),
    },
  ];

  return (
    <div style={{ fontFamily: "sans-serif" }}>
      <Button onClick={() => setIsOpen(true)}>Open Shortcut Modal</Button>
      {isOpen && (
        <ShortcutModal
          setIsShowShortCutModal={setIsOpen}
          open={isOpen}
          shortcutGroups={[
          {
            label: "Navigation",
            value: "opt1",
            data: navigationShortcuts,
          },
          {
            label: "Table",
            value: "opt2",
            data: tableShortcuts,
          },
          {
            label: "View",
            value: "opt3",
            data: viewShortcuts,
          },
        ]}
        />
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Story 6: Tutorial Modal (standalone)
// ---------------------------------------------------------------------------

export const TutorialModalStory = {
  name: "Tutorial Modal (Standalone)",
  render: () => <TutorialModalDemo />,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        story:
          "The tutorial tooltip in isolation. Press **⌥F**, **⌥B**, and **⌥K** in sequence to advance through the three steps. " +
          "Each step shows a loading indicator while processing the shortcut, then automatically advances. " +
          "A progress bar at the bottom tracks how many steps have been completed.",
      },
    },
  },
};

function TutorialModalDemo() {
  const [visible, setVisible] = useState(true);
  const [allSet, setAllSet] = useState(false);

  if (allSet) {
    return (
      <AllSetBox setShowAllSetBoxState={() => { setAllSet(false); setVisible(true); }} />
    );
  }

  if (!visible) {
    return (
      <Button onClick={() => setVisible(true)}>Reopen Tutorial</Button>
    );
  }

  return (
    <TutorialModal
      setShowTutorialModal={setVisible}
      setShowAllSetBoxState={setAllSet}
    />
  );
}

// ---------------------------------------------------------------------------
// Story 7: All Set Box (standalone)
// ---------------------------------------------------------------------------

export const AllSetBoxStory = {
  name: "All Set Box (Standalone)",
  render: () => <AllSetBoxDemo />,
  parameters: {
    layout: "centered",
    docs: {
      description: {
        story:
          'The "You\'re All Set!" confirmation displayed after successfully completing the tutorial. ' +
          "Features a celebratory Lottie animation alongside an encouraging message. " +
          "Clicking **✕** dismisses it.",
      },
    },
  },
};

function AllSetBoxDemo() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <Button onClick={() => setVisible(true)}>Show All Set Box</Button>
    );
  }

  return <AllSetBox setShowAllSetBoxState={setVisible} />;
}
