import { AlertTriangle, Clock, Eye, MailCheck, MailOpen, MessageCircle, MousePointerClick, Radio, Send } from 'lucide-react';
import { Link } from '@inertiajs/react';
import type { ReactNode } from 'react';
import { ago } from '@/lib/format';
import { cn } from '@/lib/utils';
import type { QuoteActivitySummary } from '@/types';

/**
 * One-line client activity for a quote in a list: sent → delivered → email opened → clicked → viewed,
 * plus "viewing now", unanswered questions and bounces. Hover a chip for the detail.
 */
export function ActivityCell({ a, status, href }: { a: QuoteActivitySummary | null | undefined; status?: string; href?: string }) {
    if (!a || (a.emails_sent === 0 && a.scheduled === 0 && a.views === 0)) {
        // Quotes sent before tracking (or marked sent by hand) have nothing to show.
        return <span className="text-xs text-ink-muted">{!status || status === 'draft' ? 'Not sent yet' : 'No tracked emails'}</span>;
    }
    if (a.emails_sent === 0 && a.scheduled > 0) {
        return <Chip icon={<Clock className="h-3.5 w-3.5" />} tone="muted" title="Scheduled to send">Scheduled</Chip>;
    }
    const opened = a.email_opens > 0;
    const viewed = a.views > 0;
    return (
        <div className="flex flex-wrap items-center gap-1" data-testid="activity-cell">
            {a.viewing_now && <Chip icon={<Radio className="h-3.5 w-3.5 animate-pulse" />} tone="live" title="The client has the quote open right now">Viewing now</Chip>}
            {a.bounced > 0 && <Chip icon={<AlertTriangle className="h-3.5 w-3.5" />} tone="bad" title={`${a.bounced} email${a.bounced === 1 ? '' : 's'} bounced`}>Bounced</Chip>}
            <Chip icon={a.delivered > 0 ? <MailCheck className="h-3.5 w-3.5" /> : <Send className="h-3.5 w-3.5" />} tone="done"
                title={`${a.emails_sent} email${a.emails_sent === 1 ? '' : 's'} sent${a.delivered ? `, ${a.delivered} delivered` : ''}${a.last_sent_at ? ` · last sent ${ago(a.last_sent_at)}` : ''}`}>
                {a.delivered > 0 ? 'Delivered' : 'Sent'}
            </Chip>
            {(opened || !viewed) && <Chip icon={<MailOpen className="h-3.5 w-3.5" />} tone={opened ? 'done' : 'off'} title={opened ? `Email opened ${a.email_opens} time${a.email_opens === 1 ? '' : 's'}` : 'Email not opened yet'} testId="chip-opened">
                {opened ? `Opened${a.email_opens > 1 ? ` ×${a.email_opens}` : ''}` : 'Not opened'}
            </Chip>}
            {a.clicks > 0 && <Chip icon={<MousePointerClick className="h-3.5 w-3.5" />} tone="done" title={`Clicked a link ${a.clicks} time${a.clicks === 1 ? '' : 's'}`}>Clicked</Chip>}
            <Chip icon={<Eye className="h-3.5 w-3.5" />} tone={viewed ? 'good' : 'off'} testId="chip-viewed"
                title={viewed ? `Viewed ${a.views} time${a.views === 1 ? '' : 's'}${a.pdf_downloads ? `, PDF downloaded ${a.pdf_downloads}×` : ''} · last activity ${ago(a.last_activity_at)}` : 'Quote not viewed yet'}>
                {viewed ? `Viewed${a.views > 1 ? ` ×${a.views}` : ''}` : 'Not viewed'}
            </Chip>
            {a.open_questions > 0 && (href?.endsWith('/edit') && a.question_id
                ? <Link href={`${href}#question-${a.question_id}`} className="rounded-full hover:ring-2 hover:ring-amber-300" data-testid="question-link">
                    <Chip icon={<MessageCircle className="h-3.5 w-3.5" />} tone="warn" title="Open the question to answer it">{a.open_questions} question{a.open_questions === 1 ? '' : 's'} — answer</Chip>
                </Link>
                : <Chip icon={<MessageCircle className="h-3.5 w-3.5" />} tone="warn" title="Questions waiting for an answer">{a.open_questions} question{a.open_questions === 1 ? '' : 's'}</Chip>)}
            {a.last_activity_at && <span className="ml-0.5 whitespace-nowrap text-[11px] text-ink-muted" title="Last client activity">{ago(a.last_activity_at)}</span>}
        </div>
    );
}

const TONES = {
    done: 'bg-accent-soft text-link',
    good: 'bg-green-100 text-green-800',
    live: 'bg-green-600 text-white',
    warn: 'bg-amber-100 text-amber-900',
    bad: 'bg-red-100 text-red-800',
    off: 'bg-stone-100 text-stone-500',
    muted: 'bg-stone-100 text-stone-600',
};

function Chip({ icon, tone, title, children, testId }: { icon: ReactNode; tone: keyof typeof TONES; title: string; children: ReactNode; testId?: string }) {
    return (
        <span className={cn('inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-[11.5px] font-medium', TONES[tone])} title={title} data-testid={testId}>
            {icon}{children}
        </span>
    );
}