Atomizer/atomizer-dashboard/frontend/src/pages/Home.tsx

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  FolderOpen,
  Play,
  Pause,
  CheckCircle,
  Clock,
  AlertCircle,
  ArrowRight,
  RefreshCw,
  Zap,
  FileText,
  ChevronDown,
  ChevronUp,
  Target,
  Activity
} from 'lucide-react';
import { useStudy } from '../context/StudyContext';
import { Study } from '../types';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'katex/dist/katex.min.css';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { apiClient } from '../api/client';

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 [showAllStudies, setShowAllStudies] = useState(false);
  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 (error) {
      setReadme('No README found for this study.');
    } finally {
      setReadmeLoading(false);
    }
  };

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

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'running':
        return <Play className="w-3.5 h-3.5" />;
      case 'paused':
        return <Pause className="w-3.5 h-3.5" />;
      case 'completed':
        return <CheckCircle className="w-3.5 h-3.5" />;
      case 'not_started':
        return <Clock className="w-3.5 h-3.5" />;
      default:
        return <AlertCircle className="w-3.5 h-3.5" />;
    }
  };

  const getStatusStyles = (status: string) => {
    switch (status) {
      case 'running':
        return {
          badge: 'bg-green-500/20 text-green-400 border-green-500/30',
          card: 'border-green-500/30 hover:border-green-500/50',
          glow: 'shadow-green-500/10'
        };
      case 'paused':
        return {
          badge: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
          card: 'border-orange-500/30 hover:border-orange-500/50',
          glow: 'shadow-orange-500/10'
        };
      case 'completed':
        return {
          badge: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
          card: 'border-blue-500/30 hover:border-blue-500/50',
          glow: 'shadow-blue-500/10'
        };
      case 'not_started':
        return {
          badge: 'bg-dark-600 text-dark-400 border-dark-500',
          card: 'border-dark-600 hover:border-dark-500',
          glow: ''
        };
      default:
        return {
          badge: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
          card: 'border-yellow-500/30 hover:border-yellow-500/50',
          glow: 'shadow-yellow-500/10'
        };
    }
  };

  // Study sort options
  const [studySort, setStudySort] = useState<'date' | 'running' | 'trials'>('date');

  // Sort studies based on selected sort option
  const sortedStudies = [...studies].sort((a, b) => {
    if (studySort === 'running') {
      // Running first, then by date
      if (a.status === 'running' && b.status !== 'running') return -1;
      if (b.status === 'running' && a.status !== 'running') return 1;
    }
    if (studySort === 'trials') {
      // By trial count (most trials first)
      return b.progress.current - a.progress.current;
    }
    // Default: sort by date (newest first)
    const aDate = a.last_modified || a.created_at || '';
    const bDate = b.last_modified || b.created_at || '';
    return bDate.localeCompare(aDate);
  });

  const displayedStudies = showAllStudies ? sortedStudies : sortedStudies.slice(0, 6);

  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">
        {/* Study Selection Section */}
        <section className="mb-8">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-lg font-semibold text-white flex items-center gap-2">
              <FolderOpen className="w-5 h-5 text-primary-400" />
              Select a Study
            </h2>
            <div className="flex items-center gap-4">
              {/* Sort Controls */}
              <div className="flex items-center gap-2">
                <span className="text-sm text-dark-400">Sort:</span>
                <div className="flex rounded-lg overflow-hidden border border-dark-600">
                  <button
                    onClick={() => setStudySort('date')}
                    className={`px-3 py-1.5 text-sm transition-colors ${
                      studySort === 'date'
                        ? 'bg-primary-500 text-white'
                        : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
                    }`}
                  >
                    Newest
                  </button>
                  <button
                    onClick={() => setStudySort('running')}
                    className={`px-3 py-1.5 text-sm transition-colors ${
                      studySort === 'running'
                        ? 'bg-primary-500 text-white'
                        : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
                    }`}
                  >
                    Running
                  </button>
                  <button
                    onClick={() => setStudySort('trials')}
                    className={`px-3 py-1.5 text-sm transition-colors ${
                      studySort === 'trials'
                        ? 'bg-primary-500 text-white'
                        : 'bg-dark-700 text-dark-300 hover:bg-dark-600'
                    }`}
                  >
                    Most Trials
                  </button>
                </div>
              </div>
              {studies.length > 6 && (
                <button
                  onClick={() => setShowAllStudies(!showAllStudies)}
                  className="text-sm text-primary-400 hover:text-primary-300 flex items-center gap-1"
                >
                  {showAllStudies ? (
                    <>Show Less <ChevronUp className="w-4 h-4" /></>
                  ) : (
                    <>Show All ({studies.length}) <ChevronDown className="w-4 h-4" /></>
                  )}
                </button>
              )}
            </div>
          </div>

          {isLoading ? (
            <div className="flex items-center justify-center py-12 text-dark-400">
              <RefreshCw className="w-6 h-6 animate-spin mr-3" />
              Loading studies...
            </div>
          ) : studies.length === 0 ? (
            <div className="text-center py-12 text-dark-400">
              <FolderOpen className="w-12 h-12 mx-auto mb-3 opacity-50" />
              <p>No studies found. Create a new study to get started.</p>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {displayedStudies.map((study) => {
                const styles = getStatusStyles(study.status);
                const isSelected = selectedPreview?.id === study.id;

                return (
                  <div
                    key={study.id}
                    onClick={() => setSelectedPreview(study)}
                    className={`
                      relative p-4 rounded-xl border cursor-pointer transition-all duration-200
                      bg-dark-800 hover:bg-dark-750
                      ${styles.card} ${styles.glow}
                      ${isSelected ? 'ring-2 ring-primary-500 border-primary-500' : ''}
                    `}
                  >
                    {/* Status Badge */}
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex-1 min-w-0 pr-2">
                        <h3 className="text-white font-medium truncate">{study.name || study.id}</h3>
                        <p className="text-dark-500 text-xs truncate mt-0.5">{study.id}</p>
                      </div>
                      <span className={`flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded-full border ${styles.badge}`}>
                        {getStatusIcon(study.status)}
                        {study.status}
                      </span>
                    </div>

                    {/* Stats */}
                    <div className="flex items-center gap-4 text-sm mb-3">
                      <div className="flex items-center gap-1.5 text-dark-400">
                        <Activity className="w-3.5 h-3.5" />
                        <span>{study.progress.current} trials</span>
                      </div>
                      {study.best_value !== null && (
                        <div className="flex items-center gap-1.5 text-primary-400">
                          <Target className="w-3.5 h-3.5" />
                          <span>{study.best_value.toFixed(4)}</span>
                        </div>
                      )}
                    </div>

                    {/* Progress Bar */}
                    <div className="h-1.5 bg-dark-700 rounded-full overflow-hidden">
                      <div
                        className={`h-full rounded-full transition-all duration-500 ${
                          study.status === 'running' ? 'bg-green-500' :
                          study.status === 'completed' ? 'bg-blue-500' : 'bg-primary-500'
                        }`}
                        style={{ width: `${Math.min((study.progress.current / study.progress.total) * 100, 100)}%` }}
                      />
                    </div>

                    {/* Selected Indicator */}
                    {isSelected && (
                      <div className="absolute -bottom-px left-1/2 -translate-x-1/2 w-12 h-1 bg-primary-500 rounded-t-full" />
                    )}
                  </div>
                );
              })}
            </div>
          )}
        </section>

        {/* Study Documentation Section */}
        {selectedPreview && (
          <section className="animate-in fade-in slide-in-from-bottom-4 duration-300">
            {/* Documentation Header */}
            <div className="bg-dark-800 rounded-t-xl border border-dark-600 border-b-0">
              <div className="px-6 py-4 flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <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>
                    <h2 className="text-xl font-semibold text-white">{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-5 py-2.5 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"
                >
                  Open Dashboard
                  <ArrowRight className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* README Content */}
            <div className="bg-dark-850 rounded-b-xl border border-dark-600 border-t-0 overflow-hidden">
              {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>
              ) : (
                <div className="p-8 overflow-x-auto">
                  <article className="markdown-body max-w-none">
                    <ReactMarkdown
                      remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
                      rehypePlugins={[[rehypeKatex, { strict: false, trust: true, output: 'html' }]]}
                      components={{
                        // Custom heading styles
                        h1: ({ children }) => (
                          <h1 className="text-3xl font-bold text-white mb-6 pb-3 border-b border-dark-600">
                            {children}
                          </h1>
                        ),
                        h2: ({ children }) => (
                          <h2 className="text-2xl font-semibold text-white mt-10 mb-4 pb-2 border-b border-dark-700">
                            {children}
                          </h2>
                        ),
                        h3: ({ children }) => (
                          <h3 className="text-xl font-semibold text-white mt-8 mb-3">
                            {children}
                          </h3>
                        ),
                        h4: ({ children }) => (
                          <h4 className="text-lg font-medium text-white mt-6 mb-2">
                            {children}
                          </h4>
                        ),
                        // Paragraphs
                        p: ({ children }) => (
                          <p className="text-dark-300 leading-relaxed mb-4">
                            {children}
                          </p>
                        ),
                        // Strong/Bold
                        strong: ({ children }) => (
                          <strong className="text-white font-semibold">{children}</strong>
                        ),
                        // Links
                        a: ({ href, children }) => (
                          <a
                            href={href}
                            className="text-primary-400 hover:text-primary-300 underline underline-offset-2"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            {children}
                          </a>
                        ),
                        // Lists
                        ul: ({ children }) => (
                          <ul className="list-disc list-inside text-dark-300 mb-4 space-y-1.5 ml-2">
                            {children}
                          </ul>
                        ),
                        ol: ({ children }) => (
                          <ol className="list-decimal list-inside text-dark-300 mb-4 space-y-1.5 ml-2">
                            {children}
                          </ol>
                        ),
                        li: ({ children }) => (
                          <li className="text-dark-300 leading-relaxed">{children}</li>
                        ),
                        // Code blocks with syntax highlighting
                        code: ({ inline, className, children, ...props }: any) => {
                          const match = /language-(\w+)/.exec(className || '');
                          const language = match ? match[1] : '';

                          if (!inline && language) {
                            return (
                              <div className="my-4 rounded-lg overflow-hidden border border-dark-600">
                                <div className="bg-dark-700 px-4 py-2 text-xs text-dark-400 font-mono border-b border-dark-600">
                                  {language}
                                </div>
                                <SyntaxHighlighter
                                  style={oneDark}
                                  language={language}
                                  PreTag="div"
                                  customStyle={{
                                    margin: 0,
                                    padding: '1rem',
                                    background: '#1a1d23',
                                    fontSize: '0.875rem',
                                  }}
                                  {...props}
                                >
                                  {String(children).replace(/\n$/, '')}
                                </SyntaxHighlighter>
                              </div>
                            );
                          }

                          if (!inline) {
                            return (
                              <pre className="my-4 p-4 bg-dark-700 rounded-lg border border-dark-600 overflow-x-auto">
                                <code className="text-primary-400 text-sm font-mono">{children}</code>
                              </pre>
                            );
                          }

                          return (
                            <code className="px-1.5 py-0.5 bg-dark-700 text-primary-400 rounded text-sm font-mono">
                              {children}
                            </code>
                          );
                        },
                        // Tables
                        table: ({ children }) => (
                          <div className="my-6 overflow-x-auto rounded-lg border border-dark-600">
                            <table className="w-full text-sm">
                              {children}
                            </table>
                          </div>
                        ),
                        thead: ({ children }) => (
                          <thead className="bg-dark-700 text-white">
                            {children}
                          </thead>
                        ),
                        tbody: ({ children }) => (
                          <tbody className="divide-y divide-dark-600">
                            {children}
                          </tbody>
                        ),
                        tr: ({ children }) => (
                          <tr className="hover:bg-dark-750 transition-colors">
                            {children}
                          </tr>
                        ),
                        th: ({ children }) => (
                          <th className="px-4 py-3 text-left font-semibold text-white border-b border-dark-600">
                            {children}
                          </th>
                        ),
                        td: ({ children }) => (
                          <td className="px-4 py-3 text-dark-300">
                            {children}
                          </td>
                        ),
                        // Blockquotes
                        blockquote: ({ children }) => (
                          <blockquote className="my-4 pl-4 border-l-4 border-primary-500 bg-dark-750 py-3 pr-4 rounded-r-lg">
                            {children}
                          </blockquote>
                        ),
                        // Horizontal rules
                        hr: () => (
                          <hr className="my-8 border-dark-600" />
                        ),
                        // Images
                        img: ({ src, alt }) => (
                          <img
                            src={src}
                            alt={alt}
                            className="my-4 rounded-lg max-w-full h-auto border border-dark-600"
                          />
                        ),
                      }}
                    >
                      {readme}
                    </ReactMarkdown>
                  </article>
                </div>
              )}
            </div>
          </section>
        )}

        {/* Empty State when no study selected */}
        {!selectedPreview && studies.length > 0 && (
          <section className="flex items-center justify-center py-16 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 view its documentation</p>
              <p className="text-sm mt-1 text-dark-500">Click on any study card above</p>
            </div>
          </section>
        )}
      </main>
    </div>
  );
};

export default Home;