/**
 * Live demo for ui-design-system/ui/merchant-home-dashboard.
 *
 * Labs' Home.tsx (fd8558f, 521 lines) with its seven reads replaced by props:
 * the summary numbers, the activity feed, the site tile, the help videos, the
 * user, the workspace and the navigation model. Rendered inside the shell
 * demo's component so the frame shows the page in its chrome, as the recipe
 * describes. The greeting is a prop so the frame does not depend on the
 * clock; -1 renders as a dash (the `fmt` helper, Home.tsx line 185).
 *
 * The section headings keep the uppercase tracking of the source (recipe
 * Gotchas, against S1 rule 14) because the rebuild shows the page as it ships.
 */
import React from 'react';
import { Link } from 'react-router-dom';
import { defineStates } from '@prima-modules/demo';
import { Shell, type ShellUser, type ShellWorkspace } from '../appshell-navigation/demo';
import { DOMAINS, DomainIcon, type Domain, type DomainId } from '../appshell-navigation/nav';

/* ---- props ----------------------------------------------------------- */

export interface Summary {
  store: { products: number; openOrders: number };
  forms: { active: number; submissions: number };
  insights: { identified: number; total: number };
  bookings: { upcoming: number };
}

export interface ActivityItem {
  id: string;
  who: string;
  what: string;
  amount: number | null;
  domain: DomainId;
  source: string;
  /** Hours ago; the page computes it from an ISO date, the demo fixes it. */
  hoursAgo: number;
}

export interface Video {
  slug: string;
  title: string;
  size_bytes: number;
}

export interface Props {
  greeting: 'Guten Morgen' | 'Guten Tag' | 'Guten Abend';
  user: ShellUser;
  workspace: ShellWorkspace;
  domains: Domain[];
  sum: Summary;
  activity: ActivityItem[];
  emdashSite: { url: string; host: string } | null;
  /** null is loading, [] is the honest empty card. */
  videos: Video[] | null;
  galleryMode?: boolean;
}

/* ---- sample data ------------------------------------------------------ */

const member: ShellUser = { name: 'Mira Keller', email: '[email protected]', isAdmin: false };
const admin: ShellUser = { name: 'Jonas Weber', email: '[email protected]', isAdmin: true };
const workspace: ShellWorkspace = { id: 'ws_1', name: 'Praxis am See', slug: 'praxis-am-see' };

const unknown: Summary = {
  store: { products: -1, openOrders: -1 },
  forms: { active: -1, submissions: -1 },
  insights: { identified: -1, total: -1 },
  bookings: { upcoming: -1 },
};
const zero: Summary = {
  store: { products: 0, openOrders: 0 },
  forms: { active: 0, submissions: 0 },
  insights: { identified: 0, total: 0 },
  bookings: { upcoming: 0 },
};
const populated: Summary = {
  store: { products: 12, openOrders: 3 },
  forms: { active: 4, submissions: 187 },
  insights: { identified: 42, total: 1830 },
  bookings: { upcoming: 7 },
};

const feed: ActivityItem[] = [
  { id: 'l1', who: 'Lea Frei', what: 'ist als Lead eingegangen', amount: null, domain: 'forms', source: 'Kontaktformular', hoursAgo: 0 },
  { id: 'l2', who: 'Noah Brunner', what: 'ist als Lead eingegangen', amount: null, domain: 'forms', source: 'Newsletter', hoursAgo: 3 },
  { id: 'l3', who: 'Sara Meier', what: 'hat eine Bestellung aufgegeben', amount: 240, domain: 'store', source: 'Store', hoursAgo: 5 },
  { id: 'l4', who: 'Tim Huber', what: 'hat einen Termin gebucht', amount: null, domain: 'bookings', source: 'Buchungsseite', hoursAgo: 26 },
  { id: 'l5', who: 'Besucher', what: 'ist als Lead eingegangen', amount: null, domain: 'forms', source: 'Kontaktformular', hoursAgo: 49 },
  { id: 'l6', who: 'Anna Roth', what: 'hat eine Bestellung aufgegeben', amount: 1180, domain: 'store', source: 'Store', hoursAgo: 72 },
];

