import { useMemo, useState, useEffect } from "react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import {
  Loader2,
  Target,
  Clock,
  CheckCircle2,
  Circle,
  CircleDot,
  RotateCcw,
  Stethoscope,
  StickyNote,
  Save,
  XCircle,
  Undo2,
} from "lucide-react";
import { useDismissedActions } from "@/lib/dismissedActions";
import { dailyDismissKey, selfExamDismissKey } from "@/hooks/useActionPlanSummary";
import { AppShell } from "@/components/AppShell";
import { PortfolioPrompt } from "@/components/PortfolioPrompt";
import { PageHeader } from "@/components/PageHeader";
import { BriefingSkeleton } from "@/components/BriefingSkeleton";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Sources } from "@/components/Sources";
import { useBriefing } from "@/hooks/useBriefing";
import { useT } from "@/hooks/useSettings";
import { useAuth } from "@/hooks/useAuth";
import { supabase } from "@/integrations/supabase/client";
import { useActionNotes } from "@/hooks/useActionNotes";
import type { Action } from "@/lib/briefing.functions";
import type { Suggestion } from "@/lib/selfExamination.functions";
import { actionId, summarize, useActionMonitor, type ActionStatus } from "@/lib/actionMonitor";
import { useActionPlanSummary } from "@/hooks/useActionPlanSummary";
import { useCustomActions, type CustomAction } from "@/lib/customActions";
import { Crosshair, X } from "lucide-react";

export const Route = createFileRoute("/actions")({
  head: () => ({
    meta: [
      { title: "Action Plan — The Daily Ledger" },
      {
        name: "description",
        content: "Track your daily moves — to-do, in-progress, done. Three actions, max.",
      },
      { property: "og:title", content: "Action Plan — The Daily Ledger" },
      {
        property: "og:description",
        content: "Track today's three recommended moves and your overall progress.",
      },
    ],
  }),
  component: ActionsPage,
});

