/**
 * CloserCard Component
 * Displays who closed the request and closure details
 */

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Mail, Calendar, FileText } from 'lucide-react';
import { formatDateTime } from '@/utils/dateFormatter';

interface CloserInfo {
  name?: string;
  role?: string;
  department?: string;
  email?: string;
  closureDate?: string;
  conclusionRemark?: string;
}

interface CloserCardProps {
  closerInfo: CloserInfo;
  className?: string;
}

export function CloserCard({ closerInfo, className }: CloserCardProps) {
  // If no closure date, don't render
  if (!closerInfo.closureDate) {
    return null;
  }

  // Generate initials from name
  const getInitials = (name?: string) => {
    if (!name) return 'CL';
    return name
      .split(' ')
      .map((n) => n[0])
      .join('')
      .toUpperCase()
      .slice(0, 2);
  };

  const closerName = closerInfo.name || 'System';
  const hasCloserInfo = closerInfo.name || closerInfo.email;

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="text-base">Request Closer</CardTitle>
      </CardHeader>
      <CardContent>
        {hasCloserInfo ? (
          <div className="flex items-start gap-4">
            <Avatar className="h-14 w-14 ring-2 ring-white shadow-md">
              <AvatarFallback className="bg-green-700 text-white font-semibold text-lg">
                {getInitials(closerInfo.name)}
              </AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <h3 className="font-semibold text-gray-900">{closerName}</h3>
              {closerInfo.role && (
                <p className="text-sm text-gray-600">{closerInfo.role}</p>
              )}
              {closerInfo.department && (
                <p className="text-sm text-gray-500">{closerInfo.department}</p>
              )}
              
              <div className="mt-3 space-y-2">
                {/* Email */}
                {closerInfo.email && (
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Mail className="w-4 h-4" />
                    <span>{closerInfo.email}</span>
                  </div>
                )}

                {/* Closure Date */}
                {closerInfo.closureDate && (
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Calendar className="w-4 h-4" />
                    <span>Closed on {formatDateTime(closerInfo.closureDate, { includeTime: true, format: 'short' })}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        ) : (
          <div className="space-y-2">
            <p className="text-sm text-gray-600">Request closed by system</p>
            {closerInfo.closureDate && (
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Calendar className="w-4 h-4" />
                <span>Closed on {formatDateTime(closerInfo.closureDate, { includeTime: true, format: 'short' })}</span>
              </div>
            )}
          </div>
        )}

        {/* Conclusion Remark */}
        {closerInfo.conclusionRemark && (
          <div className="mt-4 pt-4 border-t border-gray-200">
            <div className="flex items-start gap-2">
              <FileText className="w-4 h-4 text-gray-500 mt-0.5 flex-shrink-0" />
              <div className="flex-1">
                <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-1">
                  Conclusion Remark
                </p>
                <p className="text-sm text-gray-700 whitespace-pre-wrap">
                  {closerInfo.conclusionRemark}
                </p>
              </div>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

