'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { CheckCircle2, Clock } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { db } from '@/lib/queue/db';
import { subscribeBroadcast } from '@/lib/queue/broadcast';

export function SentStatus({ cid }: { cid: string }) {
  const t = useTranslations('maintenance');
  const [inQueue, setInQueue] = useState<boolean | null>(null);

  useEffect(() => {
    async function check() {
      const item = await db.pending.get(cid);
      setInQueue(!!item);
    }
    check();

    const unsub = subscribeBroadcast((msg) => {
      if (msg.type === 'synced' && msg.clientRequestId === cid) setInQueue(false);
      if (msg.type === 'dead-letter' && msg.clientRequestId === cid) setInQueue(false);
    });

    return unsub;
  }, [cid]);

  const pending = inQueue === true;

  return (
    <main className="mx-auto flex min-h-dvh max-w-lg flex-col items-center justify-center gap-6 p-6 text-center">
      <div className="flex flex-col items-center gap-3">
        {pending ? (
          <Clock className="h-16 w-16 text-orange-400" />
        ) : (
          <CheckCircle2 className="h-16 w-16 text-green-500" />
        )}
        <h1 className="text-2xl font-bold">
          {pending ? t('pendingTitle') : t('sentTitle')}
        </h1>
        {cid && (
          <p className="font-mono text-xs text-muted-foreground" data-testid="request-cid">
            {cid}
          </p>
        )}
        <p className="text-sm text-muted-foreground">
          {pending ? t('pendingMessage') : t('sentMessage')}
        </p>
      </div>
      <Link
        href="/"
        className="rounded-xl bg-primary px-8 py-3 font-semibold text-primary-foreground hover:opacity-90"
      >
        {t('backHome')}
      </Link>
    </main>
  );
}