"use client";

import {
  FileText,
  Mail,
  Phone,
  MapPin,
  Briefcase,
  GraduationCap,
  Award,
  Download,
  Maximize2,
} from "lucide-react";
import type { ResumeData } from "@/lib/resume";

interface ResumeViewerProps {
  resumeData: ResumeData | null;
  resumeUrl?: string | null;
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  onExpand?: () => void;
  expanded?: boolean;
}

export function ResumeViewer({
  resumeData,
  resumeUrl,
  firstName,
  lastName,
  email,
  phone,
  onExpand,
  expanded,
}: ResumeViewerProps) {
  const fullName = `${firstName} ${lastName}`;

  return (
    <div className="bg-gray-100 rounded-xl border border-gray-200 shadow-sm flex flex-col h-full overflow-hidden">
      {/* Resume Toolbar */}
      <div className="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200">
        <div className="flex items-center gap-2">
          <FileText className="w-4 h-4 text-blue-600" />
          <span className="text-sm font-semibold text-gray-900">Resume</span>
          {resumeUrl && (
            <span className="text-xs text-gray-400">
              {resumeUrl.split(".").pop()?.toUpperCase() || "PDF"}
            </span>
          )}
        </div>
        <div className="flex items-center gap-1">
          {onExpand && (
            <button
              onClick={onExpand}
              className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
              title={expanded ? "Collapse" : "Expand"}
            >
              <Maximize2 className="w-4 h-4" />
            </button>
          )}
          {resumeUrl && (
            <a
              href={resumeUrl}
              target="_blank"
              rel="noreferrer"
              className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
              title="Download resume"
            >
              <Download className="w-4 h-4" />
            </a>
          )}
        </div>
      </div>

      {/* Resume Document */}
      <div className="flex-1 overflow-y-auto p-4">
        <div className="mx-auto max-w-md bg-white shadow-md rounded-lg p-8 min-h-full">
          {/* Header */}
          <div className="text-center pb-4 border-b border-gray-200">
            <h1 className="text-2xl font-bold text-gray-900">{fullName}</h1>
            {resumeData?.title && (
              <p className="text-blue-600 font-medium mt-1">{resumeData.title}</p>
            )}
            <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 mt-3 text-xs text-gray-500">
              <span className="flex items-center gap-1">
                <Mail className="w-3 h-3" />
                {email}
              </span>
              {phone && (
                <span className="flex items-center gap-1">
                  <Phone className="w-3 h-3" />
                  {phone}
                </span>
              )}
              {resumeData?.location && (
                <span className="flex items-center gap-1">
                  <MapPin className="w-3 h-3" />
                  {resumeData.location}
                </span>
              )}
            </div>
          </div>

          {/* Summary */}
          {resumeData?.summary && (
            <div className="pt-4">
              <h2 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
                Summary
              </h2>
              <p className="text-sm text-gray-700 leading-relaxed">{resumeData.summary}</p>
            </div>
          )}

          {/* Experience */}
          {resumeData?.experience && resumeData.experience.length > 0 && (
            <div className="pt-5">
              <h2 className="flex items-center gap-1.5 text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">
                <Briefcase className="w-3.5 h-3.5" />
                Experience
              </h2>
              <div className="space-y-4">
                {resumeData.experience.map((exp, idx) => (
                  <div key={idx}>
                    <div className="flex items-baseline justify-between gap-2">
                      <h3 className="text-sm font-semibold text-gray-900">{exp.role}</h3>
                      <span className="text-xs text-gray-400 whitespace-nowrap">
                        {exp.startDate} – {exp.endDate}
                      </span>
                    </div>
                    <p className="text-sm text-blue-600 font-medium">
                      {exp.company}
                      {exp.location ? ` · ${exp.location}` : ""}
                    </p>
                    <p className="text-xs text-gray-600 mt-1 leading-relaxed whitespace-pre-line">
                      {exp.description}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Education */}
          {resumeData?.education && resumeData.education.length > 0 && (
            <div className="pt-5">
              <h2 className="flex items-center gap-1.5 text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">
                <GraduationCap className="w-3.5 h-3.5" />
                Education
              </h2>
              <div className="space-y-3">
                {resumeData.education.map((edu, idx) => (
                  <div key={idx}>
                    <div className="flex items-baseline justify-between gap-2">
                      <h3 className="text-sm font-semibold text-gray-900">{edu.school}</h3>
                      <span className="text-xs text-gray-400 whitespace-nowrap">
                        {edu.startDate} – {edu.endDate}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600">
                      {edu.degree}
                      {edu.field ? `, ${edu.field}` : ""}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Skills */}
          {resumeData?.skills && resumeData.skills.length > 0 && (
            <div className="pt-5">
              <h2 className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
                Skills
              </h2>
              <div className="flex flex-wrap gap-1.5">
                {resumeData.skills.map((skill) => (
                  <span
                    key={skill}
                    className="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-md font-medium"
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Certifications */}
          {resumeData?.certifications && resumeData.certifications.length > 0 && (
            <div className="pt-5">
              <h2 className="flex items-center gap-1.5 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">
                <Award className="w-3.5 h-3.5" />
                Certifications
              </h2>
              <ul className="space-y-1">
                {resumeData.certifications.map((cert) => (
                  <li key={cert} className="text-sm text-gray-700 flex items-start gap-2">
                    <span className="w-1 h-1 rounded-full bg-gray-400 mt-2 shrink-0" />
                    {cert}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Fallback */}
          {!resumeData?.summary &&
            !resumeData?.experience?.length &&
            !resumeData?.education?.length && (
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <FileText className="w-10 h-10 text-gray-300 mb-3" />
                <p className="text-sm font-medium text-gray-500">No resume on file</p>
                <p className="text-xs text-gray-400 mt-1">
                  This candidate hasn&apos;t uploaded a resume yet.
                </p>
              </div>
            )}
        </div>
      </div>
    </div>
  );
}