'use client';

import Link from 'next/link';
import { useParams } from 'next/navigation';
import { ChevronRight, Sparkles } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { usePermissions } from '@/hooks/use-permissions';
import { useOnboardingStatus } from '@/hooks/use-onboarding-status';

/**
 * Compact dashboard tile that surfaces onboarding progress for super_admins
 * while the checklist is incomplete. Collapses (returns null) once setup is
 * 100% complete so the dashboard doesn't stay cluttered after the org is
 * past the initial onboarding phase. Non-super-admin users never see it.
 */
export function OnboardingTile() {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';
  const { isSuperAdmin } = usePermissions();
  const { data, isLoading } = useOnboardingStatus({ enabled: isSuperAdmin });

  if (!isSuperAdmin) return null;
  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-sm">
            <Sparkles className="size-4 text-brand-600" aria-hidden />
            Setup checklist
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Progress value={0} className="h-2" />
        </CardContent>
      </Card>
    );
  }
  if (!data || data.isComplete) return null;

  return (
    <Card className="border-brand-200 bg-brand-50/30">
      <CardHeader className="pb-2">
        <CardTitle className="flex items-center gap-2 text-sm">
          <Sparkles className="size-4 text-brand-600" aria-hidden />
          Setup checklist
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="space-y-1">
          <Progress value={data.percent} className="h-2" />
          <p className="text-xs text-muted-foreground">
            {data.completed} of {data.total} steps complete ({data.percent}%)
          </p>
        </div>
        {data.nextStep ? (
          <div className="rounded-md border border-dashed border-brand-200 bg-white/60 p-2">
            <p className="text-xs font-semibold uppercase tracking-wide text-brand-700">
              Next step
            </p>
            <p className="mt-0.5 text-xs text-foreground">{data.nextStep.label}</p>
          </div>
        ) : null}
        {portSlug ? (
          <Button asChild size="sm" variant="outline" className="w-full">
            <Link
              href={
                (data.nextStep
                  ? `/${portSlug}/admin/${data.nextStep.href}`
                  : `/${portSlug}/admin/onboarding`) as never
              }
            >
              {data.nextStep ? 'Continue setup' : 'Open checklist'}
              <ChevronRight className="ml-1 size-3" aria-hidden />
            </Link>
          </Button>
        ) : null}
      </CardContent>
    </Card>
  );
}
