import Layout from '../components/layout/Layout';
import { mockMatches, mockRatings } from '../mocks/matches';
import { Calendar, MapPin, Star, MessageCircle } from 'lucide-react';

const HistoryPage = () => {
  return (
    <Layout>
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Collaboration history</h1>
        <p className="text-gray-600 mb-8">Your previous matches and ratings</p>

        {/* Matches Section */}
        <div className="mb-12">
          <h2 className="text-xl font-bold text-gray-900 mb-4">Your matches</h2>
          <div className="space-y-4">
            {mockMatches.map((match) => (
              <div
                key={match.id}
                className="bg-white rounded-lg shadow-md p-6 border border-gray-200"
              >
                <div className="flex items-start justify-between">
                  <div className="flex items-start space-x-4">
                    <img
                      src={match.user2_avatar}
                      alt={match.user2_name}
                      className="w-16 h-16 rounded-full"
                    />
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">{match.user2_name}</h3>
                      <div className="flex items-center space-x-4 mt-2 text-sm text-gray-600">
                        <div className="flex items-center">
                          <MapPin className="w-4 h-4 mr-1" />
                          {match.event_name}
                        </div>
                        <div className="flex items-center">
                          <Calendar className="w-4 h-4 mr-1" />
                          {new Date(match.created_at).toLocaleDateString('pl-PL')}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <span
                      className={`px-3 py-1 rounded-full text-sm font-medium ${
                        match.status === 'completed'
                          ? 'bg-green-100 text-green-800'
                          : 'bg-blue-100 text-blue-800'
                      }`}
                    >
                      {match.status === 'completed' ? 'Completed' : 'Active'}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Ratings Section */}
        <div>
          <h2 className="text-xl font-bold text-gray-900 mb-4">Received ratings</h2>
          <div className="space-y-4">
            {mockRatings.filter(r => r.rated_id === 1).map((rating) => (
              <div
                key={rating.id}
                className="bg-white rounded-lg shadow-md p-6 border border-gray-200"
              >
                <div className="flex items-start space-x-4 mb-4">
                  <img
                    src={rating.rated_avatar}
                    alt={rating.rated_name}
                    className="w-12 h-12 rounded-full"
                  />
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-bold text-gray-900">{rating.rated_name}</h3>
                      <div className="flex items-center space-x-1">
                        {[...Array(5)].map((_, i) => (
                          <Star
                            key={i}
                            className={`w-4 h-4 ${
                              i < rating.score
                                ? 'fill-yellow-400 text-yellow-400'
                                : 'text-gray-300'
                            }`}
                          />
                        ))}
                      </div>
                    </div>
                    <p className="text-sm text-gray-600 mb-2">{rating.comment}</p>
                    <div className="flex items-center space-x-4 text-xs text-gray-500">
                      <span>{new Date(rating.created_at).toLocaleDateString('en-US')}</span>
                      {rating.would_collaborate_again && (
                        <span className="text-green-600 font-medium">
                          ✓ Would collaborate again
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Stats Card */}
        <div className="mt-8 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg shadow-md p-6 text-white">
          <h3 className="text-xl font-bold mb-4">Your statistics</h3>
          <div className="grid grid-cols-3 gap-4">
            <div className="text-center">
              <div className="text-3xl font-bold">{mockMatches.length}</div>
              <div className="text-sm text-primary-100">Collaborations</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold">4.8</div>
              <div className="text-sm text-primary-100">Average rating</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold">100%</div>
              <div className="text-sm text-primary-100">Would collaborate again</div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default HistoryPage;