function ActionsPage() {
  const { hotel, isAllHotels, core, isHotelLoading, isCoreLoading, coreError, refresh } = useBriefing();
  const error = coreError;
  const briefing = core;
  const isBriefingLoading = isCoreLoading;
  const monitor = useActionMonitor();
  const custom = useCustomActions();
  const t = useT();

  const dismissed = useDismissedActions();
  const allActions = briefing?.actions ?? [];
  const actions = allActions.filter((a) => !dismissed.has(dailyDismissKey(a)));
  const dismissedDaily = allActions.filter((a) => dismissed.has(dailyDismissKey(a)));
  const baseSummary = useMemo(() => summarize(actions, monitor.store), [actions, monitor.store]);
  const planSummary = useActionPlanSummary({ hotelId: hotel?.id ?? null });
  const summary = {
    done: planSummary.done,
    inProgress: planSummary.inProgress,
    todo: planSummary.todo,
    total: planSummary.total || baseSummary.total,
    dismissed: planSummary.dismissed,
    pct: (planSummary.total || baseSummary.total)
      ? Math.round((planSummary.done / (planSummary.total || baseSummary.total)) * 100)
      : 0,
  };

  if (isHotelLoading) {
    return (
      <div className="flex min-h-dvh items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }
  if (isAllHotels || !hotel) return <PortfolioPrompt pageTitle={t("nav.actions")} />;

  return (
    <AppShell hotel={hotel} isLoading={isBriefingLoading} onRefresh={refresh}>
      <PageHeader
        eyebrow={t("actions.eyebrow")}
        title={t("actions.title", { hotel: hotel.hotel_name })}
        subtitle={t("actions.subtitle")}
      />

      {error ? (
        <div className="rounded-2xl border border-destructive/30 bg-destructive/5 p-6 text-sm text-destructive">
          <strong className="font-semibold">{t("actions.error")}</strong>
          <p className="mt-1 text-destructive/80">{(error as Error).message}</p>
          <Button size="sm" variant="outline" className="mt-4" onClick={refresh}>
            {t("common.tryAgain")}
          </Button>
        </div>
      ) : isBriefingLoading || !briefing ? (
        <BriefingSkeleton />
      ) : (
        <>
          <section className="mb-8 rounded-2xl border bg-gradient-to-br from-brand-soft/30 to-card p-6 shadow-[var(--shadow-elegant)] md:p-7">
            <div className="flex flex-wrap items-baseline justify-between gap-3">
              <div>
                <div className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-accent">
                  <Target className="h-3 w-3" /> {t("actions.planMonitor")}
                </div>
                <div className="mt-1 font-serif text-2xl font-medium text-brand">
                  {t("actions.doneOf", { done: summary.done, total: summary.total })}
                </div>
              </div>
              <Button
                size="sm"
                variant="ghost"
                onClick={monitor.reset}
                className="gap-1.5 text-muted-foreground"
              >
                <RotateCcw className="h-3.5 w-3.5" />
                {t("actions.resetProgress")}
              </Button>
            </div>

            <div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-muted">
              <div
                className="h-full rounded-full bg-brand transition-all"
                style={{ width: `${summary.pct}%` }}
              />
            </div>
            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
              <StatPip label={t("status.todo")} count={summary.todo} icon={Circle} />
              <StatPip label={t("status.inProgress")} count={summary.inProgress} icon={CircleDot} />
              <StatPip label={t("status.done")} count={summary.done} icon={CheckCircle2} />
              <StatPip label="Dismissed" count={summary.dismissed} icon={XCircle} />
              <span className="inline-flex items-center gap-1.5">
                Accepted: <span className="font-medium text-foreground">{summary.total}</span>
              </span>
            </div>
          </section>

          <div className="space-y-4">
            {actions.map((a, i) => {
              const id = actionId(a);
              return (
                <ActionCard
                  key={id}
                  index={i + 1}
                  action={a}
                  status={monitor.getStatus(id)}
                  onChange={(s) => monitor.setStatus(id, s)}
                  onDismiss={() => dismissed.dismiss(dailyDismissKey(a))}
                />
              );
            })}
          </div>

          {dismissedDaily.length > 0 && (
            <section className="mt-8 rounded-2xl border border-dashed bg-muted/20 p-4">
              <div className="mb-2 flex items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
                <XCircle className="h-3.5 w-3.5" /> Dismissed today ({dismissedDaily.length})
              </div>
              <ul className="space-y-2">
                {dismissedDaily.map((a) => (
                  <li key={actionId(a)} className="flex items-center justify-between gap-3 text-sm">
                    <span className="line-through text-muted-foreground">{a.title}</span>
                    <Button
                      size="sm"
                      variant="ghost"
                      className="h-7 gap-1 text-xs"
                      onClick={() => dismissed.restore(dailyDismissKey(a))}
                    >
                      <Undo2 className="h-3 w-3" /> Restore
                    </Button>
                  </li>
                ))}
              </ul>
            </section>
          )}

          {(() => {
            const fromChat = custom.items.filter((a) => a.source_label === "From chat");
            const fromCompetitors = custom.items.filter((a) => a.source_label !== "From chat");
            let runningIndex = actions.length;
            return (
              <>
                {fromCompetitors.length > 0 && (
                  <section className="mt-10">
                    <div className="mb-3 flex items-center gap-2">
                      <Crosshair className="h-4 w-4 text-accent" />
                      <h2 className="font-serif text-xl font-medium text-foreground">From competitor focus</h2>
                    </div>
                    <p className="mb-4 text-sm text-muted-foreground">
                      Actions you added while comparing against specific competitors.
                    </p>
                    <div className="space-y-4">
                      {fromCompetitors.map((a) => {
                        runningIndex += 1;
                        return (
                          <CustomActionCard
                            key={a.id}
                            index={runningIndex}
                            action={a}
                            status={monitor.getStatus(a.id)}
                            onChange={(s) => monitor.setStatus(a.id, s)}
                            onRemove={() => custom.remove(a.id)}
                          />
                        );
                      })}
                    </div>
                  </section>
                )}
                {fromChat.length > 0 && (
                  <section className="mt-10">
                    <div className="mb-3 flex items-center gap-2">
                      <Crosshair className="h-4 w-4 text-accent" />
                      <h2 className="font-serif text-xl font-medium text-foreground">From chat with Aria</h2>
                    </div>
                    <p className="mb-4 text-sm text-muted-foreground">
                      Actions you saved while chatting with your copilot.
                    </p>
                    <div className="space-y-4">
                      {fromChat.map((a) => {
                        runningIndex += 1;
                        return (
                          <CustomActionCard
                            key={a.id}
                            index={runningIndex}
                            action={a}
                            status={monitor.getStatus(a.id)}
                            onChange={(s) => monitor.setStatus(a.id, s)}
                            onRemove={() => custom.remove(a.id)}
                          />
                        );
                      })}
                    </div>
                  </section>
                )}
              </>
            );
          })()}

          <SelfExamSuggestionsSection hotelId={hotel.id} />
        </>
      )}
    </AppShell>
  );
}

function CustomActionCard({
  index,
  action,
  status,
  onChange,
  onRemove,
}: {
  index: number;
  action: CustomAction;
  status: ActionStatus;
  onChange: (s: ActionStatus) => void;
  onRemove: () => void;
}) {
  const t = useT();
  const urgencyLabel = t(`urgency.${action.urgency}`);
  const urgencyColor = {
    today: "text-destructive",
    this_week: "text-amber-700",
    this_month: "text-muted-foreground",
  }[action.urgency];
  const statusStyles: Record<ActionStatus, string> = {
    todo: "border-border bg-card",
    in_progress: "border-accent/40 bg-accent/5",
    done: "border-emerald-500/30 bg-emerald-500/5",
  };
  return (
    <article
      className={`rounded-2xl border p-4 shadow-[var(--shadow-elegant)] transition-colors sm:p-5 ${statusStyles[status]}`}
    >
      <div className="flex items-start gap-3 sm:gap-4">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent font-serif text-sm font-medium text-accent-foreground sm:h-9 sm:w-9 sm:text-base">
          {index}
        </div>
        <div className="min-w-0 flex-1">
          <div className="mb-1 flex flex-wrap items-center gap-x-3 gap-y-1">
            <span className="text-[10px] font-medium uppercase tracking-wider text-accent">
              {action.category}
            </span>
            <span
              className={`inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wider ${urgencyColor}`}
            >
              <Clock className="h-3 w-3" /> {urgencyLabel}
            </span>
            <span className="inline-flex items-center gap-1 rounded-full bg-brand-soft/60 px-2 py-0.5 text-[10px] font-medium text-brand">
              <Crosshair className="h-2.5 w-2.5" /> {action.source_label}
            </span>
          </div>
          <h3
            className={`font-serif text-base font-medium leading-snug sm:text-lg ${
              status === "done" ? "text-muted-foreground line-through" : "text-foreground"
            }`}
          >
            {action.title}
          </h3>
          <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{action.why}</p>
        </div>
        <Button size="sm" variant="ghost" className="shrink-0" onClick={onRemove}>
          <X className="h-4 w-4" />
        </Button>
      </div>

      <div className="mt-4 grid w-full grid-cols-3 gap-0.5 rounded-lg border bg-background/60 p-0.5">
        {(
          [
            { v: "todo" as const, label: t("status.todo"), Icon: Circle },
            { v: "in_progress" as const, label: t("status.doing"), Icon: CircleDot },
            { v: "done" as const, label: t("status.done"), Icon: CheckCircle2 },
          ]
        ).map(({ v, label, Icon }) => (
          <button
            key={v}
            onClick={() => onChange(v)}
            className={`inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors ${
              status === v
                ? "bg-brand text-primary-foreground shadow-sm"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Icon className="h-3 w-3 shrink-0" />
            <span className="truncate">{label}</span>
          </button>
        ))}
      </div>
    </article>
  );
}

function StatPip({
  label,
  count,
  icon: Icon,
}: {
  label: string;
  count: number;
  icon: typeof Circle;
}) {
  return (
    <span className="inline-flex items-center gap-1.5">
      <Icon className="h-3.5 w-3.5" />
      {label}: <span className="font-medium text-foreground">{count}</span>
    </span>
  );
}

function ActionCard({
  index,
  action,
  status,
  onChange,
  onDismiss,
}: {
  index: number;
  action: Action;
  status: ActionStatus;
  onChange: (s: ActionStatus) => void;
  onDismiss?: () => void;
}) {
  const t = useT();
  const urgencyLabel = t(`urgency.${action.urgency}`);
  const urgencyColor = {
    today: "text-destructive",
    this_week: "text-amber-700",
    this_month: "text-muted-foreground",
  }[action.urgency];

  const statusStyles: Record<ActionStatus, string> = {
    todo: "border-border bg-card",
    in_progress: "border-accent/40 bg-accent/5",
    done: "border-emerald-500/30 bg-emerald-500/5",
  };

  return (
    <article
      className={`rounded-2xl border p-4 shadow-[var(--shadow-elegant)] transition-colors sm:p-5 ${statusStyles[status]}`}
    >
      <div className="flex items-start gap-3 sm:gap-4">
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-brand font-serif text-sm font-medium text-primary-foreground sm:h-9 sm:w-9 sm:text-base">
          {index}
        </div>
        <div className="min-w-0 flex-1">
          <div className="mb-1 flex flex-wrap items-center gap-x-3 gap-y-1">
            <span className="text-[10px] font-medium uppercase tracking-wider text-accent">
              {action.category}
            </span>
            <span
              className={`inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wider ${urgencyColor}`}
            >
              <Clock className="h-3 w-3" /> {urgencyLabel}
            </span>
          </div>
          <h3
            className={`font-serif text-base font-medium leading-snug sm:text-lg ${
              status === "done" ? "text-muted-foreground line-through" : "text-foreground"
            }`}
          >
            {action.title}
          </h3>
          <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{action.why}</p>
          {action.ezee_solution ? (
            <div
              className={`mt-3 rounded-xl border px-3 py-2.5 text-xs ${
                action.ezee_solution.is_ezee
                  ? "border-brand/30 bg-brand-soft/40"
                  : "border-border bg-muted/40"
              }`}
            >
              <div className="flex flex-wrap items-center gap-1.5">
                <span
                  className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
                    action.ezee_solution.is_ezee
                      ? "bg-brand text-primary-foreground"
                      : "bg-muted text-muted-foreground"
                  }`}
                >
                  {action.ezee_solution.is_ezee ? "Solve with eZee" : "External tool"}
                </span>
                {action.ezee_solution.url ? (
                  <a
                    href={action.ezee_solution.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm font-medium text-brand hover:underline"
                  >
                    {action.ezee_solution.product} ↗
                  </a>
                ) : (
                  <span className="text-sm font-medium text-foreground">
                    {action.ezee_solution.product}
                  </span>
                )}
              </div>
              <p className="mt-1 leading-relaxed text-muted-foreground">
                {action.ezee_solution.how_it_helps}
              </p>
            </div>
          ) : null}
          <Sources items={action.sources} label={t("common.why")} />
        </div>
        {onDismiss ? (
          <Button
            size="sm"
            variant="ghost"
            className="h-7 shrink-0 gap-1 px-2 text-xs text-muted-foreground"
            onClick={onDismiss}
            title="Dismiss this action"
          >
            <XCircle className="h-3.5 w-3.5" /> Dismiss
          </Button>
        ) : null}
      </div>

      <div className="mt-4 grid w-full grid-cols-3 gap-0.5 rounded-lg border bg-background/60 p-0.5">
        {(
          [
            { v: "todo" as const, label: t("status.todo"), Icon: Circle },
            { v: "in_progress" as const, label: t("status.doing"), Icon: CircleDot },
            { v: "done" as const, label: t("status.done"), Icon: CheckCircle2 },
          ]
        ).map(({ v, label, Icon }) => (
          <button
            key={v}
            onClick={() => onChange(v)}
            className={`inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors ${
              status === v
                ? "bg-brand text-primary-foreground shadow-sm"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Icon className="h-3 w-3 shrink-0" />
            <span className="truncate">{label}</span>
          </button>
        ))}
      </div>
    </article>
  );
}

// ===== Self-Examination Suggestions =====

function selfExamActionKey(s: Suggestion, idx: number): string {
  return `selfexam:${s.area}:${idx}:${s.finding.slice(0, 40)}`;
}

function SelfExamSuggestionsSection({ hotelId }: { hotelId: string }) {
  const { user } = useAuth();
  const monitor = useActionMonitor();
  const notes = useActionNotes(hotelId);
  const dismissed = useDismissedActions();

  const q = useQuery({
    queryKey: ["self_exam_suggestions", user?.id, hotelId],
    enabled: !!user && !!hotelId,
    staleTime: 60_000,
    queryFn: async () => {
      const { data, error } = await supabase
        .from("self_examinations")
        .select("suggestions,last_scanned_at")
        .eq("hotel_id", hotelId)
        .order("updated_at", { ascending: false })
        .limit(1)
        .maybeSingle();
      if (error) throw error;
      return data;
    },
  });

  const suggestions = ((q.data?.suggestions as Suggestion[] | undefined) ?? []);
  if (suggestions.length === 0) {
    return (
      <section className="mt-10 rounded-2xl border border-dashed bg-muted/30 p-5 text-sm text-muted-foreground">
        <div className="mb-2 flex items-center gap-2">
          <Stethoscope className="h-4 w-4 text-accent" />
          <h2 className="font-serif text-base font-medium text-foreground">Self-examination suggestions</h2>
        </div>
        Run a self-examination to surface concrete fixes here.{" "}
        <Link to="/self-examination" className="text-brand underline">Start audit →</Link>
      </section>
    );
  }

  return (
    <section className="mt-10">
      <div className="mb-3 flex items-center gap-2">
        <Stethoscope className="h-4 w-4 text-accent" />
        <h2 className="font-serif text-xl font-medium text-foreground">From self-examination</h2>
      </div>
      <p className="mb-4 text-sm text-muted-foreground">
        Concrete improvements from your latest audit. Track progress and add remarks.
      </p>
      <div className="space-y-4">
        {suggestions.map((s, i) => {
          const key = selfExamActionKey(s, i);
          if (dismissed.has(key)) return null;
          return (
            <SelfExamSuggestionCard
              key={key}
              actionKey={key}
              suggestion={s}
              status={monitor.getStatus(key)}
              onChange={(st) => monitor.setStatus(key, st)}
              note={notes.get(key)?.note ?? ""}
              onSaveNote={(n) => (n.trim() ? notes.save(key, n) : notes.remove(key))}
              onDismiss={() => dismissed.dismiss(key)}
            />
          );
        })}
      </div>
      {(() => {
        const dismissedItems = suggestions
          .map((s, i) => ({ s, i, key: selfExamActionKey(s, i) }))
          .filter((x) => dismissed.has(x.key));
        if (!dismissedItems.length) return null;
        return (
          <div className="mt-6 rounded-2xl border border-dashed bg-muted/20 p-4">
            <div className="mb-2 flex items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
              <XCircle className="h-3.5 w-3.5" /> Dismissed ({dismissedItems.length})
            </div>
            <ul className="space-y-2">
              {dismissedItems.map(({ s, key }) => (
                <li key={key} className="flex items-center justify-between gap-3 text-sm">
                  <span className="line-through text-muted-foreground">{s.finding}</span>
                  <Button size="sm" variant="ghost" className="h-7 gap-1 text-xs" onClick={() => dismissed.restore(key)}>
                    <Undo2 className="h-3 w-3" /> Restore
                  </Button>
                </li>
              ))}
            </ul>
          </div>
        );
      })()}
    </section>
  );
}

function SelfExamSuggestionCard({
  actionKey,
  suggestion,
  status,
  onChange,
  note,
  onSaveNote,
  onDismiss,
}: {
  actionKey: string;
  suggestion: Suggestion;
  status: ActionStatus;
  onChange: (s: ActionStatus) => void;
  note: string;
  onSaveNote: (n: string) => void;
  onDismiss?: () => void;
}) {
  const t = useT();
  const [draft, setDraft] = useState(note);
  const [showNote, setShowNote] = useState(!!note);
  useEffect(() => setDraft(note), [note]);

  const sevColor = {
    critical: "text-destructive",
    improve: "text-amber-700",
    polish: "text-muted-foreground",
  }[suggestion.severity];

  const statusStyles: Record<ActionStatus, string> = {
    todo: "border-border bg-card",
    in_progress: "border-accent/40 bg-accent/5",
    done: "border-emerald-500/30 bg-emerald-500/5",
  };

  return (
    <article className={`rounded-2xl border p-4 shadow-[var(--shadow-elegant)] sm:p-5 ${statusStyles[status]}`}>
      <div className="mb-1.5 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
          <span className="text-[10px] font-medium uppercase tracking-wider text-accent">
            {suggestion.area}
          </span>
          <span className={`text-[10px] font-medium uppercase tracking-wider ${sevColor}`}>
            {suggestion.severity}
          </span>
        </div>
        {onDismiss ? (
          <Button size="sm" variant="ghost" className="h-7 gap-1 px-2 text-xs text-muted-foreground" onClick={onDismiss}>
            <XCircle className="h-3.5 w-3.5" /> Dismiss
          </Button>
        ) : null}
      </div>
      <h3 className={`font-serif text-base font-medium leading-snug sm:text-lg ${
        status === "done" ? "text-muted-foreground line-through" : "text-foreground"
      }`}>
        {suggestion.finding}
      </h3>
      <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
        {suggestion.recommendation}
      </p>
      <Sources items={suggestion.sources} label="Why" />

      {showNote ? (
        <div className="mt-3 space-y-2">
          <Textarea
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            placeholder="Add a remark, owner, or follow-up date…"
            rows={2}
          />
          <div className="flex gap-2">
            <Button size="sm" onClick={() => { onSaveNote(draft); setShowNote(!!draft.trim()); }} className="gap-1.5">
              <Save className="h-3.5 w-3.5" /> Save note
            </Button>
            <Button size="sm" variant="ghost" onClick={() => { setDraft(note); setShowNote(!!note); }}>
              Cancel
            </Button>
          </div>
        </div>
      ) : (
        <Button size="sm" variant="ghost" onClick={() => setShowNote(true)} className="mt-3 gap-1.5 text-muted-foreground">
          <StickyNote className="h-3.5 w-3.5" /> Add remark
        </Button>
      )}

      <div className="mt-4 grid w-full grid-cols-3 gap-0.5 rounded-lg border bg-background/60 p-0.5">
        {([
          { v: "todo" as const, label: t("status.todo"), Icon: Circle },
          { v: "in_progress" as const, label: t("status.doing"), Icon: CircleDot },
          { v: "done" as const, label: t("status.done"), Icon: CheckCircle2 },
        ]).map(({ v, label, Icon }) => (
          <button
            key={v}
            onClick={() => onChange(v)}
            className={`inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md px-2 py-1.5 text-[11px] font-medium transition-colors ${
              status === v ? "bg-brand text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <Icon className="h-3 w-3 shrink-0" />
            <span className="truncate">{label}</span>
          </button>
        ))}
      </div>
    </article>
  );
}