const videos: Video[] = [
  { slug: 'erste-schritte', title: 'Erste Schritte im Workspace', size_bytes: 24 * 1048576 },
  { slug: 'formulare', title: 'Ein Formular bauen und einbetten', size_bytes: 41 * 1048576 },
  { slug: 'insights', title: 'Das Insights-Snippet installieren', size_bytes: 18 * 1048576 },
];

const base: Props = {
  greeting: 'Guten Tag',
  user: member,
  workspace,
  domains: DOMAINS,
  sum: populated,
  activity: feed,
  emdashSite: null,
  videos,
};

export const states = defineStates<Props>({
  default: { label: 'Populated: numbers, feed, videos', props: base, height: 900, viewport: 1440 },
  'fresh-workspace': { label: 'Fresh workspace: zeros, the empty feed sentence, the "bald verfügbar" card', props: { ...base, sum: zero, activity: [], videos: [] }, height: 900, viewport: 1440 },
  admin: { label: 'Admin: the agency tiles appear', props: { ...base, user: admin }, height: 900, viewport: 1440 },
  loading: { label: 'Before the first settle: dashes on every card, videos loading', props: { ...base, sum: unknown, activity: [], videos: null }, height: 900, viewport: 1440 },
  'with-site': { label: 'Workspace with a site: the filled tile', props: { ...base, emdashSite: { url: 'https://example.com/admin', host: 'example.com' } }, height: 900, viewport: 1440 },
});

/* ---- helpers (Home.tsx lines 44 to 53 and 185) ----------------------- */

/* Grouping is done by hand, not with Intl.NumberFormat('de-CH'): Node's ICU
   emits the ASCII apostrophe as the Swiss grouping separator while Chromium
   emits U+2019, so the server-rendered text and the client's differed and
   three states failed hydration (measured 2026-09-12). U+2019 is what the
   app shows in the browser, so it is the separator here. */
const SEP = '\u2019';
const group = (n: number) => Math.round(Math.abs(n)).toString().replace(/\B(?=(\d{3})+(?!\d))/g, SEP);
const chf = (n: number) => `${n < 0 ? '-' : ''}CHF ${group(n)}`;
const fmt = (n: number) => (n < 0 ? DASH : group(n));
/* The app's placeholder glyph (Home.tsx line 185), written as its code point so the source carries no dash character. */
const DASH = '\u2014';
const timeAgo = (h: number) => {
  if (h < 1) return 'gerade eben';
  if (h < 24) return `vor ${h} Std.`;
  return `vor ${Math.round(h / 24)} Tagen`;
};

/* ---- the page ---------------------------------------------------------- */

function ModuleCard({
  id,
  title,
  to,
  stat,
  statLabel,
  rows,
  live,
}: {
  id: DomainId;
  title: string;
  to: string;
  stat: string;
  statLabel: string;
  rows: { label: string; value: string; warn?: boolean }[];
  live?: boolean;
}) {
  return (
    <Link to={to} className="card p-5 hover:shadow-lift hover:-translate-y-0.5 transition-all group block">
      <div className="flex items-center gap-2.5 mb-3">
        <span className="h-8 w-8 rounded-lg bg-purple-100 text-purple grid place-items-center group-hover:bg-purple group-hover:text-white transition-colors">
          <DomainIcon id={id} className="!w-[18px] !h-[18px]" />
        </span>
        <span className="font-bold text-ink text-[14.5px]">{title}</span>
        {live ? <span className="ml-auto chip bg-success-bg text-success text-[11px]">live</span> : <span className="ml-auto chip bg-ink/5 text-ink-40 text-[11px]">concept</span>}
      </div>
      <div className="text-[24px] font-extrabold tnum text-ink leading-none">{stat}</div>
      <div className="text-[12px] text-ink-40 mt-1">{statLabel}</div>
      <div className="mt-3 pt-3 border-t border-line space-y-1.5">
        {rows.map((r) => (
          <div key={r.label} className="flex items-center justify-between text-[12.5px]">
            <span className="text-ink-60">{r.label}</span>
            <span className={`font-semibold tnum ${r.warn ? 'text-warn' : 'text-ink'}`}>{r.value}</span>
          </div>
        ))}
      </div>
    </Link>
  );
}

