import { Badge } from "@bosunkit/components/badge";
import { Button } from "@bosunkit/components/button";
import { DescriptionList, type DescriptionListItem } from "@bosunkit/components/description-list";
import { PageHeader } from "@bosunkit/components/page-header";
import { Download, Plus } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "The logbook's header over a scrolling page: label, title and a long subtitle, a context bar of badges and " +
  "actions, and the header staying at the top as the watch entries scroll under it.";

interface LogEntry {
  readonly time: string;
  readonly text: string;
}

const ENTRIES: readonly LogEntry[] = [
  { time: "00:00", text: "Watch handed from Tomás to Maya. Course 302°T, 6.4 kn under main and genoa." },
  { time: "00:40", text: "Cabo de Palos light abeam to port, 11 NM. Bearing steady." },
  { time: "01:15", text: "Wind backing southwest, 18 kn. Reefed the main to the first reef." },
  { time: "02:00", text: "Position 37°18.4′N 000°41.2′W. Log 1 412.6 NM. Baro 1008 hPa, falling slowly." },
  { time: "02:30", text: "AIS: tanker Nordic Aurora crossing ahead, CPA 1.8 NM at 02:52. No action needed." },
  { time: "03:10", text: "Engine on to charge the house bank, 38 % state of charge. 1 800 rpm." },
  { time: "03:50", text: "Engine off. House bank 61 %. Sea temperature 21.8 °C." },
  { time: "04:00", text: "Watch handed from Maya to Ingrid. All well." },
];

/** The watch entries as terms and values: each time beside what was logged. */
const LOG: readonly DescriptionListItem[] = ENTRIES.map((entry: LogEntry): DescriptionListItem => ({
  id: entry.time,
  term: entry.time,
  value: entry.text,
}));

function ignore(): void {
  // The example adds and exports nothing.
}

export default function Showcase(): ReactElement {
  return (
    <div
      style={{
        width: "100%",
        height: 320,
        overflowY: "auto",
        border: "1px solid var(--border)",
        borderRadius: "var(--radius-md)",
        padding: "0 var(--space-lg) var(--space-lg)",
      }}
    >
      <PageHeader
        eyebrow="bosun.bot · SV Althea"
        title="Logbook"
        subtitle="Passage from Palma de Mallorca to Gibraltar, day 2 of 4. Every entry is in UTC."
        sticky
        contextBar={
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "var(--space-sm)",
              flexWrap: "wrap",
              padding: "var(--space-sm) 0 var(--space-md)",
              borderBottom: "1px solid var(--border)",
            }}
          >
            <Badge variant="green">Underway</Badge>
            <Badge variant="blue">Maya Lindqvist on watch</Badge>
            <Badge variant="amber">Baro falling</Badge>
            <span style={{ flex: 1 }} />
            <Button size="sm" variant="ghost" onClick={ignore}>
              <Download size={14} />
              Export
            </Button>
            <Button size="sm" variant="primary" onClick={ignore}>
              <Plus size={14} />
              Add entry
            </Button>
          </div>
        }
      />
      <div style={{ paddingTop: "var(--space-md)" }}>
        <DescriptionList items={LOG} />
      </div>
    </div>
  );
}

import { PageHeader } from "@bosunkit/components/page-header";
import type { ReactElement } from "react";

export const description: string = "A label above a title, the least a page header holds.";

export default function Title(): ReactElement {
  return <PageHeader eyebrow="bosun.bot" title="Settings" />;
}

import { PageHeader } from "@bosunkit/components/page-header";
import type { ReactElement } from "react";

export const description: string = "A subtitle beside the title, saying what the page is for.";

export default function WithSubtitle(): ReactElement {
  return <PageHeader eyebrow="bosun.bot" title="Settings" subtitle="Vessel profile and configuration." />;
}

import { Badge } from "@bosunkit/components/badge";
import { PageHeader } from "@bosunkit/components/page-header";
import type { ReactElement } from "react";

export const description: string =
  "A header that stays at the top while the page scrolls, with a badge in the bar under the title.";

export default function Sticky(): ReactElement {
  return (
    <PageHeader
      eyebrow="bosun.bot"
      title="Spoken media"
      subtitle="Offline podcasts and chapter-aware audiobooks."
      sticky
      contextBar={<Badge variant="amber">Podcast offline</Badge>}
    />
  );
}