helix-engage/src/components/call-desk/context-panel.tsx

import { useEffect, useState } from "react";
import { faSparkles, faUser } from "@fortawesome/pro-duotone-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Badge } from "@/components/base/badges/badges";
import { useCallAssist } from "@/hooks/use-call-assist";
import { formatPhone, formatShortDate } from "@/lib/format";
import type { Lead, LeadActivity } from "@/types/entities";
import { cx } from "@/utils/cx";
import { AiChatPanel } from "./ai-chat-panel";
import { LiveTranscript } from "./live-transcript";

type ContextTab = "ai" | "lead360";

interface ContextPanelProps {
    selectedLead: Lead | null;
    activities: LeadActivity[];
    callerPhone?: string;
    isInCall?: boolean;
    callUcid?: string | null;
}

export const ContextPanel = ({ selectedLead, activities, callerPhone, isInCall, callUcid }: ContextPanelProps) => {
    const [activeTab, setActiveTab] = useState<ContextTab>("ai");

    // Auto-switch to lead 360 when a lead is selected
    useEffect(() => {
        if (selectedLead) {
            // eslint-disable-next-line react-hooks/set-state-in-effect
            setActiveTab("lead360");
        }
    }, [selectedLead?.id]);

    const {
        transcript,
        suggestions,
        connected: assistConnected,
    } = useCallAssist(isInCall ?? false, callUcid ?? null, selectedLead?.id ?? null, callerPhone ?? null);

    const callerContext = selectedLead
        ? {
              callerPhone: selectedLead.contactPhone?.[0]?.number ?? callerPhone,
              leadId: selectedLead.id,
              leadName: `${selectedLead.contactName?.firstName ?? ""} ${selectedLead.contactName?.lastName ?? ""}`.trim(),
          }
        : callerPhone
          ? { callerPhone }
          : undefined;

    return (
        <div className="flex h-full flex-col">
            {/* Tab bar */}
            <div className="flex shrink-0 border-b border-secondary">
                <button
                    onClick={() => setActiveTab("ai")}
                    className={cx(
                        "flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
                        activeTab === "ai" ? "border-b-2 border-brand text-brand-secondary" : "text-tertiary hover:text-secondary",
                    )}
                >
                    <FontAwesomeIcon icon={faSparkles} className="size-3.5" />
                    AI Assistant
                </button>
                <button
                    onClick={() => setActiveTab("lead360")}
                    className={cx(
                        "flex flex-1 items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-semibold transition duration-100 ease-linear",
                        activeTab === "lead360" ? "border-b-2 border-brand text-brand-secondary" : "text-tertiary hover:text-secondary",
                    )}
                >
                    <FontAwesomeIcon icon={faUser} className="size-3.5" />
                    Lead 360
                </button>
            </div>

            {/* Tab content */}
            <div className="flex-1 overflow-y-auto">
                {activeTab === "ai" &&
                    (isInCall ? (
                        <LiveTranscript transcript={transcript} suggestions={suggestions} connected={assistConnected} />
                    ) : (
                        <div className="flex h-full flex-col p-4">
                            <AiChatPanel callerContext={callerContext} />
                        </div>
                    ))}
                {activeTab === "lead360" && <Lead360Tab lead={selectedLead} activities={activities} />}
            </div>
        </div>
    );
};

const Lead360Tab = ({ lead, activities }: { lead: Lead | null; activities: LeadActivity[] }) => {
    if (!lead) {
        return (
            <div className="flex flex-col items-center justify-center px-4 py-16 text-center">
                <FontAwesomeIcon icon={faUser} className="mb-3 size-8 text-fg-quaternary" />
                <p className="text-sm text-tertiary">Select a lead from the worklist to see their full profile.</p>
            </div>
        );
    }

    const firstName = lead.contactName?.firstName ?? "";
    const lastName = lead.contactName?.lastName ?? "";
    const fullName = `${firstName} ${lastName}`.trim() || "Unknown";
    const phone = lead.contactPhone?.[0];
    const email = lead.contactEmail?.[0]?.address;

    const leadActivities = activities
        .filter((a) => a.leadId === lead.id)
        .sort((a, b) => new Date(b.occurredAt ?? b.createdAt ?? "").getTime() - new Date(a.occurredAt ?? a.createdAt ?? "").getTime())
        .slice(0, 10);

    return (
        <div className="space-y-4 p-4">
            {/* Profile */}
            <div>
                <h3 className="text-lg font-bold text-primary">{fullName}</h3>
                {phone && <p className="text-sm text-secondary">{formatPhone(phone)}</p>}
                {email && <p className="text-xs text-tertiary">{email}</p>}
                <div className="mt-2 flex flex-wrap gap-1.5">
                    {lead.leadStatus && (
                        <Badge size="sm" color="brand">
                            {lead.leadStatus}
                        </Badge>
                    )}
                    {lead.leadSource && (
                        <Badge size="sm" color="gray">
                            {lead.leadSource}
                        </Badge>
                    )}
                    {lead.priority && lead.priority !== "NORMAL" && (
                        <Badge size="sm" color={lead.priority === "URGENT" ? "error" : "warning"}>
                            {lead.priority}
                        </Badge>
                    )}
                </div>
                {lead.interestedService && <p className="mt-2 text-sm text-secondary">Interested in: {lead.interestedService}</p>}
                {lead.leadScore !== null && lead.leadScore !== undefined && <p className="text-xs text-tertiary">Lead score: {lead.leadScore}</p>}
            </div>

            {/* AI Insight */}
            {(lead.aiSummary || lead.aiSuggestedAction) && (
                <div className="rounded-lg bg-brand-primary p-3">
                    <div className="mb-1 flex items-center gap-1.5">
                        <FontAwesomeIcon icon={faSparkles} className="size-3 text-fg-brand-primary" />
                        <span className="text-[10px] font-bold tracking-wider text-brand-secondary uppercase">AI Insight</span>
                    </div>
                    {lead.aiSummary && <p className="text-xs text-primary">{lead.aiSummary}</p>}
                    {lead.aiSuggestedAction && <p className="mt-1 text-xs font-semibold text-brand-secondary">{lead.aiSuggestedAction}</p>}
                </div>
            )}

            {/* Activity timeline */}
            {leadActivities.length > 0 && (
                <div>
                    <h4 className="mb-2 text-xs font-bold text-secondary uppercase">Activity</h4>
                    <div className="space-y-2">
                        {leadActivities.map((a) => (
                            <div key={a.id} className="flex items-start gap-2">
                                <div className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-quaternary" />
                                <div className="min-w-0 flex-1">
                                    <p className="text-xs text-primary">{a.summary}</p>
                                    <p className="text-[10px] text-quaternary">
                                        {a.activityType}
                                        {a.occurredAt ? ` · ${formatShortDate(a.occurredAt)}` : ""}
                                    </p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
};