'use client';

import { useQuery } from '@tanstack/react-query';
import { format } from 'date-fns';
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import { Spinner } from '@/components/ui/spinners';
import { fetchUserTimeline } from '@/network/apis/dashboard/marketing-analytics/marketing-analytics.apis';
import { eventLabel, ROLE_LABELS, roleBadgeClass } from '../labels';

const when = (iso: string | null | undefined, pattern = 'd MMM yyyy, HH:mm') => {
  if (!iso) return '—';
  const d = new Date(iso);
  return isNaN(d.getTime()) ? '—' : format(d, pattern);
};

/**
 * One person's whole history, newest first.
 *
 * This is the half of the feature Google Analytics cannot provide: GA4 is
 * aggregate by design and its terms forbid sending it anything that identifies
 * a person, so "what did this specific creator do after signing up" has to be
 * answered from our own records.
 */
export function UserJourneySheet({
  userId,
  onClose,
}: {
  userId: number | null;
  onClose: () => void;
}) {
  const { data, isLoading } = useQuery({
    queryKey: ['analytics', 'timeline', userId],
    queryFn: () => fetchUserTimeline(userId as number),
    enabled: !!userId,
  });

  return (
    <Sheet open={!!userId} onOpenChange={(open) => !open && onClose()}>
      <SheetContent className="w-full sm:max-w-xl overflow-y-auto">
        {isLoading || !data ? (
          <div className="flex justify-center py-16">
            <Spinner className="h-6 w-6" />
          </div>
        ) : (
          <div className="space-y-5">
            <SheetHeader>
              <SheetTitle className="text-base">
                {data.user.name ?? `User #${data.user.id}`}
              </SheetTitle>
              <div className="flex items-center gap-2 pt-1">
                <span
                  className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border ${roleBadgeClass(data.user.role)}`}
                >
                  {ROLE_LABELS[data.user.role]}
                </span>
                <span className="text-xs text-muted-foreground">
                  {data.user.email}
                </span>
              </div>
            </SheetHeader>

            <div className="grid grid-cols-2 gap-3">
              {[
                { label: 'Registered', value: when(data.user.registered_at, 'd MMM yyyy') },
                { label: 'Email verified', value: when(data.user.email_verified_at, 'd MMM yyyy') },
                { label: 'Events', value: data.summary.total_events.toLocaleString() },
                { label: 'Last seen', value: when(data.summary.last_seen) },
              ].map((item) => (
                <div key={item.label} className="rounded-lg border p-3">
                  <p className="text-xs text-muted-foreground">{item.label}</p>
                  <p className="text-sm font-medium mt-0.5">{item.value}</p>
                </div>
              ))}
            </div>

            <div>
              <p className="text-sm font-semibold mb-3">Activity</p>
              {data.activities.length === 0 ? (
                <p className="text-sm text-muted-foreground py-6 text-center">
                  Nothing recorded for this account yet.
                </p>
              ) : (
                <ol className="relative border-s ps-4 space-y-4">
                  {data.activities.map((a) => (
                    <li key={a.id} className="relative">
                      {/* The dot sits on the rail, hence the negative inset. */}
                      <span className="absolute -start-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
                      <p className="text-sm font-medium">{eventLabel(a.event)}</p>
                      <p className="text-xs text-muted-foreground">
                        {when(a.occurred_at)}
                        {a.actor && ` · by ${a.actor.name}`}
                      </p>
                      {a.properties && Object.keys(a.properties).length > 0 && (
                        <p className="text-xs text-muted-foreground mt-1 break-words">
                          {Object.entries(a.properties)
                            .filter(([, v]) => v !== null && v !== '')
                            .map(([k, v]) => `${k.replace(/_/g, ' ')}: ${v}`)
                            .join(' · ')}
                        </p>
                      )}
                    </li>
                  ))}
                </ol>
              )}
            </div>
          </div>
        )}
      </SheetContent>
    </Sheet>
  );
}