---
import { Icon } from "astro-icon/components";
import Layout from "../layouts/Layout.astro";
import ResumeSkills from "../components/ResumeSkills";
import ResumeDownloadButton from "../components/ResumeDownloadButton";
import { siteConfig } from "../config/data";
import "../styles/global.css";
import * as TOML from "@iarna/toml";

interface ResumeData {
    basics: {
        name: string;
        email: string;
        website?: string;
        profiles: {
            network: string;
            username: string;
            url: string;
        }[];
    };
    summary: {
        content: string;
    };
    experience: {
        company: string;
        position: string;
        location: string;
        date: string;
        description: string[];
        url?: string;
    }[];
    education: {
        institution: string;
        degree: string;
        field: string;
        date: string;
        details?: string[];
    }[];
    skills: {
        name: string;
        level: number;
    }[];
    volunteer: {
        organization: string;
        position: string;
        date: string;
    }[];
    awards: {
        title: string;
        organization: string;
        date: string;
        description?: string;
    }[];
}

let resumeData: ResumeData | undefined = undefined;
let fetchError: string | null = null;

// Check if resume TOML file is configured before attempting to fetch
if (!siteConfig.resume.tomlFile || !siteConfig.resume.tomlFile.trim()) {
    return Astro.redirect("/");
}

try {
    // Get the base URL
    const baseUrl = Astro.url.origin;

    // Fetch the TOML file from the public directory
    const response = await fetch(`${baseUrl}${siteConfig.resume.tomlFile}`);

    if (!response.ok) {
        throw new Error(
            `Failed to fetch resume: ${response.status} ${response.statusText}`,
        );
    }

    const tomlContent = await response.text();
    resumeData = TOML.parse(tomlContent) as unknown as ResumeData;
} catch (error) {
    console.error("Error loading resume data:", error);
    // Return to home page when resume data cannot be loaded
    return Astro.redirect("/");
}

const data = resumeData;
const resumeConfig = siteConfig.resume;

// At this point, data is guaranteed to exist since we redirect on error
if (!data) {
    return Astro.redirect("/");
}
---

