import React, { useState, useEffect } from 'react';
import { ShoppingEvent } from '../types';
import { shoppingEventApi } from '../services/api';

const ShoppingEventList: React.FC = () => {
  const [events, setEvents] = useState<ShoppingEvent[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

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

  const fetchEvents = async () => {
    try {
      setLoading(true);
      const response = await shoppingEventApi.getAll();
      setEvents(response.data);
    } catch (err) {
      setError('Failed to fetch shopping events');
      console.error('Error fetching events:', err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-gray-900">Shopping Events</h1>
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
          Add New Event
        </button>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
          {error}
        </div>
      )}

      <div className="bg-white shadow rounded-lg overflow-hidden">
        {events.length === 0 ? (
          <div className="text-center py-12">
            <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 48 48">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
            </svg>
            <h3 className="mt-2 text-sm font-medium text-gray-900">No shopping events</h3>
            <p className="mt-1 text-sm text-gray-500">Get started by recording your first purchase.</p>
          </div>
        ) : (
          <div className="space-y-4 p-6">
            {events.map((event) => (
              <div key={event.id} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
                <div className="flex justify-between items-start mb-4">
                  <div>
                    <h3 className="text-lg font-medium text-gray-900">{event.shop.name}</h3>
                    <p className="text-sm text-gray-600">{event.shop.city}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-sm font-medium text-gray-900">
                      {new Date(event.date).toLocaleDateString()}
                    </p>
                    {event.total_amount && (
                      <p className="text-lg font-semibold text-green-600">
                        ${event.total_amount.toFixed(2)}
                      </p>
                    )}
                  </div>
                </div>

                {event.groceries.length > 0 && (
                  <div className="mb-4">
                    <h4 className="text-sm font-medium text-gray-700 mb-2">Items Purchased:</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                      {event.groceries.map((grocery) => (
                        <div key={grocery.id} className="bg-gray-50 rounded px-3 py-2">
                          <span className="text-sm text-gray-900">{grocery.name}</span>
                          <span className="text-xs text-gray-600 ml-2">${grocery.price}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {event.notes && (
                  <div className="mb-4">
                    <h4 className="text-sm font-medium text-gray-700 mb-1">Notes:</h4>
                    <p className="text-sm text-gray-600">{event.notes}</p>
                  </div>
                )}

                <div className="flex justify-between items-center text-sm">
                  <span className="text-gray-500">
                    Event #{event.id} • {new Date(event.created_at).toLocaleDateString()}
                  </span>
                  <div className="flex space-x-2">
                    <button className="text-indigo-600 hover:text-indigo-900">
                      View Details
                    </button>
                    <button className="text-red-600 hover:text-red-900">
                      Delete
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default ShoppingEventList;