import Image from "next/image";

export interface DashboardInterview {
  id: number | string;
  interview_date: string; // ISO date string or formatted date
  interview_time?: string;
  job_title?: string;
  company_name?: string;
  company_logo?: string;
}

export function UpcomingInterviews({ interviews = [] }: { interviews?: DashboardInterview[] }) {
  
  const getMonth = (dateStr: string) => {
    if (!dateStr) return 'TBD';
    try {
      const d = new Date(dateStr);
      return d.toLocaleString('default', { month: 'short' }).toUpperCase();
    } catch(e) { return 'TBD'; }
  };

  const getDay = (dateStr: string) => {
    if (!dateStr) return '--';
    try {
      return new Date(dateStr).getDate().toString();
    } catch(e) { return '--'; }
  };

  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">Upcoming Interviews</h3>
        <button className="text-sm font-medium text-[#ff6b00] hover:underline">View All</button>
      </div>
      
      <div className="flex flex-col">
        {interviews.length === 0 ? (
          <div className="py-8 text-center text-gray-500 text-sm">No upcoming interviews.</div>
        ) : (
          interviews.map((interview, index) => (
            <div key={interview.id}>
              <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 gap-3 sm:gap-0">
                <div className="flex gap-3 sm:gap-4 items-center w-full sm:w-auto">
                  {/* Date Box */}
                  <div className="flex flex-col items-center justify-center w-[46px] h-[52px] bg-[#f8f9fa] rounded-xl flex-shrink-0">
                    <span className="text-[9px] font-bold text-gray-600 uppercase mb-0.5">{getMonth(interview.interview_date)}</span>
                    <span className={`text-[15px] font-bold leading-none ${index === 0 ? 'text-gray-900' : 'text-gray-400'}`}>{getDay(interview.interview_date)}</span>
                  </div>
                  
                  <div className="flex items-center gap-3">
                    <div className="w-9 h-9 rounded-full relative flex-shrink-0 overflow-hidden bg-gray-100 flex items-center justify-center">
                      {interview.company_logo ? (
                        <Image src={interview.company_logo} alt={interview.company_name || 'Logo'} fill className="object-cover" />
                      ) : (
                        <span className="text-xs font-bold text-gray-400">{getInitials(interview.company_name || 'C')}</span>
                      )}
                    </div>
                    <div>
                      <h4 className="font-semibold text-gray-900 text-[13px] leading-tight mb-0.5">{interview.job_title}</h4>
                      <p className="text-[10px] text-gray-500">{interview.company_name}</p>
                      <p className="text-[9px] text-gray-400 mt-0.5">{interview.interview_time || new Date(interview.interview_date).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</p>
                    </div>
                  </div>
                </div>
                
                <button className="self-center sm:self-auto px-8 py-2 sm:px-5 sm:py-1.5 bg-[#ff6b00] hover:bg-[#e66000] text-white rounded-md text-[10px] font-semibold transition-colors whitespace-nowrap shadow-sm min-w-[140px] sm:min-w-[90px]">
                  View Details
                </button>
              </div>
              {/* Small HR line between items */}
              {index !== interviews.length - 1 && (
                <hr className="ml-0 sm:ml-[62px] border-t border-gray-100" />
              )}
            </div>
          ))
        )}
      </div>
    </div>
  );
}