import { useState, useEffect } from 'react';
import { Calendar, Clock, Users, Trophy, Plus, Trash2 } from 'lucide-react';

export default function FootballApp() {
  const [matches, setMatches] = useState([]);
  const [newMatch, setNewMatch] = useState({
    homeTeam: '',
    awayTeam: '',
    homeScore: 0,
    awayScore: 0,
    date: '',
    time: '',
    venue: ''
  });

  useEffect(() => {
    fetchMatches();
  }, []);

  const fetchMatches = async () => {
    try {
      const response = await fetch('https://www.sitebrew.ai/api/ADGXZF/matches');
      const data = await response.json();
      setMatches(data.document || []);
    } catch (error) {
      console.error('Error fetching matches:', error);
    }
  };

  const addMatch = async (e) => {
    e.preventDefault();
    try {
      await fetch('https://www.sitebrew.ai/api/ADGXZF/matches', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          document: newMatch
        }),
      });
      fetchMatches();
      setNewMatch({
        homeTeam: '',
        awayTeam: '',
        homeScore: 0,
        awayScore: 0,
        date: '',
        time: '',
        venue: ''
      });
    } catch (error) {
      console.error('Error adding match:', error);
    }
  };

  const deleteMatch = async (id) => {
    try {
      await fetch(`https://www.sitebrew.ai/api/ADGXZF/matches`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          document: { _id: id }
        }),
      });
      fetchMatches();
    } catch (error) {
      console.error('Error deleting match:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-4xl mx-auto">
        <header className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-2">
            <Trophy className="w-8 h-8 text-blue-600" />
            Football Match Tracker
          </h1>
        </header>

        {/* Add Match Form */}
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-xl font-semibold mb-4 text-gray-800">Add New Match</h2>
          <form onSubmit={addMatch} className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <input
              type="text"
              placeholder="Home Team"
              value={newMatch.homeTeam}
              onChange={(e) => setNewMatch({...newMatch, homeTeam: e.target.value})}
              className="p-2 border rounded-md"
              required
            />
            <input
              type="text"
              placeholder="Away Team"
              value={newMatch.awayTeam}
              onChange={(e) => setNewMatch({...newMatch, awayTeam: e.target.value})}
              className="p-2 border rounded-md"
              required
            />
            <input
              type="number"
              placeholder="Home Score"
              value={newMatch.homeScore}
              onChange={(e) => setNewMatch({...newMatch, homeScore: parseInt(e.target.value)})}
              className="p-2 border rounded-md"
              required
            />
            <input
              type="number"
              placeholder="Away Score"
              value={newMatch.awayScore}
              onChange={(e) => setNewMatch({...newMatch, awayScore: parseInt(e.target.value)})}
              className="p-2 border rounded-md"
              required
            />
            <input
              type="date"
              value={newMatch.date}
              onChange={(e) => setNewMatch({...newMatch, date: e.target.value})}
              className="p-2 border rounded-md"
              required
            />
            <input
              type="time"
              value={newMatch.time}
              onChange={(e) => setNewMatch({...newMatch, time: e.target.value})}
              className="p-2 border rounded-md"
              required
            />
            <input
              type="text"
              placeholder="Venue"
              value={newMatch.venue}
              onChange={(e) => setNewMatch({...newMatch, venue: e.target.value})}
              className="p-2 border rounded-md md:col-span-2"
              required
            />
            <button
              type="submit"
              className="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors md:col-span-2 flex items-center justify-center gap-2"
            >
              <Plus className="w-4 h-4" />
              Add Match
            </button>
          </form>
        </div>

        {/* Matches List */}
        <div className="grid grid-cols-1 gap-4">
          {matches.map((match) => (
            <div key={match._id} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
              <div className="flex justify-between items-center mb-4">
                <div className="flex items-center gap-2">
                  <Calendar className="w-4 h-4 text-gray-500" />
                  <span className="text-gray-600">{match.date}</span>
                  <Clock className="w-4 h-4 text-gray-500 ml-2" />
                  <span className="text-gray-600">{match.time}</span>
                </div>
                <button
                  onClick={() => deleteMatch(match._id)}
                  className="text-red-500 hover:text-red-700 transition-colors"
                >
                  <Trash2 className="w-5 h-5" />
                </button>
              </div>
              
              <div className="flex justify-between items-center">
                <div className="flex-1 text-center">
                  <h3 className="text-xl font-semibold text-gray-800">{match.homeTeam}</h3>
                </div>
                <div className="flex items-center gap-4 px-6">
                  <span className="text-2xl font-bold text-gray-900">{match.homeScore}</span>
                  <span className="text-gray-400">vs</span>
                  <span className="text-2xl font-bold text-gray-900">{match.awayScore}</span>
                </div>
                <div className="flex-1 text-center">
                  <h3 className="text-xl font-semibold text-gray-800">{match.awayTeam}</h3>
                </div>
              </div>
              
              <div className="mt-4 flex items-center gap-2 justify-center text-gray-600">
                <Users className="w-4 h-4" />
                <span>{match.venue}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}