function HelpCenterVideos({ videos }: { videos: Video[] | null }) {
  if (videos === null) {
    return <div className="card p-6 text-center text-ink-40 text-[13px]">Videos werden geladen …</div>;
  }
  if (videos.length === 0) {
    return (
      <div className="card p-6 text-center">
        <div className="font-bold text-ink text-[15px]">Video-Anleitungen: bald verfügbar</div>
        <p className="text-ink-60 text-[13.5px] mt-1 max-w-md mx-auto">Kurze Videos, die dir die wichtigsten Bereiche zeigen. Noch in Arbeit.</p>
      </div>
    );
  }
  return (
    <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
      {videos.map((v) => (
        <div key={v.slug} className="card overflow-hidden">
          {/* The app sets a presigned src; the demo has no network, so the element stays empty. */}
          <video controls preload="none" playsInline className="w-full aspect-video bg-ink/90" />
          <div className="px-4 py-3">
            <div className="font-bold text-ink text-[14px]">{v.title}</div>
            <div className="text-[11.5px] text-ink-40 mt-0.5">{Math.round(v.size_bytes / 1048576)} MB · MP4</div>
          </div>
        </div>
      ))}
    </div>
  );
}

export function HomePage({ greeting, user, workspace, domains, sum, activity, emdashSite, videos }: Props) {
  const displayName = user.name.split(' ')[0] || user.email.split('@')[0] || 'da';
  return (
    <div data-gallery-focus="true">
      <div className="mb-7">
        <div className="text-[12px] font-semibold uppercase tracking-[0.14em] text-purple mb-1.5">Workspace</div>
        <h1 className="text-[28px] leading-none font-extrabold tracking-[-0.02em] text-ink">
          {greeting}, {displayName}
        </h1>
        <p className="text-ink-60 mt-2 text-[15px]">Alles aus {workspace.name} an einem Ort.</p>
      </div>

      <section className="mb-8">
        <h2 className="text-[13px] font-semibold uppercase tracking-[0.1em] text-ink-40 mb-3">Schnellzugriff</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2.5">
          {domains
            .filter((d) => d.id !== 'home' && !d.hidden && (!d.adminOnly || user.isAdmin))
            .map((d) => (
              <Link key={d.id} to={d.paths[0]} className="flex items-start gap-2.5 rounded-xl border border-line bg-white px-3.5 py-3 hover:border-purple/40 hover:shadow-lift transition-all group">
                <span className="h-8 w-8 rounded-lg bg-purple-100 text-purple grid place-items-center shrink-0 group-hover:bg-purple group-hover:text-white transition-colors">
                  <DomainIcon id={d.id} className="!w-[18px] !h-[18px]" />
                </span>
                <span className="min-w-0 flex-1">
                  <span className="flex items-center gap-1.5">
                    <span className="text-[13.5px] font-semibold text-ink truncate">{d.label}</span>
                    {d.id === 'prima' && (
                      <span className="shrink-0 rounded-full border border-purple/30 bg-purple-50 px-1.5 py-0.5 text-[9.5px] font-bold uppercase tracking-[0.08em] leading-none text-purple" title="Experimentelle Beta-Funktion">
                        Beta
                      </span>
                    )}
                  </span>
                  {d.blurb && <span className="block text-[11.5px] leading-snug text-ink-60 mt-0.5">{d.blurb}</span>}
                </span>
              </Link>
            ))}
          {emdashSite && (
            <a
              href={emdashSite.url}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-start gap-2.5 rounded-xl border border-purple bg-purple text-white px-3.5 py-3 hover:bg-purple-700 hover:border-purple-700 hover:shadow-lift transition-all group"
            >
              <span className="h-8 w-8 rounded-lg bg-white/15 text-white grid place-items-center shrink-0">
                <DomainIcon id="studio" className="!w-[18px] !h-[18px]" />
              </span>
              <span className="min-w-0 flex-1">
                <span className="block text-[13.5px] font-semibold truncate">CMS-Login</span>
                <span className="block text-[11.5px] leading-snug text-white/75 mt-0.5">{emdashSite.host ? `Zum CMS deiner Website (${emdashSite.host})` : 'Zum CMS deiner Website'}</span>
              </span>
            </a>
          )}
        </div>
      </section>

      <h2 className="text-[13px] font-semibold uppercase tracking-[0.1em] text-ink-40 mb-3">Dashboard-Werte</h2>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 stagger">
        <ModuleCard
          id="store"
          title="Store"
          to="/store"
          live
          stat={fmt(sum.store.products)}
          statLabel="aktive Produkte"
          rows={[
            { label: 'Aktive Produkte', value: fmt(sum.store.products) },
            { label: 'Offene Bestellungen', value: fmt(sum.store.openOrders) },
          ]}
        />
        <ModuleCard
          id="forms"
          title="Forms"
          to="/forms"
          live
          stat={fmt(sum.forms.submissions)}
          statLabel="Einreichungen"
          rows={[
            { label: 'Aktive Formulare', value: fmt(sum.forms.active) },
            { label: 'Einreichungen', value: fmt(sum.forms.submissions) },
          ]}
        />
        <ModuleCard
          id="campaigns"
          title="Campaigns"
          to="/ads"
          live
          stat={DASH}
          statLabel="blended ROAS"
          rows={[
            { label: 'Ausgaben · 30 Tage', value: DASH },
            { label: 'Conversions', value: DASH },
          ]}
        />
        <ModuleCard
          id="bookings"
          title="Bookings"
          to="/calendar"
          live
          stat={fmt(sum.bookings.upcoming)}
          statLabel="bevorstehend"
          rows={[
            { label: 'Bevorstehend', value: fmt(sum.bookings.upcoming) },
            { label: 'No-Show-Rate', value: DASH },
          ]}
        />
        <ModuleCard
          id="insights"
          title="Insights"
          to="/tracking"
          live
          stat={fmt(sum.insights.identified)}
          statLabel="identifizierte Kontakte"
          rows={[
            { label: 'Identifiziert', value: fmt(sum.insights.identified) },
            { label: 'Gesamt gesehen', value: fmt(sum.insights.total) },
          ]}
        />
        <ModuleCard
          id="money"
          title="Money"
          to="/accounting"
          live
          stat={DASH}
          statLabel="ausstehend"
          rows={[
            { label: 'Offene Rechnungen', value: DASH },
            { label: 'MWST fällig', value: DASH },
          ]}
        />
      </div>

      <div className="grid lg:grid-cols-[1.5fr_1fr] gap-6 mt-6">
        <section className="card p-1.5">
          <div className="flex items-center justify-between px-4 pt-3 pb-2">
            <h2 className="font-bold text-ink">Letzte Aktivitäten</h2>
            <Link to="/tracking" className="text-[13px] font-semibold text-purple hover:underline">
              Alle anzeigen
            </Link>
          </div>
          <div>
            {activity.length === 0 && (
              <div className="px-4 py-8 text-center text-ink-40 text-[13px]">Noch keine Aktivitäten. Sie erscheinen hier, sobald Besucher und Leads eingehen.</div>
            )}
            {activity.map((a) => (
              <div key={a.id} className="flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-purple-50/60 transition-colors">
                <span className="h-8 w-8 rounded-lg bg-purple-100 text-purple grid place-items-center shrink-0">
                  <DomainIcon id={a.domain} className="!w-4 !h-4" />
                </span>
                <div className="min-w-0 flex-1">
                  <div className="text-[13.5px] text-ink truncate">
                    <span className="font-semibold">{a.who}</span> {a.what}
                  </div>
                  <div className="text-[12px] text-ink-40">
                    {a.source} · {timeAgo(a.hoursAgo)}
                  </div>
                </div>
                {a.amount !== null && <div className="text-[13px] font-bold tnum text-ink">{chf(a.amount)}</div>}
              </div>
            ))}
          </div>
        </section>

        <section className="card p-5">
          <h2 className="font-bold text-ink mb-1">Benötigt deine Aufmerksamkeit</h2>
          <p className="text-[13px] text-ink-60 mb-4">Aus dem gesamten Workspace zusammengetragen.</p>
          <div className="space-y-2.5">
            <Link to="/forms" className="block rounded-xl border border-line p-3 hover:border-purple/40 transition-colors">
              <div className="flex items-center justify-between gap-2">
                <span className="text-[13.5px] font-semibold text-ink truncate">Veröffentliche dein erstes Formular</span>
                <span className="chip bg-purple-100 text-purple shrink-0">Setup</span>
              </div>
              <div className="text-[12px] text-ink-60">Beginne, Leads von deiner Website zu erfassen</div>
            </Link>
            <Link to="/tracking" className="block rounded-xl border border-line p-3 hover:border-purple/40 transition-colors">
              <div className="flex items-center justify-between gap-2">
                <span className="text-[13.5px] font-semibold text-ink truncate">Installiere das Insights-Snippet</span>
                <span className="chip bg-purple-100 text-purple shrink-0">Setup</span>
              </div>
              <div className="text-[12px] text-ink-60">Sieh, wer dich besucht und was konvertiert</div>
            </Link>
            <div className="rounded-xl border border-line p-3 flex items-center justify-between">
              <span className="text-[13.5px] text-ink">Prüfe deine Buchhaltung</span>
              <Link to="/accounting" className="text-[12px] font-semibold text-purple hover:underline">
                Money
              </Link>
            </div>
          </div>
        </section>
      </div>

      <section className="mt-8">
        <h2 className="text-[13px] font-semibold uppercase tracking-[0.1em] text-ink-40 mb-3">Hilfe-Center</h2>
        <HelpCenterVideos videos={videos} />
      </section>
    </div>
  );
}

