import React, { useState } from 'react';
import {
  AlertCircle,
  Calendar,
  CheckCircle2,
  ChevronDown,
  ChevronRight,
  Clock,
  MailIcon,
  PhoneCall,
  RefreshCw,
} from 'lucide-react';
import { Button } from '@nexuscrm/salesforce-crm-standard-frontend/platform/components/ui';
import { resolveActionIcon } from '@nexuscrm/salesforce-crm-standard-frontend/platform/features/record/actions/actionIcons';
import {
  type CrmActivitiesResult,
  type CrmActivityItem,
  type CrmActivityTimeFilter,
  type CrmActivityTypeFilter,
} from './activity-timeline-data';
import { isCrmEmailTaskActivity } from './activity-timeline-surface';

export interface CrmActivityTimelineAction {
  name: string;
  label: string;
  rendererId?: string;
  disabled?: boolean;
  disabledReason?: string;
}

export interface CrmActivityTimelineProps {
  activitiesResult: CrmActivitiesResult;
  actions?: readonly CrmActivityTimelineAction[];
  renderAction?: (action: CrmActivityTimelineAction, onClose: () => void) => React.ReactNode;
  onOpenActivityDetail?: (item: CrmActivityItem) => void;
}

function formatDate(dateStr: string | null | undefined): string {
  if (!dateStr) return '';
  try {
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
  } catch {
    return dateStr;
  }
}

function getActivityIcon(item: CrmActivityItem) {
  if (item.isEvent) return Calendar;
  // Email rows are identified by TaskSubtype (see isCrmEmailTaskActivity); Type is
  // empty on migrated emails, so keying the icon off Type alone lost the mail icon.
  if (isCrmEmailTaskActivity(item)) return MailIcon;
  const typeLower = (item.type ?? '').toLowerCase();
  const subtypeLower = (item.subtype ?? '').toLowerCase();
  if (typeLower === 'call' || subtypeLower === 'call') return PhoneCall;
  return CheckCircle2;
}

function getStatusBadge(item: CrmActivityItem) {
  if (item.isEvent) {
    return { label: 'Event', className: 'bg-purple-100 text-purple-700' };
  }
  // Deferred is a closed status (item.isClosed is true), so check it before the
  // generic closed branch to keep its distinct label instead of showing "Completed".
  if (item.status === 'Deferred') {
    return { label: 'Deferred', className: 'bg-gray-100 text-gray-600' };
  }
  if (item.isClosed) {
    return { label: 'Completed', className: 'bg-green-100 text-green-700' };
  }
  if (item.status === 'In Progress') {
    return { label: 'In Progress', className: 'bg-blue-100 text-blue-700' };
  }
  return { label: item.status ?? 'Open', className: 'bg-amber-100 text-amber-700' };
}

function isOverdue(item: CrmActivityItem): boolean {
  if (item.isClosed || item.isEvent) return false;
  const dateStr = item.activityDate;
  if (!dateStr) return false;
  return new Date(dateStr) < new Date(new Date().toISOString().split('T')[0]);
}

