import { CheckCircle2, FileSignature, Target } from 'lucide-react';
import { KeyValueGrid, SectionCard } from '@/components/crm/page-header';
import { RichText } from '@/components/crm/rich-text';
import { StatusPill } from '@/components/crm/status-badge';
import { formatDateTime } from '@/lib/format';
import type { TicketShowProps } from '@/types';

/**
 * What came of the ticket, kept apart from the conversation about it.
 *
 * A resolution is not one more thing somebody said — it is the answer the
 * business is left holding: what was done, what kind of thing fixed it, and who
 * put their name to it. So it has one home here, and the activity feed carries
 * a single line pointing at it rather than a second copy of the paragraph.
 *
 * Both halves are shown as they are, including the blank ones. A ticket closed
 * by the old system has words and no outcome type; saying so is more useful
 * than quietly picking a category for it.
 */
export function TicketOutcome({ ticket }: { ticket: TicketShowProps['ticket'] }) {
    const words = ticket.resolution_html;
    const code = ticket.resolution_code;
    const finishedAt = ticket.dates.resolved_at ?? ticket.dates.closed_at;
    const recorded = words !== null || code !== null || finishedAt !== null;

    return (
        <SectionCard
            id="outcome"
            title="The outcome"
            description="What fixed it, what kind of outcome it was, and who signed it off."
            icon={Target}
            tone={recorded ? 'success' : 'slate'}
        >
            {!recorded ? (
                // An open ticket has no outcome, and a large empty state would
                // be the loudest thing on the page for the 700 tickets that
                // have not finished yet.
                <p className="flex items-start gap-2 text-sm text-muted-foreground">
                    <Target className="mt-0.5 size-4 shrink-0" />
                    <span>
                        Nothing yet. The outcome is written when the ticket is
                        finished: what was done, what kind of fix it was, and
                        who signed it off. It stays on the record if the ticket
                        comes back.
                    </span>
                </p>
            ) : (
                <div className="flex flex-col gap-4">
                    <div className="flex flex-wrap items-center gap-2">
                        {code ? (
                            <StatusPill tone={code.color}>
                                {code.label}
                            </StatusPill>
                        ) : (
                            <StatusPill tone="slate">
                                Outcome type not recorded
                            </StatusPill>
                        )}

                        {finishedAt ? (
                            <span className="text-xs text-muted-foreground">
                                {formatDateTime(finishedAt)}
                            </span>
                        ) : null}

                        {ticket.resolved_by ? (
                            <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                                <FileSignature className="size-3.5" />
                                Signed off by{' '}
                                <span className="font-medium text-foreground">
                                    {ticket.resolved_by.name}
                                </span>
                            </span>
                        ) : null}
                    </div>

                    {code ? (
                        <p className="text-xs text-muted-foreground">
                            {code.description}
                        </p>
                    ) : null}

                    {words ? (
                        <div className="rounded-md border-l-2 border-success/60 bg-success-soft/40 px-3 py-2.5">
                            <RichText html={words} />
                        </div>
                    ) : (
                        <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
                            <CheckCircle2 className="size-4" />
                            Finished without the words recorded — add them from
                            the status panel below, and the ticket keeps the
                            answer.
                        </p>
                    )}

                    {!code ? (
                        <KeyValueGrid
                            columns={1}
                            items={[
                                {
                                    label: 'Why the type is blank',
                                    value: (
                                        <span className="text-xs text-muted-foreground">
                                            This ticket was finished before the
                                            outcome was recorded, or by the
                                            system it was imported from. Choose
                                            one below the next time it moves.
                                        </span>
                                    ),
                                },
                            ]}
                        />
                    ) : null}
                </div>
            )}
        </SectionCard>
    );
}