QR-master/src/components/dashboard/OnboardingChecklist.tsx

'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { ArrowRight, Check, QrCode, Sparkles, X } from 'lucide-react';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { Card, CardContent } from '@/components/ui/Card';
import {
  getChecklistItems,
  ONBOARDING_CHECKLIST_DISMISS_KEY,
} from '@/lib/revops';

type OnboardingChecklistProps = {
  state: {
    signupSourceSelfReported?: string | null;
    primaryUseCase?: string | null;
    firstQrCreatedAt?: string | null;
    firstDynamicQrAt?: string | null;
    firstScanAt?: string | null;
    activationAt?: string | null;
  } | null;
};

export function OnboardingChecklist({ state }: OnboardingChecklistProps) {
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    setDismissed(localStorage.getItem(ONBOARDING_CHECKLIST_DISMISS_KEY) === '1');
  }, []);

  if (!state || state.firstScanAt || dismissed) {
    return null;
  }

  const items = getChecklistItems(state);
  const completed = items.filter((item) => item.done).length;
  const progress = Math.round((completed / items.length) * 100);

  return (
    <Card className="overflow-hidden rounded-[28px] border border-slate-200 bg-gradient-to-br from-white via-slate-50 to-blue-50 p-0 shadow-lg shadow-slate-200/60">
      <div className="border-b border-slate-200/80 bg-slate-950 px-6 py-6 text-white">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="max-w-2xl">
            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-white/80">
              <Sparkles className="h-3.5 w-3.5" />
              Activation path
            </div>
            <h3 className="mt-4 text-2xl font-semibold tracking-tight text-white">Get to your first result faster</h3>
            <p className="mt-3 text-sm leading-7 text-slate-300">
              Finish the onboarding checklist to unlock a cleaner dashboard state and move from setup into real usage.
            </p>
          </div>
          <div className="flex items-center gap-3">
            <Badge className="border border-white/10 bg-white/10 px-3 py-1 text-white" variant="default">
              {completed}/{items.length} done
            </Badge>
            <button
              type="button"
              aria-label="Dismiss onboarding checklist"
              className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/10 text-white/80 transition hover:text-white"
              onClick={() => {
                localStorage.setItem(ONBOARDING_CHECKLIST_DISMISS_KEY, '1');
                setDismissed(true);
              }}
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        </div>

        <div className="mt-5 h-2 overflow-hidden rounded-full bg-white/10">
          <div
            className="h-full rounded-full bg-gradient-to-r from-primary-400 via-cyan-300 to-emerald-300 transition-all duration-300"
            style={{ width: `${progress}%` }}
          />
        </div>
      </div>

      <CardContent className="space-y-5 p-6">
        <div className="grid gap-3 md:grid-cols-2">
          {items.map((item) => (
            <div
              key={item.id}
              className={`rounded-[22px] border p-4 transition-colors ${
                item.done
                  ? 'border-emerald-200 bg-emerald-50'
                  : 'border-slate-200 bg-white'
              }`}
            >
              <div className="flex items-start gap-3">
                <div
                  className={`flex h-10 w-10 items-center justify-center rounded-2xl ${
                    item.done ? 'bg-emerald-500 text-slate-950' : 'bg-slate-100 text-slate-500'
                  }`}
                >
                  {item.done ? <Check className="h-4 w-4" /> : <QrCode className="h-4 w-4" />}
                </div>
                <div className="min-w-0">
                  <p className={`text-sm font-semibold ${item.done ? 'text-emerald-900' : 'text-slate-900'}`}>
                    {item.label}
                  </p>
                  <p className="mt-1 text-sm leading-6 text-slate-600">
                    {item.done ? 'Completed and saved in your setup state.' : 'Still pending. Finish this to move closer to activation.'}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="flex flex-col gap-3 sm:flex-row">
          <Link href="/onboarding" className="block">
            <Button className="h-11 rounded-2xl px-5 text-sm font-semibold">
              Continue onboarding
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </Link>
          <Button
            variant="outline"
            className="h-11 rounded-2xl border-slate-300 px-5 text-sm font-semibold"
            onClick={() => {
              localStorage.setItem(ONBOARDING_CHECKLIST_DISMISS_KEY, '1');
              setDismissed(true);
            }}
          >
            Dismiss
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}