import type { JobOpeningSummary } from '@/types/platform';
import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import {
    ArrowRight,
    Briefcase,
    Code2,
    Heart,
    MapPin,
    Megaphone,
    Sparkles,
    Users,
    Zap,
} from 'lucide-react';

const TEAM_ICONS: Record<
    string,
    React.ComponentType<{ className?: string }>
> = {
    Engineering: Code2,
    Product: Sparkles,
    Design: Sparkles,
    Sales: Zap,
    'Customer Success': Heart,
    Marketing: Megaphone,
    Operations: Users,
};

function teamIcon(team: string | null) {
    return (team && TEAM_ICONS[team]) || Briefcase;
}

export function JobOpeningCard({ role }: { role: JobOpeningSummary }) {
    const Icon = teamIcon(role.team);

    return (
        <Link href={`/careers/${role.slug}`} className="block h-full">
            <motion.div
                whileHover={{ y: -3 }}
                transition={{ duration: 0.2 }}
                className="pf-card group hover:border-primary/50 relative flex h-full flex-col gap-4 overflow-hidden p-6 transition-colors"
            >
                <div className="from-primary via-primary/70 absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r to-transparent opacity-80" />

                <div className="flex items-start justify-between gap-3">
                    <div className="pf-icon-box h-11 w-11 shrink-0">
                        <Icon className="h-5 w-5" />
                    </div>
                    {role.employment_type && (
                        <span className="pf-chip text-[9px]">
                            {role.employment_type}
                        </span>
                    )}
                </div>

                <div className="flex-1">
                    <h3 className="text-foreground group-hover:text-primary mb-1.5 font-semibold transition-colors">
                        {role.title}
                    </h3>
                    {role.summary && (
                        <p className="text-muted-foreground line-clamp-2 text-sm leading-relaxed">
                            {role.summary}
                        </p>
                    )}
                </div>

                <div className="border-border/60 flex flex-wrap items-center justify-between gap-3 border-t pt-4">
                    <div className="flex flex-wrap items-center gap-4">
                        {role.team && (
                            <span className="text-muted-foreground text-xs font-medium">
                                {role.team}
                            </span>
                        )}
                        {role.location && (
                            <div className="text-muted-foreground flex items-center gap-1.5 text-xs">
                                <MapPin className="h-3 w-3" />
                                {role.location}
                            </div>
                        )}
                    </div>
                    <ArrowRight className="text-muted-foreground/40 group-hover:text-primary h-4 w-4 shrink-0 transition-colors group-hover:translate-x-0.5" />
                </div>

                {role.tags.length > 0 && (
                    <div className="flex flex-wrap gap-1.5">
                        {role.tags.slice(0, 4).map((tag) => (
                            <span
                                key={tag}
                                className="border-lime/25 bg-lime/10 text-lime rounded-md border px-2 py-0.5 text-[10px] font-semibold"
                            >
                                {tag}
                            </span>
                        ))}
                    </div>
                )}
            </motion.div>
        </Link>
    );
}