import React, { useState } from 'react';
import { Code, Play, Check, X, ChevronRight, Trophy, BookOpen, Filter, Search, Clock, Award, CheckCircle } from 'lucide-react';

export default function PracticePlatform() {
  const [view, setView] = useState('list'); // 'list' or 'solve'
  const [selectedQuestion, setSelectedQuestion] = useState(null);
  const [code, setCode] = useState('');
  const [language, setLanguage] = useState('javascript');
  const [output, setOutput] = useState('');
  const [testResults, setTestResults] = useState([]);
  const [filterDifficulty, setFilterDifficulty] = useState('all');
  const [filterTopic, setFilterTopic] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');

  const questions = [
    {
      id: 1,
      title: "Two Sum",
      difficulty: "Easy",
      topic: "Arrays",
      solved: true,
      description: "Given an array of integers nums and an integer target, return indices of the two numbers that add up to target.",
      examples: [
        { input: "[2,7,11,15], target = 9", output: "[0,1]" },
        { input: "[3,2,4], target = 6", output: "[1,2]" }
      ],
      testCases: [
        { input: "[2,7,11,15]\n9", expected: "[0,1]" },
        { input: "[3,2,4]\n6", expected: "[1,2]" },
        { input: "[3,3]\n6", expected: "[0,1]" }
      ],
      starterCode: {
        javascript: "function twoSum(nums, target) {\n  // Your code here\n  \n}",
        python: "def two_sum(nums, target):\n    # Your code here\n    pass"
      }
    },
    {
      id: 2,
      title: "Reverse String",
      difficulty: "Easy",
      topic: "Strings",
      solved: true,
      description: "Write a function that reverses a string. The input string is given as an array of characters.",
      examples: [
        { input: '["h","e","l","l","o"]', output: '["o","l","l","e","h"]' },
        { input: '["H","a","n","n","a","h"]', output: '["h","a","n","n","a","H"]' }
      ],
      testCases: [
        { input: '["h","e","l","l","o"]', expected: '["o","l","l","e","h"]' },
        { input: '["H","a","n","n","a","h"]', expected: '["h","a","n","n","a","H"]' }
      ],
      starterCode: {
        javascript: "function reverseString(s) {\n  // Your code here\n  \n}",
        python: "def reverse_string(s):\n    # Your code here\n    pass"
      }
    },
    {
      id: 3,
      title: "Valid Parentheses",
      difficulty: "Medium",
      topic: "Stack",
      solved: false,
      description: "Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.",
      examples: [
        { input: '"()"', output: 'true' },
        { input: '"()[]{}"', output: 'true' },
        { input: '"(]"', output: 'false' }
      ],
      testCases: [
        { input: '"()"', expected: 'true' },
        { input: '"()[]{}"', expected: 'true' },
        { input: '"(]"', expected: 'false' }
      ],
      starterCode: {
        javascript: "function isValid(s) {\n  // Your code here\n  \n}",
        python: "def is_valid(s):\n    # Your code here\n    pass"
      }
    },
    {
      id: 4,
      title: "Binary Search",
      difficulty: "Easy",
      topic: "Searching",
      solved: false,
      description: "Given a sorted array of integers and a target value, return the index if found. If not, return -1.",
      examples: [
        { input: "nums = [-1,0,3,5,9,12], target = 9", output: "4" },
        { input: "nums = [-1,0,3,5,9,12], target = 2", output: "-1" }
      ],
      testCases: [
        { input: "[-1,0,3,5,9,12]\n9", expected: "4" },
        { input: "[-1,0,3,5,9,12]\n2", expected: "-1" }
      ],
      starterCode: {
        javascript: "function search(nums, target) {\n  // Your code here\n  \n}",
        python: "def search(nums, target):\n    # Your code here\n    pass"
      }
    },
    {
      id: 5,
      title: "Merge Two Sorted Lists",
      difficulty: "Medium",
      topic: "Linked List",
      solved: false,
      description: "Merge two sorted linked lists and return it as a sorted list.",
      examples: [
        { input: "list1 = [1,2,4], list2 = [1,3,4]", output: "[1,1,2,3,4,4]" }
      ],
      testCases: [
        { input: "[1,2,4]\n[1,3,4]", expected: "[1,1,2,3,4,4]" }
      ],
      starterCode: {
        javascript: "function mergeTwoLists(list1, list2) {\n  // Your code here\n  \n}",
        python: "def merge_two_lists(list1, list2):\n    # Your code here\n    pass"
      }
    },
    {
      id: 6,
      title: "Maximum Subarray",
      difficulty: "Hard",
      topic: "Dynamic Programming",
      solved: false,
      description: "Given an integer array nums, find the contiguous subarray with the largest sum, and return its sum.",
      examples: [
        { input: "[-2,1,-3,4,-1,2,1,-5,4]", output: "6 (subarray [4,-1,2,1])" }
      ],
      testCases: [
        { input: "[-2,1,-3,4,-1,2,1,-5,4]", expected: "6" }
      ],
      starterCode: {
        javascript: "function maxSubArray(nums) {\n  // Your code here\n  \n}",
        python: "def max_sub_array(nums):\n    # Your code here\n    pass"
      }
    },
    {
      id: 7,
      title: "Fibonacci Number",
      difficulty: "Easy",
      topic: "Recursion",
      solved: true,
      description: "Calculate the nth Fibonacci number. The Fibonacci sequence: F(0) = 0, F(1) = 1, F(n) = F(n-1) + F(n-2).",
      examples: [
        { input: "n = 2", output: "1" },
        { input: "n = 3", output: "2" },
        { input: "n = 4", output: "3" }
      ],
      testCases: [
        { input: "2", expected: "1" },
        { input: "3", expected: "2" },
        { input: "4", expected: "3" }
      ],
      starterCode: {
        javascript: "function fib(n) {\n  // Your code here\n  \n}",
        python: "def fib(n):\n    # Your code here\n    pass"
      }
    },
    {
      id: 8,
      title: "Find Peak Element",
      difficulty: "Medium",
      topic: "Arrays",
      solved: false,
      description: "Find a peak element in an array. A peak element is greater than its neighbors.",
      examples: [
        { input: "[1,2,3,1]", output: "2 (index where 3 is located)" }
      ],
      testCases: [
        { input: "[1,2,3,1]", expected: "2" }
      ],
      starterCode: {
        javascript: "function findPeakElement(nums) {\n  // Your code here\n  \n}",
        python: "def find_peak_element(nums):\n    # Your code here\n    pass"
      }
    }
  ];

  const topics = ['all', 'Arrays', 'Strings', 'Stack', 'Searching', 'Linked List', 'Dynamic Programming', 'Recursion'];
  
  const getDifficultyColor = (difficulty) => {
    switch(difficulty) {
      case 'Easy': return 'text-green-400 bg-green-400/10 border-green-400/30';
      case 'Medium': return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/30';
      case 'Hard': return 'text-red-400 bg-red-400/10 border-red-400/30';
      default: return 'text-gray-400';
    }
  };

  const filteredQuestions = questions.filter(q => {
    const matchesDifficulty = filterDifficulty === 'all' || q.difficulty === filterDifficulty;
    const matchesTopic = filterTopic === 'all' || q.topic === filterTopic;
    const matchesSearch = q.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         q.topic.toLowerCase().includes(searchTerm.toLowerCase());
    return matchesDifficulty && matchesTopic && matchesSearch;
  });

  const openQuestion = (question) => {
    setSelectedQuestion(question);
    setCode(question.starterCode[language]);
    setView('solve');
    setOutput('');
    setTestResults([]);
  };

  const runCode = () => {
    try {
      setOutput('Running test cases...\n');
      const results = [];
      
      selectedQuestion.testCases.forEach((test, idx) => {
        try {
          const logs = [];
          const originalLog = console.log;
          console.log = (...args) => logs.push(args.join(' '));
          
          eval(code);
          const result = logs.join('');
          const passed = result.trim() === test.expected.trim();
          
          results.push({
            testCase: idx + 1,
            passed,
            input: test.input,
            expected: test.expected,
            got: result || 'No output'
          });
          
          console.log = originalLog;
        } catch (err) {
          results.push({
            testCase: idx + 1,
            passed: false,
            error: err.message
          });
        }
      });
      
      setTestResults(results);
      const passedCount = results.filter(r => r.passed).length;
      setOutput(`${passedCount}/${results.length} test cases passed`);
    } catch (err) {
      setOutput(`Error: ${err.message}`);
    }
  };

  const stats = {
    total: questions.length,
    solved: questions.filter(q => q.solved).length,
    easy: questions.filter(q => q.difficulty === 'Easy').length,
    medium: questions.filter(q => q.difficulty === 'Medium').length,
    hard: questions.filter(q => q.difficulty === 'Hard').length
  };

  if (view === 'solve' && selectedQuestion) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
        <div className="flex flex-col h-screen">
          {/* Header */}
          <div className="bg-slate-800 border-b border-slate-700 p-4">
            <div className="flex items-center justify-between">
              <button
                onClick={() => setView('list')}
                className="text-purple-400 hover:text-purple-300 font-medium flex items-center gap-2"
              >
                ← Back to Problems
              </button>
              <h2 className="text-xl font-bold text-white">{selectedQuestion.title}</h2>
              <div className={`px-3 py-1 rounded-full border text-sm font-semibold ${getDifficultyColor(selectedQuestion.difficulty)}`}>
                {selectedQuestion.difficulty}
              </div>
            </div>
          </div>

          <div className="flex-1 flex overflow-hidden">
            {/* Problem Description */}
            <div className="w-1/2 overflow-auto bg-slate-800 p-6 border-r border-slate-700">
              <h3 className="text-2xl font-bold text-white mb-4">{selectedQuestion.title}</h3>
              
              <div className="mb-6">
                <span className="text-gray-400 text-sm">Topic: </span>
                <span className="text-purple-400 font-medium">{selectedQuestion.topic}</span>
              </div>

              <div className="text-gray-300 mb-6 leading-relaxed">
                {selectedQuestion.description}
              </div>

              <h4 className="text-white font-bold mb-3">Examples:</h4>
              {selectedQuestion.examples.map((ex, idx) => (
                <div key={idx} className="bg-slate-900 p-4 rounded-lg mb-3">
                  <p className="text-gray-400 text-sm mb-1">Input:</p>
                  <p className="text-green-400 font-mono text-sm mb-2">{ex.input}</p>
                  <p className="text-gray-400 text-sm mb-1">Output:</p>
                  <p className="text-blue-400 font-mono text-sm">{ex.output}</p>
                </div>
              ))}
            </div>

            {/* Code Editor & Output */}
            <div className="w-1/2 flex flex-col">
              {/* Language Selector */}
              <div className="bg-slate-800 p-3 border-b border-slate-700 flex items-center justify-between">
                <select
                  value={language}
                  onChange={(e) => {
                    setLanguage(e.target.value);
                    setCode(selectedQuestion.starterCode[e.target.value]);
                  }}
                  className="bg-slate-700 text-white px-4 py-2 rounded-lg border border-slate-600"
                >
                  <option value="javascript">JavaScript</option>
                  <option value="python">Python</option>
                </select>
                <button
                  onClick={runCode}
                  className="px-6 py-2 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg font-semibold hover:from-green-700 hover:to-emerald-700 flex items-center gap-2"
                >
                  <Play className="w-4 h-4" />
                  Run Code
                </button>
              </div>

              {/* Code Editor */}
              <textarea
                value={code}
                onChange={(e) => setCode(e.target.value)}
                className="flex-1 bg-slate-900 text-gray-100 p-4 font-mono text-sm focus:outline-none resize-none"
                spellCheck="false"
              />

              {/* Test Results */}
              <div className="h-64 bg-slate-800 border-t border-slate-700 overflow-auto p-4">
                <h4 className="text-white font-bold mb-3">Test Results:</h4>
                {testResults.length === 0 ? (
                  <p className="text-gray-400">Run your code to see test results...</p>
                ) : (
                  <div className="space-y-2">
                    {testResults.map((result, idx) => (
                      <div key={idx} className={`p-3 rounded-lg ${result.passed ? 'bg-green-900/30' : 'bg-red-900/30'}`}>
                        <div className="flex items-center gap-2 mb-2">
                          {result.passed ? (
                            <Check className="w-4 h-4 text-green-400" />
                          ) : (
                            <X className="w-4 h-4 text-red-400" />
                          )}
                          <span className={result.passed ? 'text-green-400' : 'text-red-400'}>
                            Test Case {result.testCase}: {result.passed ? 'PASSED' : 'FAILED'}
                          </span>
                        </div>
                        {!result.passed && (
                          <div className="text-sm text-gray-300 ml-6">
                            {result.error ? (
                              <p>Error: {result.error}</p>
                            ) : (
                              <>
                                <p>Expected: {result.expected}</p>
                                <p>Got: {result.got}</p>
                              </>
                            )}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 p-6">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-5xl font-bold text-white mb-3 flex items-center justify-center gap-3">
            <BookOpen className="w-12 h-12 text-purple-400" />
            Practice Problems
          </h1>
          <p className="text-gray-300 text-lg">Master coding with curated problems</p>
        </div>

        {/* Stats Cards */}
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
          <div className="bg-slate-800 rounded-xl p-4 text-center border border-slate-700">
            <Trophy className="w-8 h-8 text-yellow-400 mx-auto mb-2" />
            <p className="text-3xl font-bold text-white">{stats.solved}</p>
            <p className="text-gray-400 text-sm">Solved</p>
          </div>
          <div className="bg-slate-800 rounded-xl p-4 text-center border border-slate-700">
            <Award className="w-8 h-8 text-purple-400 mx-auto mb-2" />
            <p className="text-3xl font-bold text-white">{stats.total}</p>
            <p className="text-gray-400 text-sm">Total</p>
          </div>
          <div className="bg-slate-800 rounded-xl p-4 text-center border border-green-700/30">
            <p className="text-3xl font-bold text-green-400">{stats.easy}</p>
            <p className="text-gray-400 text-sm">Easy</p>
          </div>
          <div className="bg-slate-800 rounded-xl p-4 text-center border border-yellow-700/30">
            <p className="text-3xl font-bold text-yellow-400">{stats.medium}</p>
            <p className="text-gray-400 text-sm">Medium</p>
          </div>
          <div className="bg-slate-800 rounded-xl p-4 text-center border border-red-700/30">
            <p className="text-3xl font-bold text-red-400">{stats.hard}</p>
            <p className="text-gray-400 text-sm">Hard</p>
          </div>
        </div>

        {/* Filters */}
        <div className="bg-slate-800 rounded-xl p-4 mb-6 border border-slate-700">
          <div className="flex flex-col md:flex-row gap-4">
            <div className="flex-1 relative">
              <Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
              <input
                type="text"
                placeholder="Search problems..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-4 py-3 bg-slate-700 text-white rounded-lg border border-slate-600 focus:border-purple-500 focus:outline-none"
              />
            </div>
            <select
              value={filterDifficulty}
              onChange={(e) => setFilterDifficulty(e.target.value)}
              className="px-4 py-3 bg-slate-700 text-white rounded-lg border border-slate-600"
            >
              <option value="all">All Difficulty</option>
              <option value="Easy">Easy</option>
              <option value="Medium">Medium</option>
              <option value="Hard">Hard</option>
            </select>
            <select
              value={filterTopic}
              onChange={(e) => setFilterTopic(e.target.value)}
              className="px-4 py-3 bg-slate-700 text-white rounded-lg border border-slate-600"
            >
              {topics.map(topic => (
                <option key={topic} value={topic}>
                  {topic === 'all' ? 'All Topics' : topic}
                </option>
              ))}
            </select>
          </div>
        </div>

        {/* Problems Table */}
        <div className="bg-slate-800 rounded-xl overflow-hidden border border-slate-700">
          <table className="w-full">
            <thead className="bg-slate-700">
              <tr>
                <th className="px-6 py-4 text-left text-white font-semibold">Status</th>
                <th className="px-6 py-4 text-left text-white font-semibold">Title</th>
                <th className="px-6 py-4 text-left text-white font-semibold">Topic</th>
                <th className="px-6 py-4 text-left text-white font-semibold">Difficulty</th>
                <th className="px-6 py-4 text-left text-white font-semibold">Action</th>
              </tr>
            </thead>
            <tbody>
              {filteredQuestions.map((q, idx) => (
                <tr key={q.id} className="border-t border-slate-700 hover:bg-slate-700/50 transition-colors">
                  <td className="px-6 py-4">
                    {q.solved ? (
                      <CheckCircle className="w-5 h-5 text-green-400" />
                    ) : (
                      <div className="w-5 h-5 rounded-full border-2 border-gray-600" />
                    )}
                  </td>
                  <td className="px-6 py-4">
                    <span className="text-white font-medium">{q.title}</span>
                  </td>
                  <td className="px-6 py-4">
                    <span className="text-purple-400 text-sm">{q.topic}</span>
                  </td>
                  <td className="px-6 py-4">
                    <span className={`px-3 py-1 rounded-full border text-sm font-semibold ${getDifficultyColor(q.difficulty)}`}>
                      {q.difficulty}
                    </span>
                  </td>
                  <td className="px-6 py-4">
                    <button
                      onClick={() => openQuestion(q)}
                      className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-medium transition-all flex items-center gap-2"
                    >
                      Solve
                      <ChevronRight className="w-4 h-4" />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}