'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import {
  ArrowLeft,
  CheckCircle,
  XCircle,
  Clock,
  Loader,
  RefreshCw,
  AlertCircle,
  ChevronDown,
  ChevronRight,
  ExternalLink,
  Timer,
  ArrowRightLeft,
  BarChart3,
} from 'lucide-react';
import type { ExecutionStatus, StageMetrics } from '@/lib/pipeline-types';
import { getExecution } from '@/lib/pipeline-api';

// Status badge component
function StatusBadge({ status }: { status: ExecutionStatus['status'] }) {
  const config = {
    pending: {
      icon: Clock,
      color: 'bg-gray-100 text-gray-600',
      label: 'Pending',
    },
    running: {
      icon: Loader,
      color: 'bg-blue-100 text-blue-600',
      label: 'Running',
    },
    completed: {
      icon: CheckCircle,
      color: 'bg-green-100 text-green-600',
      label: 'Completed',
    },
    failed: {
      icon: XCircle,
      color: 'bg-red-100 text-red-600',
      label: 'Failed',
    },
    cancelled: {
      icon: AlertCircle,
      color: 'bg-yellow-100 text-yellow-600',
      label: 'Cancelled',
    },
  };

  const { icon: Icon, color, label } = config[status] || config.pending;

  return (
    <span className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold ${color}`}>
      <Icon className={`w-4 h-4 mr-2 ${status === 'running' ? 'animate-spin' : ''}`} />
      {label}
    </span>
  );
}

// Format date string
function formatDate(dateStr: string | undefined): string {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}

// Format duration from milliseconds
function formatDurationMs(ms: number | undefined): string {
  if (!ms) return '-';
  if (ms < 1000) return `${ms}ms`;
  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
  const minutes = Math.floor(ms / 60000);
  const seconds = Math.floor((ms % 60000) / 1000);
  return `${minutes}m ${seconds}s`;
}

// Calculate duration from timestamps
function formatDuration(start?: string, end?: string): string {
  if (!start) return '-';
  const startDate = new Date(start);
  const endDate = end ? new Date(end) : new Date();
  const ms = endDate.getTime() - startDate.getTime();
  return formatDurationMs(ms);
}

// Stage metrics display component
function StageMetricsTable({
  stages,
  metrics,
  completed,
}: {
  stages: string[];
  metrics: Record<string, StageMetrics> | undefined;
  completed: string[];
}) {
  if (!metrics || Object.keys(metrics).length === 0) {
    return (
      <div className="text-sm text-gray-500 italic">
        No stage metrics available yet
      </div>
    );
  }

  // Calculate total duration
  const totalDuration = Object.values(metrics).reduce(
    (sum, m) => sum + (m.duration_ms || 0),
    0
  );

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-gray-200">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
              Stage
            </th>
            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">
              Status
            </th>
            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
              Duration
            </th>
            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
              % of Total
            </th>
            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
              Records In
            </th>
            <th className="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">
              Records Out
            </th>
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-gray-200">
          {stages.map((stage, index) => {
            const stageMetrics = metrics[stage];
            const isCompleted = completed.includes(stage);
            const percentage = totalDuration > 0 && stageMetrics
              ? ((stageMetrics.duration_ms / totalDuration) * 100).toFixed(1)
              : '0';

            return (
              <tr key={stage} className="hover:bg-gray-50">
                <td className="px-4 py-3">
                  <div className="flex items-center">
                    <span className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold mr-2 bg-gray-100 text-gray-600">
                      {index + 1}
                    </span>
                    <span className="font-medium text-gray-900">{stage}</span>
                  </div>
                </td>
                <td className="px-4 py-3">
                  {stageMetrics ? (
                    stageMetrics.success ? (
                      <span className="inline-flex items-center text-green-600 text-sm">
                        <CheckCircle className="w-4 h-4 mr-1" />
                        Success
                      </span>
                    ) : (
                      <span className="inline-flex items-center text-red-600 text-sm">
                        <XCircle className="w-4 h-4 mr-1" />
                        Failed
                      </span>
                    )
                  ) : isCompleted ? (
                    <span className="text-gray-400 text-sm">-</span>
                  ) : (
                    <span className="text-gray-400 text-sm">Pending</span>
                  )}
                </td>
                <td className="px-4 py-3 text-right">
                  <span className="font-mono text-sm text-gray-900">
                    {stageMetrics ? formatDurationMs(stageMetrics.duration_ms) : '-'}
                  </span>
                </td>
                <td className="px-4 py-3 text-right">
                  {stageMetrics && totalDuration > 0 ? (
                    <div className="flex items-center justify-end">
                      <div className="w-16 h-2 bg-gray-200 rounded-full mr-2 overflow-hidden">
                        <div
                          className="h-full bg-blue-500 rounded-full"
                          style={{ width: `${percentage}%` }}
                        />
                      </div>
                      <span className="text-sm text-gray-600 w-12 text-right">
                        {percentage}%
                      </span>
                    </div>
                  ) : (
                    <span className="text-gray-400 text-sm">-</span>
                  )}
                </td>
                <td className="px-4 py-3 text-right">
                  <span className="font-mono text-sm text-gray-900">
                    {stageMetrics?.records_in?.toLocaleString() || '-'}
                  </span>
                </td>
                <td className="px-4 py-3 text-right">
                  <span className="font-mono text-sm text-gray-900">
                    {stageMetrics?.records_out?.toLocaleString() || '-'}
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
        <tfoot className="bg-gray-50">
          <tr>
            <td className="px-4 py-3 font-semibold text-gray-900">Total</td>
            <td className="px-4 py-3"></td>
            <td className="px-4 py-3 text-right font-mono font-semibold text-gray-900">
              {formatDurationMs(totalDuration)}
            </td>
            <td className="px-4 py-3 text-right text-sm text-gray-600">100%</td>
            <td className="px-4 py-3"></td>
            <td className="px-4 py-3"></td>
          </tr>
        </tfoot>
      </table>
    </div>
  );
}

// JSON viewer component
function JsonViewer({ data, title }: { data: unknown; title: string }) {
  const [expanded, setExpanded] = useState(false);

  if (!data) return null;

  return (
    <div className="bg-gray-50 rounded-lg border border-gray-200">
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full flex items-center justify-between p-3 text-left hover:bg-gray-100 rounded-lg transition-colors"
      >
        <span className="font-medium text-gray-700">{title}</span>
        {expanded ? (
          <ChevronDown className="w-4 h-4 text-gray-500" />
        ) : (
          <ChevronRight className="w-4 h-4 text-gray-500" />
        )}
      </button>
      {expanded && (
        <div className="p-3 pt-0">
          <pre className="text-xs text-gray-600 overflow-x-auto bg-white p-3 rounded border border-gray-200">
            {JSON.stringify(data, null, 2)}
          </pre>
        </div>
      )}
    </div>
  );
}

/**
 * Execution detail page - shows results, status, and stage metrics.
 */
export default function ExecutionDetailPage() {
  const params = useParams();
  const pipelineId = params.pipelineId as string;
  const executionId = params.executionId as string;

  const [execution, setExecution] = useState<ExecutionStatus | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [autoRefresh, setAutoRefresh] = useState(true);

  const fetchExecution = async () => {
    try {
      const data = await getExecution(pipelineId, executionId);
      setExecution(data);
      setError(null);

      // Stop auto-refresh if execution is complete
      if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
        setAutoRefresh(false);
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load execution');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchExecution();
  }, [pipelineId, executionId]);

  // Auto-refresh while running
  useEffect(() => {
    if (!autoRefresh) return;

    const interval = setInterval(fetchExecution, 3000);
    return () => clearInterval(interval);
  }, [autoRefresh, pipelineId, executionId]);

  if (loading && !execution) {
    return (
      <div className="h-full overflow-y-auto p-6">
        <div className="animate-pulse">
          <div className="h-8 w-64 bg-gray-200 rounded mb-4" />
          <div className="h-4 w-96 bg-gray-200 rounded mb-8" />
          <div className="h-48 bg-gray-200 rounded-xl mb-6" />
          <div className="h-64 bg-gray-200 rounded-xl" />
        </div>
      </div>
    );
  }

  if (error && !execution) {
    return (
      <div className="h-full overflow-y-auto p-6">
        <Link
          href={`/pipelines/${pipelineId}`}
          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-6"
        >
          <ArrowLeft className="w-4 h-4 mr-1" />
          Back to Pipeline
        </Link>

        <div className="text-center py-12">
          <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
          <p className="text-red-600 mb-4">{error}</p>
          <button
            onClick={fetchExecution}
            className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  const isRunning = execution?.status === 'running' || execution?.status === 'pending';

  return (
    <div className="h-full overflow-y-auto p-6">
      {/* Navigation */}
      <div className="flex items-center justify-between mb-6">
        <Link
          href={`/pipelines/${pipelineId}`}
          className="inline-flex items-center text-sm text-gray-500 hover:text-gray-700"
        >
          <ArrowLeft className="w-4 h-4 mr-1" />
          Back to Pipeline
        </Link>

        <div className="flex items-center space-x-3">
          {isRunning && (
            <span className="text-sm text-gray-500">
              Auto-refreshing...
            </span>
          )}
          <button
            onClick={fetchExecution}
            disabled={loading}
            className="inline-flex items-center px-3 py-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md disabled:opacity-50"
          >
            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
            Refresh
          </button>
        </div>
      </div>

      {/* Header */}
      <div className="bg-white rounded-xl border-2 border-gray-200 p-6 mb-6">
        <div className="flex items-start justify-between mb-4">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">
              Execution Details
            </h1>
            <code className="text-sm text-gray-500 mt-1">
              {execution?.id}
            </code>
          </div>
          <StatusBadge status={execution?.status || 'pending'} />
        </div>

        {/* Info Grid */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div>
            <span className="text-sm text-gray-500">Started</span>
            <p className="font-medium text-gray-900">
              {formatDate(execution?.started_at)}
            </p>
          </div>
          <div>
            <span className="text-sm text-gray-500">Completed</span>
            <p className="font-medium text-gray-900">
              {formatDate(execution?.completed_at)}
            </p>
          </div>
          <div>
            <span className="text-sm text-gray-500">Total Duration</span>
            <p className="font-medium text-gray-900">
              {execution?.total_duration_ms
                ? formatDurationMs(execution.total_duration_ms)
                : formatDuration(execution?.started_at, execution?.completed_at)}
            </p>
          </div>
          <div>
            <span className="text-sm text-gray-500">Stages</span>
            <p className="font-medium text-gray-900">
              {execution?.stages_completed.length} / {execution?.stages_requested.length}
            </p>
          </div>
        </div>

        {/* Job/Business Link */}
        {execution?.job_id && (
          <div className="flex items-center text-sm mb-4">
            <span className="text-gray-500 mr-2">Job:</span>
            <Link
              href={`/jobs/${execution.job_id}`}
              className="text-blue-600 hover:underline font-medium inline-flex items-center"
            >
              {execution.job_id.slice(0, 12)}...
              <ExternalLink className="w-3 h-3 ml-1" />
            </Link>
          </div>
        )}

        {execution?.business_id && (
          <div className="flex items-center text-sm mb-4">
            <span className="text-gray-500 mr-2">Business:</span>
            <span className="font-medium text-gray-900">
              {execution.business_id}
            </span>
          </div>
        )}

        {/* View Results Dashboard Button */}
        {execution?.status === 'completed' && execution?.job_id && (
          <div className="mt-6 pt-4 border-t border-gray-200">
            <Link
              href={`/pipelines/${pipelineId}/analytics?job_id=${execution.job_id}`}
              className="inline-flex items-center px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
            >
              <BarChart3 className="w-5 h-5 mr-2" />
              View Results Dashboard
            </Link>
            <p className="mt-2 text-sm text-gray-500">
              See classification results, sentiment analysis, and identified issues
            </p>
          </div>
        )}
      </div>

      {/* Error Message */}
      {execution?.error_message && (
        <div className="bg-red-50 rounded-xl border-2 border-red-200 p-6 mb-6">
          <div className="flex items-start">
            <XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
            <div className="ml-3">
              <h3 className="font-semibold text-red-800">Execution Failed</h3>
              <p className="mt-1 text-sm text-red-700">{execution.error_message}</p>
            </div>
          </div>
        </div>
      )}

      {/* Stage Metrics / Profiling */}
      <div className="bg-white rounded-xl border-2 border-gray-200 p-6 mb-6">
        <div className="flex items-center mb-4">
          <Timer className="w-5 h-5 text-gray-600 mr-2" />
          <h2 className="text-lg font-semibold text-gray-900">
            Stage Performance
          </h2>
        </div>

        <StageMetricsTable
          stages={execution?.stages_requested || []}
          metrics={execution?.stage_metrics}
          completed={execution?.stages_completed || []}
        />
      </div>

      {/* Raw Data */}
      <div className="bg-white rounded-xl border-2 border-gray-200 p-6">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">
          Execution Data
        </h2>

        <div className="space-y-3">
          <JsonViewer data={execution?.input_summary} title="Input Summary" />
          <JsonViewer data={execution?.result_summary} title="Result Summary" />
        </div>
      </div>
    </div>
  );
}