'use client';

import { useState } from 'react';
import { Spinner } from './spinner';
import { useSession } from 'next-auth/react';

type ResumeJSON = Partial<{
  header: Partial<{ name: string; title: string; contact: Partial<{ email: string; phone: string; location: string; links: string[] }> }>;
  summary: string;
  skills: Partial<{ categories: Array<Partial<{ name: string; items: string[] }>> }>;
  experience: Array<Partial<{ company: string; title: string; startDate: string; endDate: string; location: string; highlights: string[]; technologies: string[] }>>;
  projects: Array<Partial<{ name: string; description: string; impact: string; technologies: string[]; link: string }>>;
  education: Array<Partial<{ institution: string; degree: string; graduationDate: string; location: string }>>;
  certifications: Array<Partial<{ name: string; issuer: string; date: string }>>;
  links: Array<Partial<{ label: string; url: string }>>;
}>;

interface ResumeViewProps {
  resume: ResumeJSON | null | undefined;
  roleName?: string;
  badgeId?: string;
  isPublic?: boolean;
  showDownloadButton?: boolean;
}

function asText(value: unknown): string {
  if (value === undefined || value === null) return '';
  if (typeof value === 'string') return value;
  return String(value);
}

function hasText(value: unknown): boolean {
  return asText(value).trim().length > 0;
}

function hasAnyText(...values: unknown[]): boolean {
  return values.some(hasText);
}

