import React, { useState } from 'react';

// Sample article data
const articles = [
  { id: 1, title: "Getting Started with React Hooks", language: "JavaScript", framework: "React", date: "2024-06-15", content: "React Hooks are a game-changer in the world of React development...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Web Development" },
  { id: 2, title: "Python Data Structures Explained", language: "Python", framework: "Django", date: "2024-06-10", content: "Python offers several built-in data structures that are fundamental to writing efficient and clean code...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Backend" },
  { id: 3, title: "Rust for Systems Programming", language: "Rust", framework: "Actix", date: "2024-06-05", content: "Rust is a systems programming language that runs blazingly fast...", author: { username: "rustacean", avatar: "/api/placeholder/30/30" }, category: "Systems" },
  { id: 4, title: "Introduction to Machine Learning with TensorFlow", language: "Python", framework: "TensorFlow", date: "2024-06-20", content: "Machine Learning is revolutionizing various industries...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "AI" },
  { id: 5, title: "Building RESTful APIs with Express.js", language: "JavaScript", framework: "Express.js", date: "2024-06-25", content: "Express.js is a minimal and flexible Node.js web application framework...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Backend" },
  { id: 6, title: "Vue.js Component Architecture", language: "JavaScript", framework: "Vue.js", date: "2024-06-30", content: "Vue.js offers a component-based architecture that makes building user interfaces a breeze...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Web Development" },
];

// Sample job data
const jobs = [
  { id: 1, title: "Senior React Developer", company: "TechCorp", location: "Remote", salary: "$120k - $150k", description: "Looking for an experienced React developer to lead our front-end team..." },
  { id: 2, title: "Python Backend Engineer", company: "DataSystems", location: "New York, NY", salary: "$100k - $130k", description: "Seeking a Python expert to work on our data processing pipelines..." },
  { id: 3, title: "Full Stack JavaScript Developer", company: "WebSolutions", location: "San Francisco, CA", salary: "$110k - $140k", description: "Join our team to build modern web applications using Node.js and React..." },
];

const NavBar = ({ onSortChange, onLanguageChange, onFrameworkChange, onCategoryChange, mode, onModeChange }) => (
  <nav className="bg-gray-800 text-white p-4">
    <div className="container mx-auto flex flex-wrap justify-between items-center">
      <div className="flex items-center space-x-4">
        <h1 className="text-2xl font-bold">FullStax.dev</h1>
        <div className="flex items-center bg-gray-700 rounded-lg">
          <button 
            className={`px-4 py-2 rounded-lg ${mode === 'articles' ? 'bg-blue-500' : ''}`}
            onClick={() => onModeChange('articles')}
          >
            Articles
          </button>
          <button 
            className={`px-4 py-2 rounded-lg ${mode === 'jobs' ? 'bg-blue-500' : ''}`}
            onClick={() => onModeChange('jobs')}
          >
            Jobs
          </button>
        </div>
      </div>
      {mode === 'articles' && (
        <div className="flex flex-wrap space-x-2 space-y-2 md:space-y-0">
          <select onChange={(e) => onSortChange(e.target.value)} className="bg-white text-black p-2 rounded">
            <option value="dateDesc">Newest First</option>
            <option value="dateAsc">Oldest First</option>
          </select>
          <select onChange={(e) => onLanguageChange(e.target.value)} className="bg-white text-black p-2 rounded">
            <option value="all">All Languages</option>
            <option value="JavaScript">JavaScript</option>
            <option value="Python">Python</option>
            <option value="Rust">Rust</option>
          </select>
          <select onChange={(e) => onFrameworkChange(e.target.value)} className="bg-white text-black p-2 rounded">
            <option value="all">All Frameworks</option>
            <option value="React">React</option>
            <option value="Django">Django</option>
            <option value="Actix">Actix</option>
            <option value="TensorFlow">TensorFlow</option>
            <option value="Express.js">Express.js</option>
            <option value="Vue.js">Vue.js</option>
          </select>
          <select onChange={(e) => onCategoryChange(e.target.value)} className="bg-white text-black p-2 rounded">
            <option value="all">All Categories</option>
            <option value="Web Development">Web Development</option>
            <option value="Backend">Backend</option>
            <option value="Systems">Systems</option>
            <option value="AI">AI</option>
          </select>
        </div>
      )}
    </div>
  </nav>
);

const ArticleCard = ({ article, onReadMore }) => (
  <div className="bg-white rounded-lg shadow-md p-6 mb-4">
    <h2 className="text-xl font-bold mb-2">{article.title}</h2>
    <p className="text-sm text-gray-600 mb-2">By: {article.author.username}</p>
    <p className="text-sm text-gray-500 mb-2">
      Category: {article.category} | Language: {article.language} | Framework: {article.framework} | Date: {article.date}
    </p>
    <p className="mb-4">{article.content.substring(0, 150)}...</p>
    <button onClick={() => onReadMore(article)} className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">Read More</button>
  </div>
);

const JobCard = ({ job }) => (
  <div className="bg-white rounded-lg shadow-md p-6 mb-4">
    <h2 className="text-xl font-bold mb-2">{job.title}</h2>
    <p className="text-sm text-gray-600 mb-2">Company: {job.company}</p>
    <p className="text-sm text-gray-500 mb-2">
      Location: {job.location} | Salary: {job.salary}
    </p>
    <p className="mb-4">{job.description.substring(0, 150)}...</p>
    <button className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition-colors">Apply Now</button>
  </div>
);

const ArticleModal = ({ article, onClose }) => (
  <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center p-4">
    <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-2xl font-bold">{article.title}</h2>
        <button onClick={onClose} className="text-2xl">&times;</button>
      </div>
      <p className="text-sm text-gray-600 mb-2">By: {article.author.username}</p>
      <p className="text-sm text-gray-500 mb-4">
        Category: {article.category} | Language: {article.language} | Framework: {article.framework} | Date: {article.date}
      </p>
      <p className="whitespace-pre-wrap">{article.content}</p>
    </div>
  </div>
);

const App = () => {
  const [mode, setMode] = useState('articles');
  const [sortOrder, setSortOrder] = useState('dateDesc');
  const [selectedLanguage, setSelectedLanguage] = useState('all');
  const [selectedFramework, setSelectedFramework] = useState('all');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [selectedArticle, setSelectedArticle] = useState(null);

  const sortedAndFilteredArticles = articles
    .filter(article => 
      (selectedLanguage === 'all' || article.language === selectedLanguage) &&
      (selectedFramework === 'all' || article.framework === selectedFramework) &&
      (selectedCategory === 'all' || article.category === selectedCategory)
    )
    .sort((a, b) => {
      if (sortOrder === 'dateDesc') {
        return new Date(b.date) - new Date(a.date);
      } else {
        return new Date(a.date) - new Date(b.date);
      }
    });

  const handleReadMore = (article) => {
    setSelectedArticle(article);
  };

  const handleCloseModal = () => {
    setSelectedArticle(null);
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <NavBar 
        mode={mode}
        onModeChange={setMode}
        onSortChange={setSortOrder}
        onLanguageChange={setSelectedLanguage}
        onFrameworkChange={setSelectedFramework}
        onCategoryChange={setSelectedCategory}
      />
      <main className="container mx-auto mt-8 p-4">
        {mode === 'articles' ? (
          sortedAndFilteredArticles.map(article => (
            <ArticleCard key={article.id} article={article} onReadMore={handleReadMore} />
          ))
        ) : (
          jobs.map(job => (
            <JobCard key={job.id} job={job} />
          ))
        )}
      </main>
      {selectedArticle && <ArticleModal article={selectedArticle} onClose={handleCloseModal} />}
    </div>
  );
};

export default App;