const CrmActivityCard: React.FC<{
  item: CrmActivityItem;
  onOpenDetail?: () => void;
}> = ({ item, onOpenDetail }) => {
  const [expanded, setExpanded] = useState(false);
  const Icon = getActivityIcon(item);
  const badge = getStatusBadge(item);
  const overdue = isOverdue(item);

  const hasDetails = item.description;
  const canOpenDetail = !!onOpenDetail;

  return (
    <div
      className={`flex gap-3 p-3 rounded-lg border transition-colors ${
        overdue ? 'border-red-200 bg-red-50' : 'border-gray-100 bg-white hover:bg-gray-50'
      } ${canOpenDetail ? 'cursor-pointer' : ''}`}
      onClick={() => onOpenDetail?.()}
    >
      <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
        overdue ? 'bg-red-100' : item.isEvent ? 'bg-purple-100' : 'bg-blue-100'
      }`}>
        <Icon size={14} className={overdue ? 'text-red-600' : item.isEvent ? 'text-purple-600' : 'text-blue-600'} />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-1">
              {hasDetails && (
                <button
                  type="button"
                  aria-label={expanded ? 'Collapse activity details' : 'Expand activity details'}
                  onClick={(event) => {
                    event.stopPropagation();
                    setExpanded(!expanded);
                  }}
                  className="flex-shrink-0 text-gray-500 hover:text-blue-600"
                >
                  {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
                </button>
              )}
              <button
                type="button"
                onClick={(event) => {
                  event.stopPropagation();
                  if (onOpenDetail) {
                    onOpenDetail();
                    return;
                  }
                  if (hasDetails) {
                    setExpanded(!expanded);
                  }
                }}
                className="min-w-0 text-left text-sm font-medium text-gray-900 hover:text-blue-600"
              >
                <span className="truncate">{item.subject || '(No Subject)'}</span>
              </button>
            </div>
            <div className="flex items-center gap-2 mt-1">
              <span className="text-xs text-gray-500">{formatDate(item.activityDate)}</span>
              {item.type && (
                <span className="text-xs text-gray-400">{item.type}</span>
              )}
            </div>
          </div>
          <div className="flex items-center gap-2 flex-shrink-0">
            {overdue && (
              <span className="flex items-center gap-1 text-xs text-red-600 font-medium">
                <AlertCircle size={12} />
                Overdue
              </span>
            )}
            <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${badge.className}`}>
              {badge.label}
            </span>
          </div>
        </div>

        {expanded && hasDetails && (
          <div className="mt-3 space-y-2 text-sm text-gray-600 border-t border-gray-100 pt-3">
            {item.description && (
              <div>
                <span className="font-medium text-gray-700">Description:</span>
                <p className="mt-0.5 whitespace-pre-wrap">{item.description}</p>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export const CrmActivityTimeline: React.FC<CrmActivityTimelineProps> = ({
  activitiesResult,
  actions = [],
  renderAction,
  onOpenActivityDetail,
}) => {
  const [openAction, setOpenAction] = useState<CrmActivityTimelineAction | null>(null);
  const {
    activities,
    upcomingActivities,
    loading,
    error,
    refresh,
    filters,
    setFilters,
    totalCount,
  } = activitiesResult;

  const closeAction = () => setOpenAction(null);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-3">
        {actions.map((action, index) => {
          const ActionIcon = resolveActionIcon({ name: action.name });
          return (
          <Button
            key={`${action.name}:${action.rendererId || ''}`}
            variant={index === 0 ? 'primary' : 'secondary'}
            size="sm"
            icon={<ActionIcon size={14} />}
            disabled={action.disabled}
            title={action.disabledReason}
            onClick={() => {
              if (!action.disabled) {
                setOpenAction(action);
              }
            }}
          >
            {action.label}
          </Button>
          );
        })}
      </div>

      <div className="flex items-center gap-4 px-4 py-2 bg-gray-50 rounded-lg border border-gray-200">
        <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Filters:</span>
        <select
          value={filters.time}
          onChange={event => setFilters({ ...filters, time: event.target.value as CrmActivityTimeFilter })}
          className="text-sm bg-transparent border-none focus:ring-0 text-gray-700 cursor-pointer"
        >
          <option value="all">All time</option>
          <option value="this_month">This Month</option>
          <option value="this_week">This Week</option>
        </select>
        <select
          value={filters.type}
          onChange={event => setFilters({ ...filters, type: event.target.value as CrmActivityTypeFilter })}
          className="text-sm bg-transparent border-none focus:ring-0 text-gray-700 cursor-pointer"
        >
          <option value="all">All activities</option>
          <option value="tasks">Tasks only</option>
          <option value="events">Events only</option>
        </select>
        <div className="flex-1" />
        <button
          onClick={refresh}
          className="p-1.5 text-gray-400 hover:text-gray-600 rounded transition-colors"
          title="Refresh"
        >
          <RefreshCw size={14} />
        </button>
        <span className="text-xs text-gray-400">{totalCount} activities</span>
      </div>

      {loading && (
        <div className="flex items-center justify-center py-12">
          <div className="flex items-center gap-3 text-gray-500">
            <Clock size={16} className="animate-spin" />
            <span className="text-sm">Loading activities...</span>
          </div>
        </div>
      )}

      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
          <div className="flex items-center gap-2 text-red-700">
            <AlertCircle size={16} />
            <span className="text-sm font-medium">Error loading activities</span>
          </div>
          <p className="text-sm text-red-600 mt-1">{error}</p>
          <button onClick={refresh} className="text-sm text-red-700 underline mt-2">
            Try again
          </button>
        </div>
      )}

      {!loading && !error && (
        <>
          {upcomingActivities.length > 0 && (
            <div>
              <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
                <Clock size={14} />
                Upcoming & Overdue ({upcomingActivities.length})
              </h3>
              <div className="space-y-2">
                {upcomingActivities.map(item => (
                  <CrmActivityCard
                    key={item.id}
                    item={item}
                    onOpenDetail={!item.isEvent && item.id ? () => onOpenActivityDetail?.(item) : undefined}
                  />
                ))}
              </div>
            </div>
          )}

          {activities.length > 0 && (
            <div>
              {upcomingActivities.length > 0 && (
                <h3 className="text-sm font-semibold text-gray-700 mb-2 mt-4">
                  Past Activities ({activities.length})
                </h3>
              )}
              <div className="space-y-2">
                {activities.map(item => (
                  <CrmActivityCard
                    key={item.id}
                    item={item}
                    onOpenDetail={!item.isEvent && item.id ? () => onOpenActivityDetail?.(item) : undefined}
                  />
                ))}
              </div>
            </div>
          )}

          {totalCount === 0 && (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                <Calendar size={20} className="text-gray-400" />
              </div>
              <p className="text-sm font-medium text-gray-600">No activities found</p>
              <p className="text-xs text-gray-400 mt-1">
                Use an available activity action to create your first activity.
              </p>
            </div>
          )}
        </>
      )}

      {openAction && renderAction?.(openAction, closeAction)}
    </div>
  );
};