const Row = ({ label, value }: { label: string; value?: string }) => {
  if (!value) return null;
  return (
    <div className={'flex flex-col sm:flex-row sm:items-baseline gap-1'}>
      <div className={'text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>{label}</div>
      <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{value}</div>
    </div>
  );
};

export default function ResumeView({ resume, roleName, badgeId, isPublic, showDownloadButton }: ResumeViewProps) {
  const [isDownloading, setIsDownloading] = useState(false);
  const { data: session } = useSession();

  const header = resume?.header || {};
  const contact = header?.contact || {} as any;
  const skills = resume?.skills || {} as any;
  const experience = Array.isArray(resume?.experience) ? (resume?.experience as any[]) : [];
  const projects = Array.isArray(resume?.projects) ? (resume?.projects as any[]) : [];
  const education = Array.isArray(resume?.education) ? (resume?.education as any[]) : [];
  const certifications = Array.isArray(resume?.certifications) ? (resume?.certifications as any[]) : [];
  const links = Array.isArray(resume?.links) ? (resume?.links as any[]) : [];

  const canDownload = !!(showDownloadButton && badgeId);

  // Determine which sections have meaningful content and filter empty entries
  const filteredSkillCategories = Array.isArray(skills?.categories)
    ? (skills.categories as any[]).filter((cat: any) => Array.isArray(cat?.items) && cat.items.some(hasText))
    : [];
  const hasSkillsSection = filteredSkillCategories.length > 0;

  const filteredExperience = experience.filter((exp: any) =>
    hasAnyText(exp?.title, exp?.company, exp?.startDate, exp?.endDate) ||
    (Array.isArray(exp?.highlights) && exp.highlights.some(hasText)) ||
    (Array.isArray(exp?.technologies) && exp.technologies.some(hasText))
  );
  const hasExperienceSection = filteredExperience.length > 0;

  const filteredProjects = projects.filter((p: any) =>
    hasAnyText(p?.name, p?.description, p?.impact, p?.link) ||
    (Array.isArray(p?.technologies) && p.technologies.some(hasText))
  );
  const hasProjectsSection = filteredProjects.length > 0;

  const filteredEducation = education.filter((e: any) => hasAnyText(e?.degree, e?.institution, e?.graduationDate));
  const hasEducationSection = filteredEducation.length > 0;

  const filteredCertifications = certifications.filter((c: any) => hasAnyText(c?.name, c?.issuer, c?.date));
  const hasCertificationsSection = filteredCertifications.length > 0;

  const filteredLinks = links.filter((l: any) => hasAnyText(l?.label, l?.url));
  const hasLinksSection = filteredLinks.length > 0;

  const handleDownloadResume = async () => {
    if (!badgeId) return;
    try {
      setIsDownloading(true);
      const apiGatewayUrl = process.env.NEXT_PUBLIC_API_GATEWAY_URL;
      if (!apiGatewayUrl) throw new Error('API not configured');
      const usePublic = !!isPublic;
      const idToken = (session as any)?.id_token;
      const path = usePublic ? `/share/badge/${badgeId}/resume` : `/user/assessment/${badgeId}/resume`;
      const res = await fetch(`${apiGatewayUrl}${path}`, {
        method: 'GET',
        headers: (!usePublic && idToken) ? { 'Authorization': `Bearer ${idToken}` } : {}
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data?.error || 'Unable to fetch Resume');
      const url = data?.url;
      if (!url) throw new Error('Missing URL');
      if (typeof window !== 'undefined') window.location.href = url;
    } catch (e) {
      // eslint-disable-next-line no-console
      console.error('[ResumeView] Failed to download resume', e);
    } finally {
      setIsDownloading(false);
    }
  };

  return (
    <div className={'space-y-8'}>
      <div className={'flex items-center justify-between'}>
        <div>
          <div className={'text-2xl font-bold'} style={{ color: 'var(--text-main)' }}>{asText(header?.name) || 'Resume'}</div>
          <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{asText(header?.title)}</div>
          {roleName ? (
            <div className={'text-sm mt-1'} style={{ color: 'var(--text-secondary)' }}>Role: {roleName}</div>
          ) : null}
          <div className={'text-sm mt-2'} style={{ color: 'var(--text-secondary)' }}>
            {[asText(contact?.location), asText(contact?.email), asText(contact?.phone)].filter(Boolean).join(' • ')}
          </div>
        </div>
        {canDownload ? (
          <button
            type="button"
            onClick={handleDownloadResume}
            disabled={isDownloading}
            className={'px-3 py-2 text-sm rounded-md border'}
            style={{ borderColor: 'var(--icon-button-secondary)', color: 'var(--text-main)', background: 'var(--content-card-background)' }}
          >
            {isDownloading ? <Spinner /> : 'Download Resume (.docx)'}
          </button>
        ) : null}
      </div>

      {asText(resume?.summary) ? (
        <div>
          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Summary</div>
          <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{asText(resume?.summary)}</div>
        </div>
      ) : null}

      {hasSkillsSection ? (
        <div>
          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Skills</div>
          <div className={'space-y-1'}>
            {filteredSkillCategories.map((cat: any, idx: number) => (
              <Row
                key={idx}
                label={asText(cat?.name)}
                value={(Array.isArray(cat?.items) ? cat.items.filter(hasText) : []).join(', ')}
              />
            ))}
          </div>
        </div>
      ) : null}

      {hasExperienceSection ? (
        <div>
          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Experience</div>
          <div className={'space-y-4'}>
            {filteredExperience.map((exp: any, idx: number) => (
              <div key={idx} className={'space-y-1'}>
                <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>
                  {asText(exp?.title)}{asText(exp?.company) ? ` — ${asText(exp?.company)}` : ''}
                </div>
                <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>
                  {(asText(exp?.startDate) || asText(exp?.endDate)) ? `${asText(exp?.startDate)} – ${asText(exp?.endDate) || 'Present'}` : ''}
                </div>
                {Array.isArray(exp?.highlights) && exp.highlights.filter(hasText).length > 0 ? (
                  <ul className={'list-disc pl-5 text-sm'} style={{ color: 'var(--text-secondary)' }}>
                    {exp.highlights.filter(hasText).map((h: any, i: number) => (
                      <li key={i}>{asText(h)}</li>
                    ))}
                  </ul>
                ) : null}
                {Array.isArray(exp?.technologies) && exp.technologies.filter(hasText).length > 0 ? (
                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {exp.technologies.filter(hasText).join(', ')}</div>
                ) : null}
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {hasProjectsSection ? (
        <div>
          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Projects</div>
          <div className={'space-y-4'}>
            {filteredProjects.map((p: any, idx: number) => (
              <div key={idx} className={'space-y-1'}>
                <div className={'font-semibold'} style={{ color: 'var(--text-main)' }}>{asText(p?.name)}</div>
                {asText(p?.description) ? <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>{asText(p?.description)}</div> : null}
                {asText(p?.impact) ? <div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>Impact: {asText(p?.impact)}</div> : null}
                {Array.isArray(p?.technologies) && p.technologies.filter(hasText).length > 0 ? (
                  <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>Technologies: {p.technologies.filter(hasText).join(', ')}</div>
                ) : null}
                {asText(p?.link) ? <div className={'text-xs'} style={{ color: 'var(--text-secondary)' }}>{asText(p?.link)}</div> : null}
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {hasEducationSection ? (
        <div>
          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Education</div>
          <div className={'space-y-2'}>
            {filteredEducation.map((e: any, idx: number) => (
              <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                {`${asText(e?.degree)} — ${asText(e?.institution)}${asText(e?.graduationDate) ? ` (${asText(e?.graduationDate)})` : ''}`}
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {hasCertificationsSection ? (
        <div>
          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Certifications</div>
          <div className={'space-y-1'}>
            {filteredCertifications.map((c: any, idx: number) => (
              <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                {`${asText(c?.name)} — ${asText(c?.issuer)}${asText(c?.date) ? ` (${asText(c?.date)})` : ''}`}
              </div>
            ))}
          </div>
        </div>
      ) : null}

      {hasLinksSection ? (
        <div>
          <div className={'text-lg font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>Links</div>
          <div className={'space-y-1'}>
            {filteredLinks.map((l: any, idx: number) => (
              <div key={idx} className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
                {`${asText(l?.label)}: ${asText(l?.url)}`}
              </div>
            ))}
          </div>
        </div>
      ) : null}
    </div>
  );
}