import type {
  ResumeEducation,
  ResumeExperience,
  ResumeModel,
  ResumeProject,
  ResumeRecognition,
} from "@/types/resume";

const SectionTitle = ({ children }: { children: React.ReactNode }) => (
  <h2 className="mb-2 border-b border-current/20 pb-1 text-[0.65rem] font-bold tracking-[0.16em] uppercase">
    {children}
  </h2>
);

export function ResumeHeader({
  resume,
  compact = false,
}: {
  resume: ResumeModel;
  compact?: boolean;
}) {
  return (
    <header className="flex items-center gap-4">
      {resume.photoUrl && (
        <img
          src={resume.photoUrl}
          alt=""
          className="h-16 w-16 rounded-full object-cover"
        />
      )}
      <div>
        <h1 className={compact ? "text-2xl font-bold" : "text-3xl font-bold"}>
          {resume.name}
        </h1>
        <p className="mt-0.5 text-xs font-semibold tracking-[0.14em] uppercase opacity-70">
          {resume.title}
        </p>
      </div>
    </header>
  );
}

export function ContactInformation({ contact }: { contact: string[] }) {
  if (!contact.length) return null;
  return (
    <p className="mt-3 flex flex-wrap gap-x-3 gap-y-1 text-[0.65rem] opacity-80">
      {contact.map((item) => (
        <span key={item}>{item}</span>
      ))}
    </p>
  );
}

export function About({ summary }: { summary: string | null }) {
  if (!summary) return null;
  return (
    <section>
      <SectionTitle>Profile</SectionTitle>
      <p className="text-[0.68rem] leading-relaxed whitespace-pre-line">
        {summary}
      </p>
    </section>
  );
}

export function Experience({ items }: { items: ResumeExperience[] }) {
  if (!items.length) return null;
  return (
    <section>
      <SectionTitle>Experience</SectionTitle>
      <div className="space-y-3">
        {items.map((item) => (
          <article key={item.id}>
            <div className="flex justify-between gap-3">
              <div>
                <h3 className="text-[0.72rem] font-bold">{item.title}</h3>
                <p className="text-[0.66rem] font-medium opacity-70">
                  {item.organization}
                  {item.employmentType ? ` · ${item.employmentType}` : ""}
                </p>
              </div>
              <time className="shrink-0 text-right text-[0.6rem] opacity-60">
                {item.period}
              </time>
            </div>
            {item.highlights.length > 0 && (
              <ul className="mt-1 list-disc space-y-0.5 pl-3 text-[0.63rem] leading-snug">
                {item.highlights.map((highlight, index) => (
                  <li key={`${item.id}-${index}`}>{highlight}</li>
                ))}
              </ul>
            )}
          </article>
        ))}
      </div>
    </section>
  );
}

export function Education({ items }: { items: ResumeEducation[] }) {
  if (!items.length) return null;
  return (
    <section>
      <SectionTitle>Education</SectionTitle>
      <div className="space-y-2">
        {items.map((item) => (
          <article key={item.id}>
            <div className="flex justify-between gap-2">
              <div>
                <h3 className="text-[0.7rem] font-bold">{item.degree}</h3>
                <p className="text-[0.63rem] opacity-75">{item.institution}</p>
                {item.detail && (
                  <p className="text-[0.6rem] opacity-60">{item.detail}</p>
                )}
              </div>
              <time className="text-[0.6rem] opacity-60">{item.year}</time>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

export function Skills({
  skills,
  expertises,
}: {
  skills: string[];
  expertises: string[];
}) {
  const values = [...expertises, ...skills];
  if (!values.length) return null;
  return (
    <section>
      <SectionTitle>Skills</SectionTitle>
      <div className="flex flex-wrap gap-1">
        {values.map((skill) => (
          <span
            key={skill}
            className="rounded bg-current/10 px-1.5 py-0.5 text-[0.6rem] font-medium"
          >
            {skill}
          </span>
        ))}
      </div>
    </section>
  );
}

export function Projects({ items }: { items: ResumeProject[] }) {
  if (!items.length) return null;
  return (
    <section>
      <SectionTitle>Selected Projects</SectionTitle>
      <div className="space-y-1.5">
        {items.map((item) => (
          <article key={item.id}>
            <h3 className="text-[0.68rem] font-bold">{item.name}</h3>
            {item.role && (
              <p className="text-[0.62rem] opacity-70">{item.role}</p>
            )}
            {item.url && (
              <p className="truncate text-[0.58rem] opacity-60">{item.url}</p>
            )}
          </article>
        ))}
      </div>
    </section>
  );
}

function RecognitionList({
  title,
  items,
}: {
  title: string;
  items: ResumeRecognition[];
}) {
  if (!items.length) return null;
  return (
    <section>
      <SectionTitle>{title}</SectionTitle>
      <div className="space-y-1.5">
        {items.map((item) => (
          <article key={item.id} className="flex justify-between gap-2">
            <div>
              <h3 className="text-[0.67rem] font-bold">{item.name}</h3>
              <p className="text-[0.6rem] opacity-70">{item.organization}</p>
            </div>
            <time className="text-[0.6rem] opacity-60">{item.year}</time>
          </article>
        ))}
      </div>
    </section>
  );
}

export const Certificates = ({ items }: { items: ResumeRecognition[] }) => (
  <RecognitionList title="Certificates" items={items} />
);
export const Awards = ({ items }: { items: ResumeRecognition[] }) => (
  <RecognitionList title="Awards" items={items} />
);

export function Languages({ items }: { items: ResumeModel["languages"] }) {
  if (!items.length) return null;
  return (
    <section>
      <SectionTitle>Languages</SectionTitle>
      <div className="space-y-1">
        {items.map((item) => (
          <p key={item.name} className="flex justify-between text-[0.63rem]">
            <span>{item.name}</span>
            <span className="opacity-60">
              {item.proficiency ? `Level ${item.proficiency}` : ""}
            </span>
          </p>
        ))}
      </div>
    </section>
  );
}

export function References({ items }: { items: ResumeModel["references"] }) {
  if (!items.length) return null;
  return (
    <section>
      <SectionTitle>References</SectionTitle>
      <div className="grid grid-cols-2 gap-2">
        {items.map((item) => (
          <article key={item.id}>
            <h3 className="text-[0.66rem] font-bold">{item.name}</h3>
            <p className="text-[0.59rem] opacity-70">
              {[item.role, item.organization].filter(Boolean).join(", ")}
            </p>
            {item.phone && (
              <p className="text-[0.59rem] opacity-60">{item.phone}</p>
            )}
          </article>
        ))}
      </div>
    </section>
  );
}

export function SocialLinks({ links }: { links: ResumeModel["socialLinks"] }) {
  if (!links.length) return null;
  return (
    <section>
      <SectionTitle>Links</SectionTitle>
      <div className="space-y-1">
        {links.map((link) => (
          <p key={link.url} className="truncate text-[0.6rem]">
            <span className="font-semibold">{link.label}: </span>
            {link.url}
          </p>
        ))}
      </div>
    </section>
  );
}