import {
    ExternalLink,
    Globe,
    Mail,
    MessageSquare,
    ThumbsDown,
    ThumbsUp,
    Timer,
    UserRound,
} from 'lucide-react';
import { useT } from '@/lib/i18n';
import { TagPicker } from './tag-picker';
import type { TagOption } from './tag-picker';

type LeadCard = {
    id: string;
    email: string | null;
    name: string | null;
    phone: string | null;
};

export type ContextPanelProps = {
    visitor: {
        anon: string | null;
        lang: string | null;
        is_returning: boolean;
        page_url: string | null;
    };
    lead: LeadCard | null;
    appliedTags: TagOption[];
    availableTags: TagOption[];
    onAttachTag: (tagId: string) => void;
    onDetachTag: (tagId: string) => void;
    satisfaction: 'positive' | 'negative' | null;
    satisfactionAt: string | null;
    satisfactionComment: string | null;
    sla: {
        label: string;
        value: string;
    } | null;
    conversationStartedAt: string | null;
};

/**
 * Right-rail context for the conversation thread. Mirrors the shape of
 * Intercom / Crisp / Tidio's "user details" sidebar — every signal an
 * operator wants while a chat is live, in the order they look for it.
 *
 * Sections collapse gracefully: a brand-new conversation with no lead,
 * no tags, no rating still renders cleanly. Each section is its own
 * card so the panel doesn't feel like a wall of fields.
 */
export function ConversationContextPanel({
    visitor,
    lead,
    appliedTags,
    availableTags,
    onAttachTag,
    onDetachTag,
    satisfaction,
    satisfactionAt,
    satisfactionComment,
    sla,
    conversationStartedAt,
}: ContextPanelProps) {
    const { t } = useT();

    return (
        <div className="flex flex-col gap-4">
            <Section
                icon={<UserRound className="size-3.5" />}
                title={t('Visitor')}
            >
                <dl className="grid gap-1.5 text-xs">
                    <Row label={t('ID')}>
                        <code className="font-mono">
                            {visitor.anon?.slice(0, 16) ?? t('anonymous')}
                        </code>
                    </Row>
                    {visitor.lang && (
                        <Row label={t('Language')}>
                            {visitor.lang.toUpperCase()}
                        </Row>
                    )}
                    <Row label={t('Status')}>
                        <span className="inline-flex items-center gap-1.5">
                            <span
                                className={`size-1.5 rounded-full ${visitor.is_returning ? 'bg-violet-500' : 'bg-emerald-500'}`}
                            />
                            {visitor.is_returning ? t('Returning') : t('New')}
                        </span>
                    </Row>
                    {conversationStartedAt && (
                        <Row label={t('Started')}>
                            <span title={conversationStartedAt}>
                                {relTime(conversationStartedAt, t)}
                            </span>
                        </Row>
                    )}
                    {visitor.page_url && (
                        <Row label={t('Page')}>
                            <a
                                href={visitor.page_url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex max-w-full items-center gap-1 truncate text-primary hover:underline"
                            >
                                <Globe className="size-3 shrink-0" />
                                <span className="truncate">
                                    {prettyHost(visitor.page_url)}
                                </span>
                                <ExternalLink className="size-3 shrink-0" />
                            </a>
                        </Row>
                    )}
                </dl>
            </Section>

            {lead && (
                <Section
                    icon={<Mail className="size-3.5" />}
                    title={t('Captured lead')}
                >
                    <dl className="grid gap-1.5 text-xs">
                        {lead.email && (
                            <Row label={t('Email')}>
                                <a
                                    href={`mailto:${lead.email}`}
                                    className="font-mono text-primary hover:underline"
                                >
                                    {lead.email}
                                </a>
                            </Row>
                        )}
                        {lead.name && <Row label={t('Name')}>{lead.name}</Row>}
                        {lead.phone && (
                            <Row label={t('Phone')}>
                                <a
                                    href={`tel:${lead.phone}`}
                                    className="font-mono text-primary hover:underline"
                                >
                                    {lead.phone}
                                </a>
                            </Row>
                        )}
                    </dl>
                </Section>
            )}

            <Section
                icon={<MessageSquare className="size-3.5" />}
                title={t('Tags')}
            >
                <TagPicker
                    applied={appliedTags}
                    available={availableTags}
                    onAttach={onAttachTag}
                    onDetach={onDetachTag}
                />
            </Section>

            {satisfaction !== null && (
                <Section
                    icon={
                        satisfaction === 'positive' ? (
                            <ThumbsUp className="size-3.5" />
                        ) : (
                            <ThumbsDown className="size-3.5" />
                        )
                    }
                    title={t('Visitor rating')}
                >
                    <div className="flex flex-col gap-1.5">
                        <div className="flex items-center gap-1.5 text-xs">
                            {satisfaction === 'positive' ? (
                                <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 px-2 py-0.5 font-semibold text-emerald-800">
                                    <ThumbsUp className="size-3" />
                                    {t('Positive')}
                                </span>
                            ) : (
                                <span className="inline-flex items-center gap-1.5 rounded-full bg-red-100 px-2 py-0.5 font-semibold text-red-800">
                                    <ThumbsDown className="size-3" />
                                    {t('Negative')}
                                </span>
                            )}
                            {satisfactionAt && (
                                <span className="text-muted-foreground">
                                    · {relTime(satisfactionAt, t)}
                                </span>
                            )}
                        </div>
                        {satisfactionComment && (
                            <blockquote className="rounded-md border-s-2 border-foreground/20 bg-muted/50 p-2 text-xs text-muted-foreground italic">
                                "{satisfactionComment}"
                            </blockquote>
                        )}
                    </div>
                </Section>
            )}

            {sla && (
                <Section
                    icon={<Timer className="size-3.5" />}
                    title={t('Timing')}
                >
                    <dl className="grid gap-1.5 text-xs">
                        <Row label={sla.label}>{sla.value}</Row>
                    </dl>
                </Section>
            )}
        </div>
    );
}

function Section({
    icon,
    title,
    children,
}: {
    icon: React.ReactNode;
    title: string;
    children: React.ReactNode;
}) {
    return (
        <section className="flex flex-col gap-2 rounded-md border bg-card p-3">
            <h3 className="flex items-center gap-1.5 text-[10px] font-semibold tracking-wider text-muted-foreground uppercase">
                {icon}
                {title}
            </h3>
            {children}
        </section>
    );
}

function Row({
    label,
    children,
}: {
    label: string;
    children: React.ReactNode;
}) {
    return (
        <div className="grid grid-cols-[80px_1fr] items-baseline gap-2">
            <dt className="text-[11px] tracking-wider text-muted-foreground uppercase">
                {label}
            </dt>
            <dd className="min-w-0 truncate">{children}</dd>
        </div>
    );
}

function relTime(
    iso: string,
    t: (key: string, replacements?: Record<string, string | number>) => string,
): string {
    const ms = Date.now() - new Date(iso).getTime();
    const sec = Math.max(1, Math.round(ms / 1000));

    if (sec < 60) {
        return t('just now');
    }

    const min = Math.round(sec / 60);

    if (min < 60) {
        return t(':count m ago', { count: min });
    }

    const hour = Math.round(min / 60);

    if (hour < 24) {
        return t(':count h ago', { count: hour });
    }

    const day = Math.round(hour / 24);

    return t(':count d ago', { count: day });
}

function prettyHost(url: string): string {
    try {
        const u = new URL(url);

        return u.host + u.pathname;
    } catch {
        return url;
    }
}