<Layout title="Resume">
    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl w-full">
        <h1 class="text-3xl sm:text-4xl font-bold mb-4 sm:mb-6 text-center">
            {data.basics.name}
        </h1>

        <div
            class="flex justify-center items-center flex-wrap gap-x-3 sm:gap-x-4 gap-y-2 mb-4 sm:mb-6"
        >
            {
                data.basics.email && (
                    <a
                        href={`mailto:${data.basics.email}`}
                        class="link link-hover inline-flex items-center gap-1 text-sm sm:text-base"
                    >
                        <Icon name="mdi:email" /> {data.basics.email}
                    </a>
                )
            }
            {
                data.basics.profiles.map((profile) => {
                    const iconName = `simple-icons:${profile.network.toLowerCase()}`;
                    return (
                        <a
                            href={profile.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            class="link link-hover inline-flex items-center gap-1 text-sm sm:text-base"
                        >
                            <Icon name={iconName} />
                            {profile.network}
                        </a>
                    );
                })
            }
        </div>

        <ResumeDownloadButton client:load />

        {
            data.summary && resumeConfig.sections.summary?.enabled && (
                <div class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
                    <div class="card-body p-4 sm:p-6 break-words">
                        <h2 class="card-title text-xl sm:text-2xl">
                            {resumeConfig.sections.summary.title || "Summary"}
                        </h2>
                        <div>{data.summary.content}</div>
                    </div>
                </div>
            )
        }

        {
            data.skills &&
                data.skills.length > 0 &&
                resumeConfig.sections.skills?.enabled && (
                    <div class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
                        <div class="card-body p-4 sm:p-6 break-words">
                            <h2 class="card-title text-xl sm:text-2xl">
                                {resumeConfig.sections.skills.title || "Skills"}
                            </h2>
                            <ResumeSkills
                                skills={data.skills.map((skill, index) => ({
                                    id: `skill-${index}`,
                                    name: skill.name,
                                    level: skill.level,
                                }))}
                                client:load
                            />
                        </div>
                    </div>
                )
        }

        {
            data.experience &&
                data.experience.length > 0 &&
                resumeConfig.sections.experience?.enabled && (
                    <div class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
                        <div class="card-body p-4 sm:p-6 break-words">
                            <h2 class="card-title text-xl sm:text-2xl">
                                {resumeConfig.sections.experience.title ||
                                    "Experience"}
                            </h2>
                            <div class="space-y-4 sm:space-y-6">
                                {data.experience.map((experience) => (
                                    <div class="border-l-2 border-primary pl-4 sm:pl-6">
                                        <h3 class="text-lg sm:text-xl font-semibold">
                                            {experience.position}
                                        </h3>
                                        <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4 text-sm sm:text-base text-base-content/70 mb-2">
                                            <span class="font-medium">
                                                {experience.company}
                                            </span>
                                            <span>{experience.date}</span>
                                            <span>{experience.location}</span>
                                        </div>
                                        <ul class="list-disc list-inside space-y-1 text-sm sm:text-base">
                                            {experience.description.map(
                                                (item) => (
                                                    <li>{item}</li>
                                                ),
                                            )}
                                        </ul>
                                        {experience.url && (
                                            <a
                                                href={experience.url}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                class="inline-flex items-center gap-1 text-primary hover:text-primary-focus text-sm mt-2"
                                            >
                                                <Icon name="mdi:link" />
                                                Company Website
                                            </a>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                )
        }

        {
            data.education &&
                data.education.length > 0 &&
                resumeConfig.sections.education?.enabled && (
                    <div class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
                        <div class="card-body p-4 sm:p-6 break-words">
                            <h2 class="card-title text-xl sm:text-2xl">
                                {resumeConfig.sections.education.title ||
                                    "Education"}
                            </h2>
                            <div class="space-y-4">
                                {data.education.map((education) => (
                                    <div class="border-l-2 border-secondary pl-4 sm:pl-6">
                                        <h3 class="text-lg sm:text-xl font-semibold">
                                            {education.institution}
                                        </h3>
                                        <div class="text-sm sm:text-base text-base-content/70 mb-2">
                                            <span class="font-medium">
                                                {education.degree} in{" "}
                                                {education.field}
                                            </span>
                                            <span class="block sm:inline sm:ml-4">
                                                {education.date}
                                            </span>
                                        </div>
                                        {education.details && (
                                            <ul class="list-disc list-inside space-y-1 text-sm sm:text-base">
                                                {education.details.map(
                                                    (detail) => (
                                                        <li>{detail}</li>
                                                    ),
                                                )}
                                            </ul>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                )
        }

        {
            data.volunteer &&
                data.volunteer.length > 0 &&
                resumeConfig.sections.volunteer?.enabled && (
                    <div class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
                        <div class="card-body p-4 sm:p-6 break-words">
                            <h2 class="card-title text-xl sm:text-2xl">
                                {resumeConfig.sections.volunteer.title ||
                                    "Volunteer Work"}
                            </h2>
                            <div class="space-y-4">
                                {data.volunteer.map((volunteer) => (
                                    <div class="border-l-2 border-accent pl-4 sm:pl-6">
                                        <h3 class="text-lg sm:text-xl font-semibold">
                                            {volunteer.organization}
                                        </h3>
                                        <div class="text-sm sm:text-base text-base-content/70 mb-2">
                                            <span class="font-medium">
                                                {volunteer.position}
                                            </span>
                                            <span class="block sm:inline sm:ml-4">
                                                {volunteer.date}
                                            </span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                )
        }

        {
            data.awards &&
                data.awards.length > 0 &&
                resumeConfig.sections.awards?.enabled && (
                    <div class="card bg-base-200 shadow-xl mb-4 sm:mb-6">
                        <div class="card-body p-4 sm:p-6 break-words">
                            <h2 class="card-title text-xl sm:text-2xl">
                                {resumeConfig.sections.awards.title ||
                                    "Awards & Recognition"}
                            </h2>
                            <div class="space-y-4">
                                {data.awards.map((award) => (
                                    <div class="border-l-2 border-warning pl-4 sm:pl-6">
                                        <h3 class="text-lg sm:text-xl font-semibold">
                                            {award.title}
                                        </h3>
                                        <div class="text-sm sm:text-base text-base-content/70 mb-2">
                                            <span class="font-medium">
                                                {award.organization}
                                            </span>
                                            <span class="block sm:inline sm:ml-4">
                                                {award.date}
                                            </span>
                                        </div>
                                        {award.description && (
                                            <div class="text-sm sm:text-base text-base-content/80 mt-2">
                                                {award.description}
                                            </div>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                )
        }
    </div>
</Layout>
