import React, { useState, useEffect, useCallback } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { AppLayout } from '../../components/layout/AppLayout';
import {
getCoachingAssignments,
createCoachingAssignment,
updateCoachingAssignment,
deleteCoachingAssignment,
} from '../../api/coachingAssignments';
import type { CoachingAssignment, CoachingAssignmentCreate, AssignmentStatus } from '../../types';
import {
Plus, X, Search, Filter, UserCheck, Users, Edit, Trash2, Calendar,
Clock, CheckCircle, AlertCircle, ArrowRight,
} from 'lucide-react';
const statusColors: Record<AssignmentStatus, string> = {
active: 'bg-emerald-100 text-emerald-700 border-emerald-200',
completed: 'bg-blue-100 text-blue-700 border-blue-200',
cancelled: 'bg-red-100 text-red-700 border-red-200',
pending: 'bg-amber-100 text-amber-700 border-amber-200',
};
export function CoachingAssignmentsPage() {
const { user } = useAuth();
const companyId = user?.tenantId as string;
const [assignments, setAssignments] = useState<CoachingAssignment[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [showCreate, setShowCreate] = useState(false);
const [editingAssignment, setEditingAssignment] = useState<CoachingAssignment | null>(null);
const [search, setSearch] = useState('');
const [filterStatus, setFilterStatus] = useState<'all' | AssignmentStatus>('all');
const [form, setForm] = useState<CoachingAssignmentCreate>({
coach_id: '',
rep_id: '',
focus_area: '',
description: '',
start_date: null,
end_date: null,
status: 'active',
});
const loadAssignments = useCallback(async () => {
if (!companyId) return;
try {
setLoading(true);
const data = await getCoachingAssignments(companyId);
setAssignments(data);
setError(null);
} catch (e) {
setError(e instanceof Error ? e.message : 'Failed to load coaching assignments');
} finally {
setLoading(false);
}
}, [companyId]);
useEffect(() => {
loadAssignments();
}, [loadAssignments]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!companyId) return;
try {
if (editingAssignment) {
await updateCoachingAssignment(companyId, editingAssignment.id, form);
} else {
await createCoachingAssignment(companyId, form);
}
setShowCreate(false);
setEditingAssignment(null);
setForm({ coach_id: '', rep_id: '', focus_area: '', description: '', start_date: null, end_date: null, status: 'active' });
await loadAssignments();
} catch (e) {
setError(e instanceof Error ? e.message : 'Failed to save assignment');
}
};
const handleDelete = async (assignment: CoachingAssignment) => {
if (!companyId) return;
if (!confirm('Delete this coaching assignment?')) return;
try { await deleteCoachingAssignment(companyId, assignment.id); await loadAssignments(); }
catch (e) { setError(e instanceof Error ? e.message : 'Failed to delete assignment'); }
};
const startEdit = (assignment: CoachingAssignment) => {
setEditingAssignment(assignment);
setForm({
coach_id: assignment.coach_id,
rep_id: assignment.rep_id,
focus_area: assignment.focus_area,
description: assignment.description,
start_date: assignment.start_date,
end_date: assignment.end_date,
status: assignment.status,
});
setShowCreate(true);
};
const filtered = assignments
.filter(a => filterStatus === 'all' || a.status === filterStatus)
.filter(a => search === '' || a.coach_name.toLowerCase().includes(search.toLowerCase()) || a.rep_name.toLowerCase().includes(search.toLowerCase()) || a.focus_area.toLowerCase().includes(search.toLowerCase()));
const activeCount = assignments.filter(a => a.status === 'active').length;
return (
<AppLayout title="Coaching Assignments">
{/* Summary */}
<div className="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="rounded-xl border border-surface-200 bg-white p-5">
<p className="text-sm font-medium text-surface-500">Active Assignments</p>
<p className="mt-2 text-3xl font-bold text-emerald-600">{activeCount}</p>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-5">
<p className="text-sm font-medium text-surface-500">Total Assignments</p>
<p className="mt-2 text-3xl font-bold text-surface-900">{assignments.length}</p>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-5">
<p className="text-sm font-medium text-surface-500">Completed</p>
<p className="mt-2 text-3xl font-bold text-blue-600">{assignments.filter(a => a.status === 'completed').length}</p>
</div>
</div>
{/* Toolbar */}
<div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-2">
<div className="relative flex-1 sm:flex-initial">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-400" />
<input type="text" value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search assignments..."
className="w-full rounded-lg border border-surface-300 py-2 pl-9 pr-4 text-sm outline-none focus:border-brand-500 sm:w-64" />
</div>
<select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value as 'all' | AssignmentStatus)}
className="rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 min-h-[44px]">
<option value="all">All Status</option>
<option value="active">Active</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
<option value="pending">Pending</option>
</select>
</div>
<button onClick={() => { setShowCreate(true); setEditingAssignment(null); setForm({ coach_id: '', rep_id: '', focus_area: '', description: '', start_date: null, end_date: null, status: 'active' }); }}
className="inline-flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 min-h-[44px]">
<Plus className="h-4 w-4" /> New Assignment
</button>
</div>
{error && (
<div className="mb-4 rounded-xl border border-red-200 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{error}</p>
<button onClick={() => setError(null)} className="mt-1 text-sm text-red-600 underline">Dismiss</button>
</div>
)}
{/* Modal */}
{showCreate && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
<div className="w-full max-w-lg rounded-xl bg-white p-6 shadow-xl">
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-semibold text-surface-900">{editingAssignment ? 'Edit Assignment' : 'New Coaching Assignment'}</h2>
<button onClick={() => setShowCreate(false)} className="rounded-lg p-1.5 text-surface-400 hover:bg-surface-100">
<X className="h-5 w-5" />
</button>
</div>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-surface-700">Coach ID</label>
<input type="text" required value={form.coach_id} onChange={(e) => setForm({ ...form, coach_id: e.target.value })} placeholder="User ID"
className="mt-1 w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500" />
</div>
<div>
<label className="block text-sm font-medium text-surface-700">Rep ID</label>
<input type="text" required value={form.rep_id} onChange={(e) => setForm({ ...form, rep_id: e.target.value })} placeholder="User ID"
className="mt-1 w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-surface-700">Focus Area</label>
<input type="text" value={form.focus_area} onChange={(e) => setForm({ ...form, focus_area: e.target.value })} placeholder="e.g. Objection handling, Pipeline management"
className="mt-1 w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500" />
</div>
<div>
<label className="block text-sm font-medium text-surface-700">Description</label>
<textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} rows={2}
className="mt-1 w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 resize-none" />
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-surface-700">Start Date</label>
<input type="date" value={form.start_date ?? ''} onChange={(e) => setForm({ ...form, start_date: e.target.value || null })}
className="mt-1 w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500" />
</div>
<div>
<label className="block text-sm font-medium text-surface-700">End Date</label>
<input type="date" value={form.end_date ?? ''} onChange={(e) => setForm({ ...form, end_date: e.target.value || null })}
className="mt-1 w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500" />
</div>
</div>
<div>
<label className="block text-sm font-medium text-surface-700">Status</label>
<select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value as AssignmentStatus })}
className="mt-1 w-full rounded-lg border border-surface-300 py-2 px-3 text-sm outline-none focus:border-brand-500 min-h-[44px]">
<option value="active">Active</option>
<option value="pending">Pending</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
<div className="flex justify-end gap-2 pt-2">
<button type="button" onClick={() => setShowCreate(false)}
className="rounded-lg border border-surface-300 px-4 py-2 text-sm font-medium text-surface-700 hover:bg-surface-50 min-h-[44px]">Cancel</button>
<button type="submit" className="rounded-lg bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 min-h-[44px]">
{editingAssignment ? 'Update' : 'Create'}
</button>
</div>
</form>
</div>
</div>
)}
{/* Assignments List */}
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-brand-600 border-t-transparent" />
<span className="ml-3 text-sm text-surface-500">Loading assignments…</span>
</div>
) : filtered.length === 0 ? (
<div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
<Users className="h-12 w-12 text-surface-300" />
<p className="mt-4 text-sm font-medium text-surface-700">
{search || filterStatus !== 'all' ? 'No assignments match your filters' : 'No coaching assignments yet'}
</p>
</div>
) : (
<div className="space-y-3">
{filtered.map((assignment) => (
<div key={assignment.id} className="rounded-xl border border-surface-200 bg-white p-5">
<div className="flex items-start justify-between">
<div className="flex items-start gap-3">
<div className="mt-1 rounded-lg bg-brand-50 p-2 text-brand-600">
<UserCheck className="h-4 w-4" />
</div>
<div>
<div className="flex items-center gap-2">
<span className="font-semibold text-surface-900">{assignment.coach_name || assignment.coach_id}</span>
<ArrowRight className="h-3 w-3 text-surface-400" />
<span className="font-semibold text-surface-900">{assignment.rep_name || assignment.rep_id}</span>
</div>
{assignment.focus_area && (
<p className="mt-1 text-sm text-surface-600">{assignment.focus_area}</p>
)}
{assignment.description && (
<p className="mt-1 text-xs text-surface-500">{assignment.description}</p>
)}
<div className="mt-2 flex items-center gap-4 text-xs text-surface-400">
{assignment.start_date && (
<span className="flex items-center gap-1">
<Calendar className="h-3 w-3" /> {assignment.start_date.substring(0, 10)} → {assignment.end_date?.substring(0, 10)}
</span>
)}
</div>
</div>
</div>
<div className="flex items-center gap-1">
<span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium ${statusColors[assignment.status]}`}>
{assignment.status === 'active' ? <CheckCircle className="h-3 w-3" /> : assignment.status === 'completed' ? <CheckCircle className="h-3 w-3" /> : <AlertCircle className="h-3 w-3" />}
{assignment.status}
</span>
<button onClick={() => startEdit(assignment)} className="rounded-lg p-1.5 text-surface-400 hover:bg-surface-100 hover:text-surface-600" title="Edit">
<Edit className="h-4 w-4" />
</button>
<button onClick={() => handleDelete(assignment)} className="rounded-lg p-1.5 text-surface-400 hover:bg-red-50 hover:text-red-600" title="Delete">
<Trash2 className="h-4 w-4" />
</button>
</div>
</div>
</div>
))}
</div>
)}
</AppLayout>
);
}