export default function Demo(props: Props) {
  return (
    <Shell domains={props.domains} user={props.user} workspaces={[props.workspace]} currentWorkspaceId={props.workspace.id} activePath="/dashboard" hasTour hideChrome={props.galleryMode}>
      <HomePage {...props} />
    </Shell>
  );
}

<Route /dashboard> PrivateRoute > Home            (/home and /workbench redirect here; Dashboard.tsx is an orphan)
  Navigation = AppShell (see appshell-navigation)
    div
      header   "Workspace" overline, h1 "Guten Morgen | Guten Tag | Guten Abend, <first name>", "Alles aus <workspace> an einem Ort."
      section  "Schnellzugriff"   grid 1 / 2 / 4 columns
                 Link.tile x DOMAINS (not home, not hidden, adminOnly only for admins): DomainIcon, label, blurb, "Beta" pill on prima
                 a.tile--filled "EmDash-Login" -> the workspace's first active site admin URL (only when one exists)
      h2       "Dashboard-Werte"  grid 1 / 2 / 3 columns, staggered fade-up
                 ModuleCard x 6: Store (/store), Forms (/forms), Campaigns (/ads), Bookings (/calendar), Insights (/tracking), Money (/accounting)
                   icon, title, "live" | "concept" chip, big number (tnum), label, two rows
      grid     2 : 1
                 section.card "Letzte Aktivitäten" (six most recent leads, or the empty sentence) . "Alle anzeigen" -> /tracking
                 section.card "Benötigt deine Aufmerksamkeit" (three setup links: forms, tracking, accounting)
      section  "Hilfe-Center"  HelpCenterVideos: loading sentence | "bald verfügbar" card | grid of <video> cards