import { useState, useMemo } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useNavigate } from 'react-router-dom';
import { smsCallApi } from '../api/smsCall';
import type { SmsMessage, CallRecord, LeadTouchpoint, LeadMetrics } from '../types';
import { AppLayout } from '../components/layout/AppLayout';
import { PageLoader } from '../components/ui/LoadingSpinner';
import {
MessageSquare,
Phone,
PhoneIncoming,
PhoneOutgoing,
PhoneMissed,
PhoneCall,
Clock,
Send,
ArrowLeft,
AlertOctagon,
CheckCircle,
XCircle,
ChevronDown,
ChevronUp,
Calendar,
AlertTriangle,
Loader2,
Search,
} from 'lucide-react';
/* ─── Helpers ──────────────────────────────────────────────────── */
const DISPOSITION_CONFIG: Record<string, { label: string; color: string; icon: React.ReactNode }> = {
connected: { label: 'Connected', color: 'bg-emerald-100 text-emerald-700', icon: <PhoneCall className="h-3 w-3" /> },
voicemail: { label: 'Voicemail', color: 'bg-amber-100 text-amber-700', icon: <PhoneCall className="h-3 w-3" /> },
no_answer: { label: 'No Answer', color: 'bg-red-100 text-red-700', icon: <PhoneMissed className="h-3 w-3" /> },
busy: { label: 'Busy', color: 'bg-orange-100 text-orange-700', icon: <PhoneMissed className="h-3 w-3" /> },
appointment_set: { label: 'Appt Set', color: 'bg-blue-100 text-blue-700', icon: <Calendar className="h-3 w-3" /> },
};
const CHANNEL_ICONS: Record<string, React.ReactNode> = {
sms: <MessageSquare className="h-3.5 w-3.5" />,
call: <Phone className="h-3.5 w-3.5" />,
email: <Send className="h-3.5 w-3.5" />,
web: <Search className="h-3.5 w-3.5" />,
};
const KEYWORD_BADGES: Record<string, { label: string; color: string }> = {
STOP: { label: 'STOP', color: 'bg-red-100 text-red-700' },
YES: { label: 'YES', color: 'bg-emerald-100 text-emerald-700' },
CALL_ME: { label: 'CALL ME', color: 'bg-amber-100 text-amber-700' },
};
function formatDuration(seconds: number | null): string {
if (!seconds) return '—';
const m = Math.floor(seconds / 60);
const s = seconds % 60;
return `${m}:${s.toString().padStart(2, '0')}`;
}
function formatTime(iso: string): string {
const d = new Date(iso);
return d.toLocaleString('en-US', {
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
hour12: true,
});
}
/* ─── Tab: Unified Timeline ───────────────────────────────────── */
function TimelineView({ leadId }: { leadId: string }) {
const { data, isLoading } = useQuery({
queryKey: ['lead-timeline', leadId],
queryFn: () => smsCallApi.getLeadTimeline(leadId),
});
if (isLoading) return <PageLoader />;
const touchpoints = data?.touchpoints ?? [];
if (touchpoints.length === 0) {
return (
<div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
<Clock className="h-12 w-12 text-surface-300" />
<p className="mt-4 text-sm font-medium text-surface-700">No activity yet</p>
<p className="mt-1 text-xs text-surface-500">Messages, calls, and emails will appear here.</p>
</div>
);
}
// Group by date
const grouped = useMemo(() => {
const map = new Map<string, LeadTouchpoint[]>();
for (const tp of touchpoints) {
const date = new Date(tp.created_at).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
if (!map.has(date)) map.set(date, []);
map.get(date)!.push(tp);
}
return Array.from(map.entries());
}, [touchpoints]);
return (
<div className="space-y-6">
{grouped.map(([date, items]) => (
<div key={date}>
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wider text-surface-400">{date}</h3>
<div className="space-y-3">
{items.map((tp) => {
const channel = tp.touchpoint_type.split('_')[0] as string;
const icon = CHANNEL_ICONS[channel] ?? <Search className="h-3.5 w-3.5" />;
const isOutbound = tp.direction === 'outbound';
const isInbound = tp.direction === 'inbound';
return (
<div
key={tp.id}
className="flex gap-3 rounded-lg border border-surface-200 bg-white p-4"
>
{/* Icon */}
<div className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full ${
isOutbound ? 'bg-blue-100 text-blue-600' :
isInbound ? 'bg-emerald-100 text-emerald-600' :
'bg-surface-100 text-surface-500'
}`}>
{icon}
</div>
{/* Content */}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase ${
isOutbound ? 'bg-blue-50 text-blue-600' :
isInbound ? 'bg-emerald-50 text-emerald-600' :
'bg-surface-100 text-surface-500'
}`}>
{tp.direction}
</span>
<span className="text-xs text-surface-400">{formatTime(tp.created_at)}</span>
</div>
{tp.content && (
<p className="mt-1.5 text-sm text-surface-700 line-clamp-2">{tp.content}</p>
)}
<p className="mt-1 text-xs text-surface-400">
{tp.touchpoint_type.replace(/_/g, ' ')}
{tp.reference_id && ` · ${tp.reference_id.slice(0, 8)}`}
</p>
</div>
</div>
);
})}
</div>
</div>
))}
</div>
);
}
/* ─── Tab: SMS Conversation ───────────────────────────────────── */
function SmsConversationView({ leadId }: { leadId: string }) {
const [message, setMessage] = useState('');
const [phone, setPhone] = useState('');
const queryClient = useQueryClient();
const { data, isLoading } = useQuery({
queryKey: ['messages', leadId],
queryFn: () => smsCallApi.listMessages({ lead_id: leadId }),
});
const sendMutation = useMutation({
mutationFn: (payload: { to_phone: string; body: string; lead_id?: string }) =>
smsCallApi.sendSms(payload),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['messages'] });
queryClient.invalidateQueries({ queryKey: ['lead-timeline'] });
setMessage('');
},
});
const messages = data?.messages ?? [];
const handleSend = (e: React.FormEvent) => {
e.preventDefault();
if (!message.trim() || !phone.trim() || sendMutation.isPending) return;
sendMutation.mutate({ to_phone: phone, body: message, lead_id: leadId });
};
if (isLoading) return <PageLoader />;
return (
<div className="flex flex-col gap-4">
{/* Phone input */}
<div className="flex gap-2">
<input
type="tel"
value={phone}
onChange={(e) => setPhone(e.target.value)}
placeholder="Phone number (E.164)"
className="flex-1 rounded-lg border border-surface-300 px-3 py-2 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
/>
</div>
{/* Messages */}
{messages.length === 0 ? (
<div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
<MessageSquare className="h-12 w-12 text-surface-300" />
<p className="mt-4 text-sm font-medium text-surface-700">No messages yet</p>
</div>
) : (
<div className="space-y-3">
{messages.map((msg) => {
const isOutbound = msg.direction === 'outbound';
const badge = msg.keyword_flag && KEYWORD_BADGES[msg.keyword_flag];
return (
<div
key={msg.id}
className={`flex ${isOutbound ? 'justify-end' : 'justify-start'}`}
>
<div className={`max-w-md rounded-lg px-4 py-3 ${
isOutbound
? 'bg-brand-600 text-white'
: 'bg-white border border-surface-200 text-surface-800'
}`}>
{/* Keyword badge */}
{badge && (
<span className={`mb-1 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold ${badge.color}`}>
{badge.label}
</span>
)}
{/* Message body */}
<p className="text-sm">{msg.body}</p>
{/* Meta */}
<div className={`mt-1 flex items-center gap-2 text-[10px] ${
isOutbound ? 'text-brand-200' : 'text-surface-400'
}`}>
<span>{formatTime(msg.created_at)}</span>
<span>·</span>
<span className="capitalize">{msg.status}</span>
{msg.keyword_flag && <span>·</span>}
</div>
</div>
</div>
);
})}
</div>
)}
{/* Send form */}
<form onSubmit={handleSend} className="flex gap-2">
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
placeholder="Type a message..."
className="flex-1 rounded-lg border border-surface-300 px-3 py-2 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
/>
<button
type="submit"
disabled={!message.trim() || !phone.trim() || sendMutation.isPending}
className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
>
{sendMutation.isPending ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<>
<Send className="h-4 w-4" />
Send
</>
)}
</button>
</form>
</div>
);
}
/* ─── Tab: Call Log ───────────────────────────────────────────── */
function CallLogView({ leadId }: { leadId: string }) {
const [notes, setNotes] = useState('');
const [selectedCallId, setSelectedCallId] = useState<string | null>(null);
const [disposition, setDisposition] = useState('');
const [showForm, setShowForm] = useState(false);
const queryClient = useQueryClient();
const { data, isLoading } = useQuery({
queryKey: ['calls', leadId],
queryFn: () => smsCallApi.listCalls({ lead_id: leadId }),
});
const dispositionMutation = useMutation({
mutationFn: ({ callId, disposition }: { callId: string; disposition: string }) =>
smsCallApi.updateCallDisposition(callId, disposition),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['calls'] });
queryClient.invalidateQueries({ queryKey: ['lead-timeline'] });
setSelectedCallId(null);
setDisposition('');
setNotes('');
setShowForm(false);
},
});
const calls = data?.calls ?? [];
if (isLoading) return <PageLoader />;
if (calls.length === 0) {
return (
<div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
<Phone className="h-12 w-12 text-surface-300" />
<p className="mt-4 text-sm font-medium text-surface-700">No calls logged</p>
<p className="mt-1 text-xs text-surface-500">Outbound calls will appear here.</p>
</div>
);
}
return (
<div className="space-y-4">
{calls.map((call) => {
const config = DISPOSITION_CONFIG[call.disposition] ?? {
label: call.disposition || 'Unknown',
color: 'bg-surface-100 text-surface-500',
icon: <Phone className="h-3 w-3" />,
};
return (
<div
key={call.id}
className="rounded-lg border border-surface-200 bg-white p-4"
>
<div className="flex items-start justify-between">
<div className="flex gap-3">
{/* Icon */}
<div className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full ${
call.disposition === 'connected' ? 'bg-emerald-100 text-emerald-600' :
call.disposition === 'voicemail' ? 'bg-amber-100 text-amber-600' :
'bg-red-100 text-red-600'
}`}>
{call.direction === 'outbound' ? <PhoneOutgoing className="h-4 w-4" /> : <PhoneIncoming className="h-4 w-4" />}
</div>
{/* Info */}
<div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-surface-900">{call.to_phone}</span>
<span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold ${config.color}`}>
{config.icon}
{config.label}
</span>
</div>
<div className="mt-1 flex items-center gap-3 text-xs text-surface-400">
<span>{formatTime(call.created_at)}</span>
<span>Duration: {formatDuration(call.duration_seconds)}</span>
<span className="capitalize">{call.direction}</span>
</div>
</div>
</div>
{/* Update disposition button */}
<button
onClick={() => {
setSelectedCallId(call.id);
setDisposition(call.disposition || '');
setShowForm(true);
}}
className="rounded-md p-2 text-surface-400 hover:text-brand-600 hover:bg-brand-50 transition-colors"
title="Update disposition"
>
<PhoneCall className="h-4 w-4" />
</button>
</div>
{/* Inline disposition form */}
{showForm && selectedCallId === call.id && (
<div className="mt-3 flex flex-col gap-2 border-t border-surface-100 pt-3">
<select
value={disposition}
onChange={(e) => setDisposition(e.target.value)}
className="rounded-lg border border-surface-300 px-3 py-2 text-sm outline-none focus:border-brand-500"
>
<option value="">Select disposition...</option>
{Object.entries(DISPOSITION_CONFIG).map(([key, val]) => (
<option key={key} value={key}>{val.label}</option>
))}
</select>
<textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
placeholder="Add notes..."
rows={2}
className="rounded-lg border border-surface-300 px-3 py-2 text-sm outline-none focus:border-brand-500 resize-none"
/>
<div className="flex gap-2">
<button
onClick={() => {
dispositionMutation.mutate({ callId: call.id, disposition });
}}
disabled={dispositionMutation.isPending || !disposition}
className="rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
>
{dispositionMutation.isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : 'Save'}
</button>
<button
onClick={() => { setShowForm(false); setDisposition(''); setNotes(''); }}
className="rounded-lg border border-surface-300 px-3 py-1.5 text-sm text-surface-600 hover:bg-surface-50"
>
Cancel
</button>
</div>
</div>
)}
</div>
);
})}
</div>
);
}
/* ─── Speed-to-Lead Metrics Card ──────────────────────────────── */
function SpeedToLeadMetrics({ leadId }: { leadId: string }) {
const { data, isLoading } = useQuery({
queryKey: ['lead-metrics', leadId],
queryFn: () => smsCallApi.getLeadMetrics(leadId),
});
if (isLoading) return null;
const metrics = data;
if (!metrics) return null;
const formatMinutes = (mins: number | null) => {
if (mins === null) return '—';
if (mins < 1) return '< 1 min';
if (mins >= 60) return `${Math.floor(mins / 60)}h ${mins % 60}m`;
return `${mins} min`;
};
const isFast = metrics.time_to_first_contact_minutes !== null && metrics.time_to_first_contact_minutes < 5;
const isSlow = metrics.time_to_first_contact_minutes !== null && metrics.time_to_first_contact_minutes > 30;
return (
<div className={`rounded-lg border p-4 ${
isSlow ? 'border-red-200 bg-red-50' :
isFast ? 'border-emerald-200 bg-emerald-50' :
'border-surface-200 bg-white'
}`}>
<div className="flex items-center gap-2">
<Clock className={`h-4 w-4 ${isSlow ? 'text-red-500' : isFast ? 'text-emerald-500' : 'text-surface-400'}`} />
<span className="text-sm font-medium text-surface-700">Speed to Lead</span>
</div>
<div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
<div>
<p className="text-xs text-surface-400">First Contact</p>
<p className="text-sm font-semibold text-surface-700">{formatMinutes(metrics.time_to_first_contact_minutes)}</p>
</div>
<div>
<p className="text-xs text-surface-400">First SMS</p>
<p className="text-sm font-semibold text-surface-700">{formatMinutes(metrics.time_to_first_sms_minutes)}</p>
</div>
<div>
<p className="text-xs text-surface-400">First Call</p>
<p className="text-sm font-semibold text-surface-700">{formatMinutes(metrics.time_to_first_call_minutes)}</p>
</div>
<div>
<p className="text-xs text-surface-400">Contact Type</p>
<p className="text-sm font-semibold text-surface-700 capitalize">{metrics.first_contact_type ?? '—'}</p>
</div>
</div>
</div>
);
}
/* ─── Main Page ───────────────────────────────────────────────── */
type Tab = 'timeline' | 'sms' | 'calls';
export function SmsCallPage() {
const { leadId } = useParams<{ leadId: string }>();
const navigate = useNavigate();
const [activeTab, setActiveTab] = useState<Tab>('timeline');
const tabs: { key: Tab; label: string; icon: React.ReactNode }[] = [
{ key: 'timeline', label: 'Timeline', icon: <Clock className="h-4 w-4" /> },
{ key: 'sms', label: 'Messages', icon: <MessageSquare className="h-4 w-4" /> },
{ key: 'calls', label: 'Calls', icon: <Phone className="h-4 w-4" /> },
];
if (!leadId) {
return (
<AppLayout title="SMS & Calls">
<div className="flex flex-col items-center justify-center py-16">
<Phone className="h-12 w-12 text-surface-300" />
<p className="mt-4 text-sm font-medium text-surface-700">No lead selected</p>
<button
onClick={() => navigate(-1)}
className="mt-3 text-sm text-brand-600 hover:text-brand-700"
>
← Go back
</button>
</div>
</AppLayout>
);
}
return (
<AppLayout title="SMS & Calls">
{/* Back button */}
<button
onClick={() => navigate(-1)}
className="mb-4 inline-flex items-center gap-1 text-sm text-surface-500 hover:text-surface-700"
>
<ArrowLeft className="h-4 w-4" />
Back
</button>
{/* Speed to Lead */}
<div className="mb-6">
<SpeedToLeadMetrics leadId={leadId} />
</div>
{/* Tabs */}
<div className="mb-6 flex gap-1 rounded-lg bg-surface-100 p-1">
{tabs.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
activeTab === tab.key
? 'bg-white text-surface-900 shadow-sm'
: 'text-surface-500 hover:text-surface-700'
}`}
>
{tab.icon}
{tab.label}
</button>
))}
</div>
{/* Tab content */}
{activeTab === 'timeline' && <TimelineView leadId={leadId} />}
{activeTab === 'sms' && <SmsConversationView leadId={leadId} />}
{activeTab === 'calls' && <CallLogView leadId={leadId} />}
</AppLayout>
);
}