import type { Meta, StoryObj } from "@storybook/react";
import { CookieConsentBanner } from "./cookie-consent-banner";
import type { ActionsRenderProps, HeaderRenderProps } from "./types";

const meta = {
  title: "Organisms/CookieConsentBanner",
  component: CookieConsentBanner,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
} satisfies Meta<typeof CookieConsentBanner>;

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

export const Modal: Story = {
  args: {
    variant: "modal",
    onConsentChange: (states) => console.log("Consent changed", states),
  },
};

export const Banner: Story = {
  args: {
    variant: "banner",
    onConsentChange: (states) => console.log("Consent changed", states),
  },
};

function CustomHeader({ title }: HeaderRenderProps) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <span aria-hidden="true" style={{ fontSize: "1.5rem" }}>
        🍪
      </span>
      <h2
        id="cookie-consent-title"
        style={{ margin: 0, fontSize: "1.25rem", fontWeight: "bold" }}
      >
        {title}
      </h2>
    </div>
  );
}

function CustomActions({
  onRejectAll,
  onAcceptAll,
  onSaveSelected,
}: ActionsRenderProps) {
  const shared: React.CSSProperties = {
    padding: "8px 24px",
    borderRadius: 6,
    fontWeight: 600,
    cursor: "pointer",
    border: "2px solid #333",
    flex: 1,
  };
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: 8,
        paddingTop: 16,
      }}
    >
      <div style={{ display: "flex", gap: 8 }}>
        <button onClick={onRejectAll} style={{ ...shared, background: "#fff" }}>
          ✗ Reject All
        </button>
        <button
          onClick={onAcceptAll}
          style={{ ...shared, background: "#333", color: "#fff" }}
        >
          ✓ Accept All
        </button>
      </div>
      <button
        onClick={onSaveSelected}
        style={{ ...shared, flex: "unset", background: "#eee" }}
      >
        Save my selection
      </button>
    </div>
  );
}

export const WithRenderPropOverrides: Story = {
  args: {
    variant: "modal",
    renderHeader: (props) => <CustomHeader {...props} />,
    renderActions: (props) => <CustomActions {...props} />,
    onConsentChange: (states) => console.log("Consent changed", states),
  },
};

export const A11yTabOrderDemo: Story = {
  name: "A11y — Tab Order Demo",
  args: {
    variant: "modal",
    onConsentChange: (states) => console.log("Consent changed", states),
  },
  parameters: {
    docs: {
      description: {
        story:
          "Tab through the modal: Reject All is focused before Accept All, satisfying CNIL equal-prominence guidance. ESC triggers Reject All semantics.",
      },
    },
  },
};
