import Seo from '@/components/Seo';
import PlatformLayout from '@/Layouts/PlatformLayout';
import type { PageProps } from '@/types';
import type { JobOpeningDetail } from '@/types/platform';
import { Link, usePage } from '@inertiajs/react';
import {
    ArrowLeft,
    ArrowRight,
    Briefcase,
    CheckCircle2,
    MapPin,
} from 'lucide-react';

interface Props {
    opening: JobOpeningDetail;
}

const EMPLOYMENT_TYPE_MAP: Record<string, string> = {
    'full-time': 'FULL_TIME',
    'full time': 'FULL_TIME',
    'part-time': 'PART_TIME',
    'part time': 'PART_TIME',
    contract: 'CONTRACTOR',
    contractor: 'CONTRACTOR',
    internship: 'INTERN',
    intern: 'INTERN',
    temporary: 'TEMPORARY',
};

export default function CareersShow({ opening }: Props) {
    const { ziggy } = usePage<PageProps>().props;
    const origin = ziggy?.url ?? '';
    const canonicalUrl = ziggy?.location ?? origin;

    const applyHref =
        opening.apply_url ||
        `mailto:careers@upepofinance.com?subject=${encodeURIComponent(
            `Application: ${opening.title}`,
        )}`;

    return (
        <PlatformLayout>
            <Seo
                title={`${opening.title} — Careers`}
                description={
                    opening.summary ||
                    `Explore the ${opening.title} role at Upepo Finance and apply today.`
                }
                type="website"
            >
                {opening.published_at && (
                    <script
                        type="application/ld+json"
                        dangerouslySetInnerHTML={{
                            __html: JSON.stringify({
                                '@context': 'https://schema.org',
                                '@type': 'JobPosting',
                                title: opening.title,
                                description:
                                    opening.description ||
                                    opening.summary ||
                                    opening.title,
                                datePosted: opening.published_at,
                                hiringOrganization: {
                                    '@type': 'Organization',
                                    name: 'Upepo Finance',
                                    sameAs: origin,
                                    logo: `${origin}/images/logo.png`,
                                },
                                ...(opening.location
                                    ? {
                                          jobLocation: {
                                              '@type': 'Place',
                                              address: opening.location,
                                          },
                                      }
                                    : { jobLocationType: 'TELECOMMUTE' }),
                                ...(opening.employment_type &&
                                EMPLOYMENT_TYPE_MAP[
                                    opening.employment_type.toLowerCase()
                                ]
                                    ? {
                                          employmentType:
                                              EMPLOYMENT_TYPE_MAP[
                                                  opening.employment_type.toLowerCase()
                                              ],
                                      }
                                    : {}),
                                url: canonicalUrl,
                            }),
                        }}
                    />
                )}
            </Seo>

            <article className="pf-container pt-32 pb-24">
                <div className="mx-auto max-w-3xl">
                    <Link
                        href="/careers"
                        className="text-muted-foreground hover:text-foreground mb-8 inline-flex items-center gap-2 text-sm transition-colors"
                    >
                        <ArrowLeft className="h-3.5 w-3.5" />
                        Back to careers
                    </Link>

                    <div className="mb-6 flex flex-wrap items-center gap-3">
                        {opening.team && (
                            <span className="pf-chip text-[9px]">
                                {opening.team}
                            </span>
                        )}
                        {opening.location && (
                            <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                <MapPin className="h-3 w-3" />
                                {opening.location}
                            </div>
                        )}
                        {opening.employment_type && (
                            <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                <Briefcase className="h-3 w-3" />
                                {opening.employment_type}
                            </div>
                        )}
                    </div>

                    <h1 className="pf-display text-foreground mb-4 text-3xl font-bold md:text-4xl">
                        {opening.title}
                    </h1>

                    {opening.summary && (
                        <p className="text-muted-foreground mb-8 text-lg leading-relaxed">
                            {opening.summary}
                        </p>
                    )}

                    {opening.tags.length > 0 && (
                        <div className="mb-10 flex flex-wrap gap-2">
                            {opening.tags.map((tag) => (
                                <span
                                    key={tag}
                                    className="border-lime/25 bg-lime/10 text-lime rounded-md border px-2.5 py-1 text-xs font-semibold"
                                >
                                    {tag}
                                </span>
                            ))}
                        </div>
                    )}

                    <div className="mb-10">
                        <a
                            href={applyHref}
                            className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                        >
                            Apply for this role{' '}
                            <ArrowRight className="h-4 w-4" />
                        </a>
                    </div>

                    {opening.description ? (
                        <div
                            className="prose dark:prose-invert mb-10 max-w-none"
                            dangerouslySetInnerHTML={{
                                __html: opening.description,
                            }}
                        />
                    ) : (
                        <p className="text-muted-foreground mb-10 text-sm italic">
                            Full description coming soon.
                        </p>
                    )}

                    {opening.requirements.length > 0 && (
                        <div className="pf-card p-6">
                            <h2 className="text-foreground mb-4 font-semibold">
                                What we're looking for
                            </h2>
                            <ul className="space-y-3">
                                {opening.requirements.map((req) => (
                                    <li
                                        key={req}
                                        className="flex items-start gap-2.5"
                                    >
                                        <CheckCircle2 className="text-primary mt-0.5 h-4 w-4 shrink-0" />
                                        <span className="text-foreground text-sm leading-relaxed">
                                            {req}
                                        </span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    )}

                    <div className="mt-12 text-center">
                        <a
                            href={applyHref}
                            className="pf-btn inline-flex items-center gap-2 px-8 py-3.5 text-base"
                        >
                            Apply for this role{' '}
                            <ArrowRight className="h-4 w-4" />
                        </a>
                    </div>
                </div>
            </article>
        </PlatformLayout>
    );
}