/**
 * DealerInformationCard Component
 * Displays dealer details for Claim Management requests
 */

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Building, Mail, Phone, MapPin } from 'lucide-react';
import { DealerInfo } from '@/pages/RequestDetail/types/claimManagement.types';

interface DealerInformationCardProps {
  dealerInfo: DealerInfo;
  className?: string;
}

export function DealerInformationCard({ dealerInfo, className }: DealerInformationCardProps) {
  // Defensive check: Ensure dealerInfo exists
  if (!dealerInfo) {
    console.warn('[DealerInformationCard] dealerInfo is missing');
    return (
      <Card className={className}>
        <CardContent className="py-8 text-center text-gray-500">
          <p>Dealer information not available</p>
        </CardContent>
      </Card>
    );
  }

  // Check if essential fields are present
  if (!dealerInfo.dealerCode && !dealerInfo.dealerName) {
    console.warn('[DealerInformationCard] Dealer info missing essential fields:', dealerInfo);
    return (
      <Card className={className}>
        <CardContent className="py-8 text-center text-gray-500">
          <p>Dealer information incomplete</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-base">
          <Building className="w-5 h-5 text-purple-600" />
          Dealer Information
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* Dealer Code and Name */}
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
              Dealer Code
            </label>
            <p className="text-sm text-gray-900 font-medium mt-1">
              {dealerInfo.dealerCode}
            </p>
          </div>

          <div>
            <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
              Dealer Name
            </label>
            <p className="text-sm text-gray-900 font-medium mt-1">
              {dealerInfo.dealerName}
            </p>
          </div>
        </div>

        {/* Contact Information */}
        <div>
          <label className="text-xs font-medium text-gray-500 uppercase tracking-wide">
            Contact Information
          </label>
          <div className="mt-2 space-y-2">
            {/* Email */}
            <div className="flex items-center gap-2 text-sm text-gray-700">
              <Mail className="w-4 h-4 text-gray-400" />
              <span>{dealerInfo.email}</span>
            </div>

            {/* Phone */}
            <div className="flex items-center gap-2 text-sm text-gray-700">
              <Phone className="w-4 h-4 text-gray-400" />
              <span>{dealerInfo.phone}</span>
            </div>

            {/* Address */}
            <div className="flex items-start gap-2 text-sm text-gray-700">
              <MapPin className="w-4 h-4 text-gray-400 mt-0.5" />
              <span>{dealerInfo.address}</span>
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}