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>
  );
}