"use client";

import { useEffect, useState } from "react";
import { FlaskConical, PackagePlus, Trash2, X } from "lucide-react";
import { Alert } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { useAuth } from "../auth/auth-context";
import { openQuickOrder } from "./useQuickOrderForm";
import { useSampleActions } from "./sample-data-card";
import { useOnboarding } from "./useOnboarding";

const DISMISS_KEY = "onboarding.sampleBanner.hidden";

/**
 * "Sample is loud" (design S7): a banner on every page while sample data exists. It can be hidden for this browser
 * session only; it comes back until the sample is removed. Once real orders exist it invites removing the sample.
 */
export function SampleBanner({ sampleStatus }) {
  const { can, organization } = useAuth();
  const loaded = sampleStatus === "loaded";
  const { data } = useOnboarding({ enabled: loaded });
  const actions = useSampleActions();
  const [hidden, setHidden] = useState(true);

  useEffect(() => {
    try {
      setHidden(window.sessionStorage.getItem(DISMISS_KEY) === "1");
    } catch {
      setHidden(false);
    }
  }, []);

  const status = data?.sample.status || sampleStatus;
  if (status !== "loaded" || hidden) return null;
  // "Ready to clear" only once the house has moved on: a real order put in after the sample was loaded.
  const loadedAt = data?.sample.loadedAt ? Date.parse(data.sample.loadedAt) : null;
  const firstRealPoAt = data?.activation?.firstRealPoAt ? Date.parse(data.activation.firstRealPoAt) : null;
  const movedOn = Boolean(loadedAt && firstRealPoAt && firstRealPoAt > loadedAt);
  const realOrders = movedOn ? data?.sample.realPoCount || 0 : 0;
  // From the session, so the action shows before the onboarding state arrives.
  const canManage = Boolean(organization?.isOwner || can("organization.manage") || data?.me.canManage);
  const hide = () => {
    setHidden(true);
    try { window.sessionStorage.setItem(DISMISS_KEY, "1"); } catch { /* session-only anyway */ }
  };

  return <div className="px-4 pt-4 md:px-6 lg:px-8">
    <Alert role="status" className="mx-auto max-w-[1432px] border-info/30 bg-info/5 pr-12 [&>svg]:text-info">
      <FlaskConical />
      <div className="col-start-2 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <p className="text-sm">
          {realOrders > 0
            ? <><span className="font-medium">You have {realOrders} real {realOrders === 1 ? "order" : "orders"} now.</span> Ready to clear the sample?</>
            : <><span className="font-medium">You&apos;re exploring sample data.</span> <span className="text-muted-foreground">Nordvik Apparel and Harbor &amp; Pine are made-up buyers, so click anything; nothing here is real.</span></>}
        </p>
        <div className="flex shrink-0 flex-wrap items-center gap-2">
          {realOrders === 0 && can("purchase_orders.create") && <Button size="sm" onClick={() => openQuickOrder("sample_banner")}><PackagePlus /> Add my own order</Button>}
          {canManage && <Button size="sm" variant={realOrders > 0 ? "default" : "outline"} onClick={actions.remove} disabled={actions.isRemoving}>{actions.isRemoving ? <Spinner /> : <Trash2 />} Remove sample data</Button>}
        </div>
      </div>
      <Button variant="ghost" size="icon-sm" className="absolute right-2 top-2" aria-label="Hide the sample banner for this session" onClick={hide}><X /></Button>
    </Alert>
  </div>;
}