import React, { useState } from 'react';
import { User, Mail, Phone, MapPin, CreditCard } from 'lucide-react';

export default function CustomerDetail() {
  const [customerId, setCustomerId] = useState('');
  const [customer, setCustomer] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  const fetchCustomer = async () => {
    if (!customerId) return;
    setLoading(true);
    try {
      const result = await window.mcp.callTool('clover_get_customer', {
        customerId,
        expand: 'addresses,emailAddresses,phoneNumbers,cards',
      });
      setCustomer(result);
    } catch (error) {
      alert('Failed to load customer');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="p-6 bg-gray-50 min-h-screen">
      <h1 className="text-3xl font-bold text-gray-900 mb-6">Customer Details</h1>

      <div className="bg-white rounded-lg shadow p-6 mb-6">
        <div className="flex gap-4">
          <input
            type="text"
            value={customerId}
            onChange={(e) => setCustomerId(e.target.value)}
            placeholder="Enter Customer ID"
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
          />
          <button
            onClick={fetchCustomer}
            disabled={loading}
            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400"
          >
            {loading ? 'Loading...' : 'Load Customer'}
          </button>
        </div>
      </div>

      {customer && (
        <>
          <div className="bg-white rounded-lg shadow p-6 mb-6">
            <div className="flex items-center gap-4 mb-6">
              <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                <User className="w-8 h-8 text-blue-600" />
              </div>
              <div>
                <h2 className="text-2xl font-bold text-gray-900">
                  {customer.firstName} {customer.lastName}
                </h2>
                <p className="text-gray-600">Customer ID: {customer.id}</p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                  <Mail className="w-5 h-5 text-blue-600" />
                  Email Addresses
                </h3>
                {customer.emailAddresses?.length > 0 ? (
                  <ul className="space-y-2">
                    {customer.emailAddresses.map((email: any) => (
                      <li key={email.id} className="text-gray-700">
                        {email.emailAddress}
                        {email.primaryEmail && (
                          <span className="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
                            Primary
                          </span>
                        )}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500">No email addresses</p>
                )}
              </div>

              <div>
                <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                  <Phone className="w-5 h-5 text-green-600" />
                  Phone Numbers
                </h3>
                {customer.phoneNumbers?.length > 0 ? (
                  <ul className="space-y-2">
                    {customer.phoneNumbers.map((phone: any) => (
                      <li key={phone.id} className="text-gray-700">
                        {phone.phoneNumber}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500">No phone numbers</p>
                )}
              </div>

              <div>
                <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                  <MapPin className="w-5 h-5 text-red-600" />
                  Addresses
                </h3>
                {customer.addresses?.length > 0 ? (
                  <ul className="space-y-2">
                    {customer.addresses.map((addr: any) => (
                      <li key={addr.id} className="text-gray-700">
                        {addr.address1}
                        {addr.address2 && `, ${addr.address2}`}
                        <br />
                        {addr.city}, {addr.state} {addr.zip}
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500">No addresses</p>
                )}
              </div>

              <div>
                <h3 className="text-lg font-semibold mb-3 flex items-center gap-2">
                  <CreditCard className="w-5 h-5 text-purple-600" />
                  Payment Cards
                </h3>
                {customer.cards?.length > 0 ? (
                  <ul className="space-y-2">
                    {customer.cards.map((card: any) => (
                      <li key={card.id} className="text-gray-700">
                        {card.cardType} •••• {card.last4}
                        <br />
                        <span className="text-sm text-gray-500">
                          Exp: {card.expirationDate}
                        </span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-gray-500">No saved cards</p>
                )}
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
}
