import React from 'react';
import { BookOpen, Users, Code, FileText, GraduationCap, Calendar } from 'lucide-react';

export const GroupInfo: React.FC = () => {
  return (
    <div className="h-full overflow-auto" style={{ backgroundColor: '#0a0a0b' }}>
      <div className="max-w-4xl mx-auto py-12 px-8">
        {/* Paper-style header */}
        <header className="text-center mb-12 pb-8 border-b border-zinc-800">
          <p className="text-xs uppercase tracking-[0.3em] text-zinc-500 mb-4 font-medium">
            Artificial Intelligence Project
          </p>
          <h1 className="text-2xl font-serif text-zinc-100 mb-4 leading-tight">
            Package Delivery Search Agent:<br />
            <span className="text-zinc-400">A Comparative Study of Informed and Uninformed Search Algorithms</span>
          </h1>
          <div className="flex items-center justify-center gap-2 text-xs text-zinc-500 mt-6">
            <Calendar className="w-3.5 h-3.5" />
            <span>Academic Year 2025-2026</span>
          </div>
        </header>

        {/* Authors section */}
        <section className="mb-10">
          <div className="flex items-center gap-2 mb-4">
            <Users className="w-4 h-4 text-zinc-500" />
            <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Team Members</h2>
          </div>
          <div className="grid grid-cols-2 gap-4">
            {[
              { name: 'Kacem Mathlouthi', role: 'GL 4/2' },
              { name: 'Mohamed Amine Houas', role: 'GL 4/1' },
              { name: 'Oussema Kraiem', role: 'GL 4/2' },
              { name: 'Alaeddine El Zaouali', role: 'GL 4/2' },
            ].map((author) => (
              <div key={author.name} className="bg-zinc-900/50 border border-zinc-800 rounded-lg p-4">
                <p className="text-zinc-200 font-medium">{author.name}</p>
                <p className="text-xs text-zinc-500 mt-0.5">{author.role}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Abstract */}
        <section className="mb-10">
          <div className="flex items-center gap-2 mb-4">
            <FileText className="w-4 h-4 text-zinc-500" />
            <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Abstract</h2>
          </div>
          <div className="bg-zinc-900/30 border-l-2 border-zinc-700 pl-4 py-2 text-sm text-zinc-400 leading-relaxed text-justify">
            <p>
              This project presents an interactive visualization tool for comparing search algorithms in the context
              of package delivery optimization. We implement and analyze six fundamental search strategies: Breadth-First
              Search (BFS), Depth-First Search (DFS), Iterative Deepening Search (IDS), Uniform Cost Search (UCS),
              Greedy Best-First Search, and A* Search. The system models a grid-based city environment with varying
              traffic conditions, blocked roads, and tunnel shortcuts, providing a comprehensive testbed for evaluating
              algorithm performance in terms of path optimality, computational efficiency, and memory utilization.
            </p>
          </div>
        </section>

        {/* Project Details */}
        <section className="mb-10">
          <div className="flex items-center gap-2 mb-4">
            <Code className="w-4 h-4 text-zinc-500" />
            <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Technical Implementation</h2>
          </div>
          <div className="grid grid-cols-2 gap-4 text-sm">
            <div className="space-y-3">
              <div>
                <p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Backend</p>
                <p className="text-zinc-300">Python 3.11 + FastAPI</p>
              </div>
              <div>
                <p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Frontend</p>
                <p className="text-zinc-300">React 19 + TypeScript + Vite</p>
              </div>
              <div>
                <p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">State Management</p>
                <p className="text-zinc-300">Zustand</p>
              </div>
            </div>
            <div className="space-y-3">
              <div>
                <p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Visualization</p>
                <p className="text-zinc-300">SVG + ShadCN</p>
              </div>
              <div>
                <p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Styling</p>
                <p className="text-zinc-300">Tailwind CSS v4</p>
              </div>
              <div>
                <p className="text-zinc-500 text-xs uppercase tracking-wider mb-1">Communication</p>
                <p className="text-zinc-300">REST API</p>
              </div>
            </div>
          </div>
        </section>

        {/* Algorithms */}
        <section className="mb-10">
          <div className="flex items-center gap-2 mb-4">
            <GraduationCap className="w-4 h-4 text-zinc-500" />
            <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Implemented Algorithms</h2>
          </div>
          <div className="overflow-hidden rounded-lg border border-zinc-800">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-zinc-900/50">
                  <th className="text-left px-4 py-2 text-zinc-400 font-medium">Algorithm</th>
                  <th className="text-left px-4 py-2 text-zinc-400 font-medium">Type</th>
                  <th className="text-left px-4 py-2 text-zinc-400 font-medium">Optimal</th>
                  <th className="text-left px-4 py-2 text-zinc-400 font-medium">Complete</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-800">
                {[
                  { name: 'Breadth-First Search', code: 'BFS', type: 'Uninformed', optimal: 'Yes*', complete: 'Yes' },
                  { name: 'Depth-First Search', code: 'DFS', type: 'Uninformed', optimal: 'No', complete: 'No' },
                  { name: 'Iterative Deepening', code: 'IDS', type: 'Uninformed', optimal: 'Yes*', complete: 'Yes' },
                  { name: 'Uniform Cost Search', code: 'UCS', type: 'Uninformed', optimal: 'Yes', complete: 'Yes' },
                  { name: 'Greedy Best-First', code: 'GBFS', type: 'Informed', optimal: 'No', complete: 'No' },
                  { name: 'A* Search', code: 'A*', type: 'Informed', optimal: 'Yes', complete: 'Yes' },
                ].map((algo) => (
                  <tr key={algo.code} className="hover:bg-zinc-900/30 transition-colors">
                    <td className="px-4 py-2">
                      <span className="text-zinc-300">{algo.name}</span>
                      <span className="text-zinc-600 text-xs ml-2">({algo.code})</span>
                    </td>
                    <td className="px-4 py-2 text-zinc-400">{algo.type}</td>
                    <td className="px-4 py-2 text-zinc-400 font-mono">{algo.optimal}</td>
                    <td className="px-4 py-2 text-zinc-400 font-mono">{algo.complete}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="text-xs text-zinc-600 mt-2 italic">* When step costs are uniform</p>
        </section>

        {/* Heuristics */}
        <section className="mb-10">
          <div className="flex items-center gap-2 mb-4">
            <BookOpen className="w-4 h-4 text-zinc-500" />
            <h2 className="text-sm font-semibold text-zinc-300 uppercase tracking-wider">Heuristic Functions</h2>
          </div>
          <div className="space-y-3 text-sm">
            <div className="bg-zinc-900/30 border border-zinc-800 rounded-lg p-4">
              <p className="text-zinc-300 font-medium mb-1">Manhattan Distance</p>
              <p className="text-zinc-500 font-mono text-xs">h(n) = |x<sub>n</sub> - x<sub>g</sub>| + |y<sub>n</sub> - y<sub>g</sub>|</p>
            </div>
            <div className="bg-zinc-900/30 border border-zinc-800 rounded-lg p-4">
              <p className="text-zinc-300 font-medium mb-1">Euclidean Distance</p>
              <p className="text-zinc-500 font-mono text-xs">h(n) = sqrt((x<sub>n</sub> - x<sub>g</sub>)<sup>2</sup> + (y<sub>n</sub> - y<sub>g</sub>)<sup>2</sup>)</p>
            </div>
            <div className="bg-zinc-900/30 border border-zinc-800 rounded-lg p-4">
              <p className="text-zinc-300 font-medium mb-1">Tunnel-Aware Heuristic</p>
              <p className="text-zinc-500 text-xs">Considers available tunnel shortcuts to improve estimate accuracy</p>
            </div>
          </div>
        </section>

        {/* Footer */}
        <footer className="pt-8 border-t border-zinc-800 text-center">
          <p className="text-xs text-zinc-700 mt-2">
            This project was developed as part of the Artificial Intelligence curriculum
          </p>
        </footer>
      </div>
    </div>
  );
};

export default GroupInfo;