import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { PlusIcon, MapPinIcon, TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
import { propertiesAPI } from '../../services/api';
import LoadingSpinner from '../../components/UI/LoadingSpinner';
import PropertyForm from '../../components/Properties/PropertyForm';
import toast from 'react-hot-toast';

const Properties = () => {
  const [properties, setProperties] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showCreateForm, setShowCreateForm] = useState(false);

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

  const fetchProperties = async () => {
    try {
      setLoading(true);
      const response = await propertiesAPI.getAll();
      console.log('Properties API response:', response);
      console.log('Response data:', response.data);
      console.log('Response data type:', typeof response.data);
      
      // Handle different possible response structures
      let propertiesData = [];
      if (response.data?.data?.properties) {
        propertiesData = Array.isArray(response.data.data.properties) ? response.data.data.properties : [];
        console.log('Using response.data.data.properties:', propertiesData);
      } else if (response.data?.data) {
        propertiesData = Array.isArray(response.data.data) ? response.data.data : [];
        console.log('Using response.data.data:', propertiesData);
      } else if (response.data) {
        propertiesData = Array.isArray(response.data) ? response.data : [];
        console.log('Using response.data:', propertiesData);
      }
      
      console.log('Final properties data:', propertiesData);
      setProperties(propertiesData);
    } catch (error) {
      console.error('Failed to fetch properties:', error);
      toast.error('Failed to load properties');
      setProperties([]); // Ensure it's always an array
    } finally {
      setLoading(false);
    }
  };

  const handleCreateProperty = async (propertyData) => {
    try {
      await propertiesAPI.create(propertyData);
      toast.success('Property created successfully!');
      setShowCreateForm(false);
      fetchProperties();
    } catch (error) {
      console.error('Failed to create property:', error);
      toast.error(error.response?.data?.message || 'Failed to create property');
      throw error; // Re-throw to let the form handle it
    }
  };

  const handleDelete = async (id, name) => {
    if (window.confirm(`Are you sure you want to delete "${name}"?`)) {
      try {
        await propertiesAPI.delete(id);
        toast.success('Property deleted successfully');
        fetchProperties();
      } catch (error) {
        console.error('Failed to delete property:', error);
        toast.error('Failed to delete property');
      }
    }
  };

  if (loading) {
    return (
      <div className="p-6">
        <h1 className="text-2xl font-bold text-gray-900 mb-6">Properties</h1>
        <div className="flex justify-center items-center h-64">
          <LoadingSpinner size="lg" />
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Properties</h1>
          <p className="text-gray-600">Manage your lawn care properties</p>
        </div>
        <button
          onClick={() => setShowCreateForm(true)}
          className="btn-primary flex items-center gap-2"
        >
          <PlusIcon className="h-5 w-5" />
          Add Property
        </button>
      </div>

      {/* Create Property Form */}
      {showCreateForm && (
        <PropertyForm
          onSubmit={handleCreateProperty}
          onCancel={() => setShowCreateForm(false)}
        />
      )}

      {/* Properties List */}
      {!Array.isArray(properties) || properties.length === 0 ? (
        <div className="card text-center py-12">
          <MapPinIcon className="h-16 w-16 text-gray-300 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">No Properties Yet</h3>
          <p className="text-gray-600 mb-6">Get started by adding your first property</p>
          <button
            onClick={() => setShowCreateForm(true)}
            className="btn-primary"
          >
            Add Your First Property
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {Array.isArray(properties) && properties.map((property) => (
            <div key={property.id} className="card">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900">{property.name}</h3>
                  {property.address && (
                    <p className="text-sm text-gray-600 flex items-center mt-1">
                      <MapPinIcon className="h-4 w-4 mr-1" />
                      {property.address}
                    </p>
                  )}
                </div>
                <div className="flex gap-2">
                  <Link
                    to={`/properties/${property.id}`}
                    className="p-1 text-gray-400 hover:text-blue-600 transition-colors"
                  >
                    <PencilIcon className="h-4 w-4" />
                  </Link>
                  <button
                    onClick={() => handleDelete(property.id, property.name)}
                    className="p-1 text-gray-400 hover:text-red-600 transition-colors"
                  >
                    <TrashIcon className="h-4 w-4" />
                  </button>
                </div>
              </div>

              <div className="space-y-2 text-sm">
                {property.totalArea && (
                  <div className="flex justify-between">
                    <span className="text-gray-600">Total Area:</span>
                    <span className="font-medium">{property.totalArea.toLocaleString()} sq ft</span>
                  </div>
                )}
                <div className="flex justify-between">
                  <span className="text-gray-600">Sections:</span>
                  <span className="font-medium">{property.sectionCount || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">Created:</span>
                  <span className="font-medium">
                    {new Date(property.createdAt).toLocaleDateString()}
                  </span>
                </div>
              </div>

              <div className="mt-4 pt-4 border-t border-gray-200">
                <Link
                  to={`/properties/${property.id}`}
                  className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                >
                  View Details →
                </Link>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default Properties;