import React, { useEffect, useState, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Play,
  Pause,
  CheckCircle,
  Clock,
  RefreshCw,
  Zap,
  FileText,
  ChevronDown,
  ChevronUp,
  Target,
  Activity,
  BarChart3,
  TrendingUp,
  ArrowRight
} from 'lucide-react';
import { useStudy } from '../context/StudyContext';
import { Study } from '../types';
import { apiClient } from '../api/client';
import { MarkdownRenderer } from '../components/MarkdownRenderer';

const Home: React.FC = () => {
  const { studies, setSelectedStudy, refreshStudies, isLoading } = useStudy();
  const [selectedPreview, setSelectedPreview] = useState<Study | null>(null);
  const [readme, setReadme] = useState<string>('');
  const [readmeLoading, setReadmeLoading] = useState(false);
  const [sortField, setSortField] = useState<'name' | 'status' | 'trials' | 'bestValue'>('trials');
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
  const navigate = useNavigate();

  // Load README when a study is selected for preview
  useEffect(() => {
    if (selectedPreview) {
      loadReadme(selectedPreview.id);
    } else {
      setReadme('');
    }
  }, [selectedPreview]);

  const loadReadme = async (studyId: string) => {
    setReadmeLoading(true);
    try {
      const response = await apiClient.getStudyReadme(studyId);
      setReadme(response.content || 'No README found for this study.');
    } catch {
      setReadme('No README found for this study.');
    } finally {
      setReadmeLoading(false);
    }
  };

  const handleSelectStudy = (study: Study) => {
    setSelectedStudy(study);
    navigate('/dashboard');
  };

  const handleSort = (field: typeof sortField) => {
    if (sortField === field) {
      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
    } else {
      setSortField(field);
      setSortDir('desc');
    }
  };

  // Sort studies
  const sortedStudies = useMemo(() => {
    return [...studies].sort((a, b) => {
      let aVal: any, bVal: any;

      switch (sortField) {
        case 'name':
          aVal = (a.name || a.id).toLowerCase();
          bVal = (b.name || b.id).toLowerCase();
          break;
        case 'trials':
          aVal = a.progress.current;
          bVal = b.progress.current;
          break;
        case 'bestValue':
          aVal = a.best_value ?? Infinity;
          bVal = b.best_value ?? Infinity;
          break;
        case 'status':
          const statusOrder = { running: 0, paused: 1, completed: 2, not_started: 3 };
          aVal = statusOrder[a.status as keyof typeof statusOrder] ?? 4;
          bVal = statusOrder[b.status as keyof typeof statusOrder] ?? 4;
          break;
        default:
          return 0;
      }

      if (sortDir === 'asc') {
        return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
      } else {
        return aVal > bVal ? -1 : aVal < bVal ? 1 : 0;
      }
    });
  }, [studies, sortField, sortDir]);

  // Aggregate stats
  const aggregateStats = useMemo(() => {
    const totalStudies = studies.length;
    const runningStudies = studies.filter(s => s.status === 'running').length;
    const completedStudies = studies.filter(s => s.status === 'completed').length;
    const totalTrials = studies.reduce((sum, s) => sum + s.progress.current, 0);
    const studiesWithValues = studies.filter(s => s.best_value !== null);
    const bestOverall = studiesWithValues.length > 0
      ? studiesWithValues.reduce((best, curr) =>
          (curr.best_value! < best.best_value!) ? curr : best
        )
      : null;

    return { totalStudies, runningStudies, completedStudies, totalTrials, bestOverall };
  }, [studies]);

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'running':
        return <Play className="w-4 h-4 text-green-400" />;
      case 'paused':
        return <Pause className="w-4 h-4 text-orange-400" />;
      case 'completed':
        return <CheckCircle className="w-4 h-4 text-blue-400" />;
      default:
        return <Clock className="w-4 h-4 text-dark-400" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'running': return 'text-green-400 bg-green-500/10';
      case 'paused': return 'text-orange-400 bg-orange-500/10';
      case 'completed': return 'text-blue-400 bg-blue-500/10';
      default: return 'text-dark-400 bg-dark-600';
    }
  };

  return (
    <div className="min-h-screen bg-dark-900">
      {/* Header */}
      <header className="bg-dark-800/50 border-b border-dark-700 backdrop-blur-sm sticky top-0 z-10">
        <div className="max-w-[1920px] mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="w-11 h-11 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center shadow-lg shadow-primary-500/20">
                <Zap className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-white">Atomizer</h1>
                <p className="text-dark-400 text-sm">FEA Optimization Platform</p>
              </div>
            </div>
            <button
              onClick={() => refreshStudies()}
              disabled={isLoading}
              className="flex items-center gap-2 px-4 py-2 bg-dark-700 hover:bg-dark-600
                         text-white rounded-lg transition-all disabled:opacity-50 border border-dark-600"
            >
              <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
              Refresh
            </button>
          </div>
        </div>
      </header>

      <main className="max-w-[1920px] mx-auto px-6 py-8">
        {/* Aggregate Stats Cards */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <div className="bg-dark-800 rounded-xl p-4 border border-dark-600">
            <div className="flex items-center gap-2 text-dark-400 text-sm mb-2">
              <BarChart3 className="w-4 h-4" />
              Total Studies
            </div>
            <div className="text-3xl font-bold text-white">{aggregateStats.totalStudies}</div>
          </div>

          <div className="bg-dark-800 rounded-xl p-4 border border-dark-600">
            <div className="flex items-center gap-2 text-green-400 text-sm mb-2">
              <Play className="w-4 h-4" />
              Running
            </div>
            <div className="text-3xl font-bold text-green-400">{aggregateStats.runningStudies}</div>
          </div>

          <div className="bg-dark-800 rounded-xl p-4 border border-dark-600">
            <div className="flex items-center gap-2 text-dark-400 text-sm mb-2">
              <Activity className="w-4 h-4" />
              Total Trials
            </div>
            <div className="text-3xl font-bold text-white">{aggregateStats.totalTrials.toLocaleString()}</div>
          </div>

          <div className="bg-dark-800 rounded-xl p-4 border border-dark-600">
            <div className="flex items-center gap-2 text-primary-400 text-sm mb-2">
              <Target className="w-4 h-4" />
              Best Overall
            </div>
            <div className="text-2xl font-bold text-primary-400">
              {aggregateStats.bestOverall?.best_value !== null && aggregateStats.bestOverall?.best_value !== undefined
                ? aggregateStats.bestOverall.best_value.toExponential(3)
                : 'N/A'}
            </div>
            {aggregateStats.bestOverall && (
              <div className="text-xs text-dark-400 mt-1 truncate">
                {aggregateStats.bestOverall.name || aggregateStats.bestOverall.id}
              </div>
            )}
          </div>
        </div>

        {/* Two-column layout: Table + Preview */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Study Table */}
          <div className="bg-dark-800 rounded-xl border border-dark-600 overflow-hidden">
            <div className="px-6 py-4 border-b border-dark-600 flex items-center justify-between">
              <h2 className="text-lg font-semibold text-white flex items-center gap-2">
                <TrendingUp className="w-5 h-5 text-primary-400" />
                Studies
              </h2>
              <span className="text-sm text-dark-400">{studies.length} studies</span>
            </div>

            {isLoading ? (
              <div className="flex items-center justify-center py-16 text-dark-400">
                <RefreshCw className="w-6 h-6 animate-spin mr-3" />
                Loading studies...
              </div>
            ) : studies.length === 0 ? (
              <div className="text-center py-16 text-dark-400">
                <BarChart3 className="w-12 h-12 mx-auto mb-4 opacity-50" />
                <p>No studies found</p>
                <p className="text-sm mt-1 text-dark-500">Create a new study to get started</p>
              </div>
            ) : (
              <div className="overflow-x-auto max-h-[500px] overflow-y-auto">
                <table className="w-full">
                  <thead className="sticky top-0 bg-dark-750 z-10">
                    <tr className="border-b border-dark-600">
                      <th
                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
                        onClick={() => handleSort('name')}
                      >
                        <div className="flex items-center gap-1">
                          Study Name
                          {sortField === 'name' && (
                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
                          )}
                        </div>
                      </th>
                      <th
                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
                        onClick={() => handleSort('status')}
                      >
                        <div className="flex items-center gap-1">
                          Status
                          {sortField === 'status' && (
                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
                          )}
                        </div>
                      </th>
                      <th
                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
                        onClick={() => handleSort('trials')}
                      >
                        <div className="flex items-center gap-1">
                          Progress
                          {sortField === 'trials' && (
                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
                          )}
                        </div>
                      </th>
                      <th
                        className="text-left py-3 px-4 text-dark-400 font-medium cursor-pointer hover:text-white transition-colors"
                        onClick={() => handleSort('bestValue')}
                      >
                        <div className="flex items-center gap-1">
                          Best
                          {sortField === 'bestValue' && (
                            sortDir === 'asc' ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />
                          )}
                        </div>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {sortedStudies.map((study) => {
                      const completionPercent = study.progress.total > 0
                        ? Math.round((study.progress.current / study.progress.total) * 100)
                        : 0;

                      return (
                        <tr
                          key={study.id}
                          onClick={() => setSelectedPreview(study)}
                          className={`border-b border-dark-700 hover:bg-dark-750 transition-colors cursor-pointer ${
                            selectedPreview?.id === study.id ? 'bg-primary-900/20' : ''
                          }`}
                        >
                          <td className="py-3 px-4">
                            <div className="flex flex-col">
                              <span className="text-white font-medium truncate max-w-[200px]">
                                {study.name || study.id}
                              </span>
                              {study.name && (
                                <span className="text-xs text-dark-500 truncate max-w-[200px]">{study.id}</span>
                              )}
                            </div>
                          </td>
                          <td className="py-3 px-4">
                            <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(study.status)}`}>
                              {getStatusIcon(study.status)}
                              {study.status}
                            </span>
                          </td>
                          <td className="py-3 px-4">
                            <div className="flex items-center gap-2">
                              <div className="flex-1 h-2 bg-dark-600 rounded-full overflow-hidden max-w-[80px]">
                                <div
                                  className={`h-full transition-all ${
                                    completionPercent >= 100 ? 'bg-green-500' :
                                    completionPercent >= 50 ? 'bg-primary-500' :
                                    'bg-yellow-500'
                                  }`}
                                  style={{ width: `${Math.min(completionPercent, 100)}%` }}
                                />
                              </div>
                              <span className="text-dark-400 text-sm font-mono w-16">
                                {study.progress.current}/{study.progress.total}
                              </span>
                            </div>
                          </td>
                          <td className="py-3 px-4">
                            <span className={`font-mono text-sm ${study.best_value !== null ? 'text-primary-400' : 'text-dark-500'}`}>
                              {study.best_value !== null ? study.best_value.toExponential(3) : 'N/A'}
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>

          {/* Study Preview */}
          <div className="bg-dark-800 rounded-xl border border-dark-600 overflow-hidden flex flex-col">
            {selectedPreview ? (
              <>
                {/* Preview Header */}
                <div className="px-6 py-4 border-b border-dark-600 flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-dark-700 rounded-lg flex items-center justify-center">
                      <FileText className="w-5 h-5 text-primary-400" />
                    </div>
                    <div className="min-w-0">
                      <h2 className="text-lg font-semibold text-white truncate">
                        {selectedPreview.name || selectedPreview.id}
                      </h2>
                      <p className="text-dark-400 text-sm">Study Documentation</p>
                    </div>
                  </div>
                  <button
                    onClick={() => handleSelectStudy(selectedPreview)}
                    className="flex items-center gap-2 px-4 py-2 bg-primary-600 hover:bg-primary-500
                               text-white rounded-lg transition-all font-medium shadow-lg shadow-primary-500/20
                               hover:shadow-primary-500/30 whitespace-nowrap"
                  >
                    Open
                    <ArrowRight className="w-4 h-4" />
                  </button>
                </div>

                {/* Study Quick Stats */}
                <div className="px-6 py-3 border-b border-dark-600 flex items-center gap-6 text-sm">
                  <div className="flex items-center gap-2">
                    {getStatusIcon(selectedPreview.status)}
                    <span className="text-dark-300 capitalize">{selectedPreview.status}</span>
                  </div>
                  <div className="flex items-center gap-2 text-dark-400">
                    <Activity className="w-4 h-4" />
                    <span>{selectedPreview.progress.current} / {selectedPreview.progress.total} trials</span>
                  </div>
                  {selectedPreview.best_value !== null && (
                    <div className="flex items-center gap-2 text-primary-400">
                      <Target className="w-4 h-4" />
                      <span>Best: {selectedPreview.best_value.toExponential(4)}</span>
                    </div>
                  )}
                </div>

                {/* README Content */}
                <div className="flex-1 overflow-y-auto p-6">
                  {readmeLoading ? (
                    <div className="flex items-center justify-center py-16 text-dark-400">
                      <RefreshCw className="w-6 h-6 animate-spin mr-3" />
                      Loading documentation...
                    </div>
                  ) : (
                    <MarkdownRenderer content={readme} />
                  )}
                </div>
              </>
            ) : (
              <div className="flex-1 flex items-center justify-center text-dark-400">
                <div className="text-center">
                  <FileText className="w-16 h-16 mx-auto mb-4 opacity-30" />
                  <p className="text-lg">Select a study to preview</p>
                  <p className="text-sm mt-1 text-dark-500">Click on any row in the table</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
};

export default Home;
