"use client";

import * as React from "react";

import { WhatsNewProvider } from "@/components/product-home/product-home-parts";
import {
  WhatsNewSheet,
  WhatsNewSheetTrigger,
} from "@exxatdesignux/ui/components/ui/whats-new-sheet";

const SAMPLE = {
  id: "preview-ask-leo",
  brandColor: "oklch(0.55 0.18 264)",
  item: {
    title: "Ask Leo in every hub",
    eyebrow: "New in Clinical Education",
    highlights: [
      {
        icon: "fa-sparkles",
        title: "Contextual answers",
        body: "Leo reads the record you have open and cites the fields it used.",
      },
      {
        icon: "fa-keyboard",
        title: "Keyboard first",
        body: "Open from the utility bar or press the Ask Leo chord from any hub.",
      },
    ],
    primaryActionLabel: "Try Ask Leo",
  },
};

function WhatsNewSheetDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {
  const [open, setOpen] = React.useState(defaultOpen);

  return (
    <div className="relative min-h-[22rem] overflow-hidden rounded-lg border border-border bg-muted/20">
      <div className="flex items-center justify-end gap-2 border-b border-border bg-background px-3 py-2">
        <WhatsNewSheetTrigger
          open={open}
          unseenCount={1}
          onOpen={() => setOpen(true)}
        />
      </div>
      <WhatsNewSheet
        open={open}
        onOpenChange={setOpen}
        featured={SAMPLE}
        onDismiss={() => setOpen(false)}
        onPrimaryAction={() => setOpen(false)}
        footerSecondary={
          <button
            type="button"
            className="w-full rounded-md px-3 py-2 text-sm text-muted-foreground hover:bg-muted"
            onClick={() => setOpen(false)}
          >
            Release history
          </button>
        }
      />
      <p className="p-4 text-sm text-muted-foreground">
        Hub content stays live behind the left rail. The hero replays Leo invited
        and the dot burst each time the sheet opens.
      </p>
    </div>
  );
}

export function WhatsNewSheetOpenPreview() {
  return (
    <WhatsNewProvider>
      <WhatsNewSheetDemo defaultOpen />
    </WhatsNewProvider>
  );
}

export function WhatsNewSheetTriggerPreview() {
  return (
    <WhatsNewProvider>
      <WhatsNewSheetDemo />
    </WhatsNewProvider>
  );
}