import { Clock, Calendar } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export interface DashboardApplication {
  id: number | string;
  title?: string;
  company_name?: string;
  applied_at: string;
  expires_at?: string;
  resume_url?: string;
  company_logo?: string;
}

const getLogoUrl = (logo: string | undefined) => {
  if (typeof logo !== 'string' || !logo.trim() || logo === 'null' || logo === 'undefined') return null;
  if (!logo.startsWith('http') && !logo.startsWith('/')) {
    return `/${logo}`;
  }
  return logo;
};

export function RecentApplications({ applications = [] }: { applications?: DashboardApplication[] }) {
  const getStatusColor = (status: string) => {
    switch((status || '').toLowerCase()) {
      case 'offered':
      case 'accepted':
      case 'hired':
        return { bg: "bg-[#dcfce7]", text: "text-[#166534]" };
      case 'interview':
      case 'shortlisted':
        return { bg: "bg-[#ffedd5]", text: "text-[#c2410c]" };
      case 'rejected':
        return { bg: "bg-[#fee2e2]", text: "text-[#b91c1c]" };
      default:
        return { bg: "bg-gray-100", text: "text-gray-600" };
    }
  }

  const getInitials = (name: string) => {
    if (!name) return 'C';
    return name.substring(0, 2).toUpperCase();
  }


  return (
    <div className="bg-white rounded-[20px] shadow-[0_2px_10px_rgba(0,0,0,0.04)] border border-gray-100 p-5 flex flex-col h-full overflow-y-auto min-h-[320px]">
      <div className="flex items-center justify-between mb-5">
        <h3 className="font-semibold text-gray-900">Recent Applications</h3>
        <Link href="/seeker/application" className="text-sm font-medium text-[#ff6b00] hover:underline">View All</Link>
      </div>

      <div className="flex flex-col">
        {applications.length === 0 ? (
          <div className="py-8 text-center text-gray-500 text-sm">No recent applications found.</div>
        ) : (
          applications.slice(0, 3).map((app, index) => {
            const statusStyle = getStatusColor(app.status);
            const logoUrl = getLogoUrl(app.company_logo);
            
            return (
              <div key={app.id}>
                <div className="flex items-start gap-4 py-4">
                  <div className={`relative w-11 h-11 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0 bg-[#8b5cf6] overflow-hidden`}>
                    {logoUrl ? (
                      <Image src={logoUrl} alt={app.company_name || 'Company Logo'} fill className="object-cover" />
                    ) : (
                      <>
                        <div className="w-5 h-5 bg-white/20 skew-x-12 absolute"></div>
                        <span className="relative z-10 text-sm">{getInitials(app.company_name || 'C')}</span>
                      </>
                    )}
                  </div>
                  
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between mb-1.5">
                      <div className="truncate pr-4">
                        <h4 className="font-semibold text-gray-900 text-[15px] truncate">{app.title}</h4>
                        <p className="text-[11px] text-gray-500 mt-0.5">{app.company_name}</p>
                      </div>
                      <div className={`px-4 sm:px-5 py-1 rounded-full text-[9px] font-semibold flex-shrink-0 min-w-[60px] sm:min-w-[70px] text-center ${statusStyle.bg} ${statusStyle.text} capitalize`}>
                        {app.status || 'Applied'}
                      </div>
                    </div>
                    
                    <div className="flex flex-wrap items-center gap-2 sm:gap-4 text-[10px] text-gray-500 mt-2">
                      <div className="flex items-center gap-1.5">
                        <Calendar className="w-3 h-3 text-gray-400" />
                        <span>Applied on: {app.applied_at ? new Date(app.applied_at).toLocaleDateString() : 'N/A'}</span>
                      </div>
                      {app.expires_at && (
                        <div className="flex items-center gap-1.5">
                          <Clock className="w-3 h-3 text-gray-400" />
                          <span>Expires on: {new Date(app.expires_at).toLocaleDateString()}</span>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                {/* Small HR line between items */}
                {index !== applications.length - 1 && (
                  <hr className="ml-0 sm:ml-[60px] border-t border-gray-100" />
                )}
              </div>
            );
          })
        )}
      </div>
    </div>
  );
}