import React, { useState } from 'react';
import { OwnerCard } from './OwnerCard';

interface PropertyData {
  address?: string;
  propertyType?: string;
  units?: number;
  sqft?: number;
  yearBuilt?: number;
  lotSize?: string;
  zoning?: string;
  owner?: {
    name?: string;
    company?: string;
    portfolioSize?: number;
    phones?: Array<{ number: string; type?: string }>;
    emails?: string[];
  };
  sales?: Array<{
    date?: string;
    price?: number;
    buyer?: string;
    seller?: string;
  }>;
  debt?: Array<{
    lender?: string;
    amount?: number;
    maturityDate?: string;
    loanType?: string;
  }>;
}

interface PropertyCardProps {
  property: PropertyData;
  onToast?: (msg: string) => void;
}

export function PropertyCard({ property, onToast }: PropertyCardProps) {
  const [expanded, setExpanded] = useState(false);

  const fmtPrice = (n?: number) =>
    n != null ? `$${n.toLocaleString()}` : '—';

  return (
    <div className="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow">
      {/* Header */}
      <button
        onClick={() => setExpanded(!expanded)}
        className="w-full flex items-start justify-between p-4 text-left"
      >
        <div className="flex-1 min-w-0">
          <h3 className="text-sm font-semibold text-reo-dark truncate">
            {property.address || 'Unknown Address'}
          </h3>
          <div className="flex items-center gap-3 mt-1 text-xs text-gray-500">
            {property.propertyType && (
              <span className="badge badge-info">{property.propertyType}</span>
            )}
            {property.units != null && <span>{property.units} units</span>}
            {property.sqft != null && <span>{property.sqft.toLocaleString()} sqft</span>}
            {property.yearBuilt != null && <span>Built {property.yearBuilt}</span>}
          </div>
        </div>
        <svg
          className={`w-5 h-5 text-gray-400 transition-transform flex-shrink-0 mt-1 ${expanded ? 'rotate-180' : ''}`}
          fill="none" viewBox="0 0 24 24" stroke="currentColor"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {/* Expanded Details */}
      {expanded && (
        <div className="px-4 pb-4 space-y-4 border-t border-gray-100">
          {/* Property Details */}
          <div className="pt-3 grid grid-cols-2 gap-2 text-sm">
            {property.lotSize && (
              <div>
                <span className="text-gray-400 text-xs">Lot Size</span>
                <p className="font-medium">{property.lotSize}</p>
              </div>
            )}
            {property.zoning && (
              <div>
                <span className="text-gray-400 text-xs">Zoning</span>
                <p className="font-medium">{property.zoning}</p>
              </div>
            )}
          </div>

          {/* Owner */}
          {property.owner && (
            <div>
              <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Owner</h4>
              <OwnerCard owner={property.owner} onToast={onToast} />
            </div>
          )}

          {/* Sales */}
          {property.sales && property.sales.length > 0 && (
            <div>
              <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Sales History</h4>
              <div className="space-y-2">
                {property.sales.map((sale, i) => (
                  <div key={i} className="flex items-center justify-between text-sm bg-gray-50 rounded px-3 py-2">
                    <div>
                      <span className="text-gray-500">{sale.date || '—'}</span>
                      {sale.buyer && <span className="ml-2 text-gray-600">→ {sale.buyer}</span>}
                    </div>
                    <span className="font-semibold text-reo-dark">{fmtPrice(sale.price)}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Debt */}
          {property.debt && property.debt.length > 0 && (
            <div>
              <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Debt</h4>
              <div className="space-y-2">
                {property.debt.map((d, i) => (
                  <div key={i} className="flex items-center justify-between text-sm bg-gray-50 rounded px-3 py-2">
                    <div>
                      <span className="font-medium">{d.lender || 'Unknown'}</span>
                      {d.loanType && <span className="ml-2 text-gray-400 text-xs">{d.loanType}</span>}
                    </div>
                    <div className="text-right">
                      <span className="font-semibold text-reo-dark">{fmtPrice(d.amount)}</span>
                      {d.maturityDate && (
                        <span className="block text-xs text-gray-400">Due {d.maturityDate}</span>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}
