"use client";

import { use, useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { jobsApi, type ApiJob } from "@/lib/api";
import {
  MapPin,
  Briefcase,
  DollarSign,
  Calendar,
  ArrowLeft,
  CheckCircle2,
  Building2,
  Users,
  Clock,
  Heart,
  Share2,
  Bookmark,
  Star,
  Globe,
  Loader2,
} from "lucide-react";
import Link from "next/link";
import { motion } from "framer-motion";
import { useTranslation } from "@/lib/i18n";


export const runtime = 'edge';

export default function JobDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { t } = useTranslation();
  const { id } = use(params);
  const router = useRouter();
  const [isFavorited, setIsFavorited] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);
  const [job, setJob] = useState<ApiJob | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchJob() {
      try {
        setLoading(true);
        const response = await jobsApi.getById(id);
        if (response) {
          setJob(response);
        } else {
          setError("Job not found");
        }
      } catch (err) {
        console.error("Error fetching job:", err);
        setError("Failed to load job");
      } finally {
        setLoading(false);
      }
    }
    fetchJob();
  }, [id]);

  if (loading) {
    return (
      <div className="min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4 text-primary" />
            <p className="text-muted-foreground">Loading job...</p>
          </div>
        </main>
        <Footer />
      </div>
    );
  }

  if (!job) {
    return (
      <div className="min-h-screen flex flex-col">
        <Navbar />
        <main className="flex-1 flex items-center justify-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center max-w-md mx-auto p-6"
          >
            <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
              <Briefcase className="w-8 h-8 text-muted-foreground" />
            </div>
            <h1 className="text-2xl font-bold mb-2">Job not found</h1>
            <p className="text-muted-foreground mb-6">
              The job you are looking for does not exist or has been removed.
            </p>
            <Link href="/jobs">
              <Button>View all jobs</Button>
            </Link>
          </motion.div>
        </main>
        <Footer />
      </div>
    );
  }

  const getCompanyInitials = (company: string) => {
    return company
      .split(" ")
      .map((word) => word[0])
      .join("")
      .toUpperCase()
      .slice(0, 2);
  };

  const formatTimeAgo = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffInMs = now.getTime() - date.getTime();
    const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));

    if (diffInDays === 0) return t("jobs.posted.today");
    if (diffInDays === 1) return t("jobs.posted.yesterday");
    if (diffInDays < 7) return t("jobs.posted.daysAgo", { count: diffInDays });
    if (diffInDays < 30) return t("jobs.posted.weeksAgo", { count: Math.floor(diffInDays / 7) });
    return t("jobs.posted.monthsAgo", { count: Math.floor(diffInDays / 30) });
  };

  const getTypeLabel = (type: string) => {
    // Rely on t() for mapping if possible, or keep simple map if keys match
    const key = `jobs.types.${type}`;
    // We can try to use t(key), but if it doesn't exist we fail.
    // The keys in pt-BR.json are "jobs.types.full-time" etc.
    return t(`jobs.types.${type}`) || type;
  };

  const getSalaryDisplay = () => {
    if (!job.salaryMin && !job.salaryMax) return null;
    if (job.salaryMin && job.salaryMax) {
      return `R$ ${job.salaryMin.toLocaleString()} - R$ ${job.salaryMax.toLocaleString()}`;
    }
    if (job.salaryMin) return `From R$ ${job.salaryMin.toLocaleString()}`;
    if (job.salaryMax) return `Up to R$ ${job.salaryMax.toLocaleString()}`;
    return null;
  };

  const salaryDisplay = getSalaryDisplay();

  const mockCompanyInfo = {
    size: "100-500 employees",
    industry: "Technology",
    founded: "2015",
    website: "www.company.com",
    rating: 4.5,
  };

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />

      <main className="flex-1 py-8">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-5xl mx-auto">
            {/* Breadcrumb */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              className="mb-6"
            >
              <Link href="/jobs">
                <Button variant="ghost" className="gap-2 hover:bg-muted">
                  <ArrowLeft className="h-4 w-4" />
                  {t("jobs.details.back")}
                </Button>
              </Link>
            </motion.div>

            <div className="grid lg:grid-cols-3 gap-8">
              {/* Main Content */}
              <div className="lg:col-span-2 space-y-6">
                {/* Job Header */}
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                >
                  <Card>
                    <CardHeader>
                      <div className="flex flex-col sm:flex-row items-start gap-4">
                        <Avatar className="h-16 w-16 shrink-0">
                          <AvatarImage
                            src={`https://avatar.vercel.sh/${job.companyName || "Company"}`}
                            alt={job.companyName || "Company"}
                          />
                          <AvatarFallback className="bg-primary/10 text-primary font-bold text-lg">
                            {getCompanyInitials(job.companyName || "Company")}
                          </AvatarFallback>
                        </Avatar>

                        <div className="flex-1 w-full min-w-0">
                          <div className="flex flex-col gap-3">
                            <div className="flex items-start justify-between gap-2">
                              <div className="flex-1 min-w-0">
                                <CardTitle className="text-xl sm:text-2xl md:text-3xl mb-2 leading-tight">
                                  {job.title}
                                </CardTitle>
                                <div className="flex flex-wrap items-center gap-2 mb-3">
                                  <Building2 className="h-4 w-4 sm:h-5 sm:w-5 text-muted-foreground shrink-0" />
                                  <CardDescription className="text-base sm:text-lg font-medium">
                                    {job.companyName || "Company"}
                                  </CardDescription>
                                  <div className="flex items-center gap-1">
                                    <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                                    <span className="text-sm text-muted-foreground">
                                      {mockCompanyInfo.rating}
                                    </span>
                                  </div>
                                </div>
                              </div>

                              <div className="hidden sm:flex gap-2 shrink-0">
                                <Button
                                  variant="outline"
                                  size="icon"
                                  onClick={() => setIsFavorited(!isFavorited)}
                                >
                                  <Heart
                                    className={`h-4 w-4 ${isFavorited
                                      ? "fill-red-500 text-red-500"
                                      : ""
                                      }`}
                                  />
                                </Button>
                                <Button
                                  variant="outline"
                                  size="icon"
                                  onClick={() => setIsBookmarked(!isBookmarked)}
                                >
                                  <Bookmark
                                    className={`h-4 w-4 ${isBookmarked ? "fill-current" : ""
                                      }`}
                                  />
                                </Button>
                                <Button variant="outline" size="icon">
                                  <Share2 className="h-4 w-4" />
                                </Button>
                              </div>
                            </div>

                            {/* Action buttons mobile */}
                            <div className="flex sm:hidden gap-2">
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => setIsFavorited(!isFavorited)}
                                className="flex-1"
                              >
                                <Heart
                                  className={`h-4 w-4 mr-1 ${isFavorited
                                    ? "fill-red-500 text-red-500"
                                    : ""
                                    }`}
                                />
                                {isFavorited ? "Favorited" : "Favorite"}
                              </Button>
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() => setIsBookmarked(!isBookmarked)}
                                className="flex-1"
                              >
                                <Bookmark
                                  className={`h-4 w-4 mr-1 ${isBookmarked ? "fill-current" : ""
                                    }`}
                                />
                                {isBookmarked ? "Saved" : "Save"}
                              </Button>
                              <Button
                                variant="outline"
                                size="icon"
                                className="shrink-0"
                              >
                                <Share2 className="h-4 w-4" />
                              </Button>
                            </div>

                            {/* Job Meta */}
                            <div className="flex flex-wrap gap-3 sm:gap-4 text-sm text-muted-foreground">
                              <div className="flex items-center gap-2">
                                <MapPin className="h-4 w-4 shrink-0" />
                                <span className="truncate">{job.location}</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <Briefcase className="h-4 w-4 shrink-0" />
                                <Badge
                                  variant="secondary"
                                  className="whitespace-nowrap"
                                >
                                  {getTypeLabel(job.type || "full-time")}
                                </Badge>
                              </div>
                              {salaryDisplay && (
                                <div className="flex items-center gap-2">
                                  <DollarSign className="h-4 w-4 shrink-0" />
                                  <span className="font-medium text-foreground whitespace-nowrap">
                                    {salaryDisplay}
                                  </span>
                                </div>
                              )}
                              <div className="flex items-center gap-2">
                                <Clock className="h-4 w-4 shrink-0" />
                                <span className="whitespace-nowrap">
                                  {formatTimeAgo(job.createdAt)}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      {/* Apply Button - Mobile */}
                      <div className="lg:hidden pt-4">
                        <Link
                          href={`/jobs/${job.id}/apply`}
                          className="w-full"
                        >
                          <Button size="lg" className="w-full cursor-pointer">
                            {t("jobs.details.applyNow")}
                          </Button>
                        </Link>
                      </div>
                    </CardHeader>
                  </Card>
                </motion.div>

                {/* Job Description */}
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.1 }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-xl">{t("jobs.details.aboutRole")}</CardTitle>
                    </CardHeader>
                    <CardContent className="prose prose-sm max-w-none">
                      <p className="text-muted-foreground leading-relaxed whitespace-pre-line">
                        {job.description}
                      </p>
                    </CardContent>
                  </Card>
                </motion.div>

                {/* Requirements */}
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.2 }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-xl">{t("jobs.details.requirements")}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="grid gap-3">
                        {job.requirements && Array.isArray(job.requirements) ? (
                          job.requirements.map((req, index) => (
                            <div key={index} className="flex items-start gap-3">
                              <CheckCircle2 className="h-5 w-5 text-primary mt-0.5 shrink-0" />
                              <span className="text-muted-foreground">{String(req)}</span>
                            </div>
                          ))
                        ) : (
                          <p className="text-muted-foreground">{t("jobs.details.noRequirements")}</p>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>

                {/* Company Info */}
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.3 }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-xl">{t("jobs.details.aboutCompany")}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <p className="text-muted-foreground leading-relaxed">
                        {t("jobs.details.companyDesc", { company: job.companyName || "Company" })}
                      </p>

                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4 border-t">
                        <div>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                            <Users className="h-4 w-4 shrink-0" />
                            <span>{t("jobs.details.company.size")}</span>
                          </div>
                          <p className="font-medium text-sm">
                            {mockCompanyInfo.size}
                          </p>
                        </div>
                        <div>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                            <Building2 className="h-4 w-4 shrink-0" />
                            <span>{t("jobs.details.company.industry")}</span>
                          </div>
                          <p className="font-medium text-sm">
                            {mockCompanyInfo.industry}
                          </p>
                        </div>
                        <div>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                            <Calendar className="h-4 w-4 shrink-0" />
                            <span>{t("jobs.details.company.founded")}</span>
                          </div>
                          <p className="font-medium text-sm">
                            {mockCompanyInfo.founded}
                          </p>
                        </div>
                        <div>
                          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
                            <Globe className="h-4 w-4 shrink-0" />
                            <span>{t("jobs.details.company.website")}</span>
                          </div>
                          <a
                            href={`https://${mockCompanyInfo.website}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="font-medium text-sm text-primary hover:underline break-all"
                          >
                            {mockCompanyInfo.website}
                          </a>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              </div>

              {/* Sidebar */}
              <div className="space-y-6 lg:sticky lg:top-20 lg:self-start">
                {/* Apply Card - Desktop */}
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  className="hidden lg:block"
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-lg">
                        {t("jobs.details.interested")}
                      </CardTitle>
                      <CardDescription>
                        {t("jobs.details.applyCta")}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <Link
                        href={`/jobs/${job.id}/apply`}
                        className="w-full"
                      >
                        <Button size="lg" className="w-full cursor-pointer">
                          {t("jobs.details.applyNow")}
                        </Button>
                      </Link>

                      <Separator />

                      <div className="space-y-3 text-sm">
                        <div className="flex items-start justify-between gap-2">
                          <span className="text-muted-foreground">
                            {t("jobs.details.meta.type")}:
                          </span>
                          <Badge
                            variant="outline"
                            className="whitespace-nowrap"
                          >
                            {getTypeLabel(job.type || "full-time")}
                          </Badge>
                        </div>
                        <div className="flex items-start justify-between gap-2">
                          <span className="text-muted-foreground shrink-0">
                            {t("jobs.details.meta.location")}:
                          </span>
                          <span className="font-medium text-right">
                            {job.location}
                          </span>
                        </div>
                        {salaryDisplay && (
                          <div className="flex items-start justify-between gap-2">
                            <span className="text-muted-foreground">
                              {t("jobs.details.meta.salary")}:
                            </span>
                            <span className="font-medium text-right whitespace-nowrap">
                              {salaryDisplay}
                            </span>
                          </div>
                        )}
                        <div className="flex items-start justify-between gap-2">
                          <span className="text-muted-foreground">
                            {t("jobs.details.meta.posted")}:
                          </span>
                          <span className="font-medium text-right whitespace-nowrap">
                            {formatTimeAgo(job.createdAt)}
                          </span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>

                {/* Similar Jobs */}
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.2 }}
                >
                  <Card>
                    <CardHeader>
                      <CardTitle className="text-lg">{t("jobs.details.similar")}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <p className="text-sm text-muted-foreground">
                        {t("jobs.details.similarDesc")}
                      </p>
                      <Link href="/jobs">
                        <Button variant="outline" size="sm" className="w-full">
                          {t("jobs.details.viewAll")}
                        </Button>
                      </Link>
                    </CardContent>
                  </Card>
                </motion.div>
              </div>
            </div>
          </div>
        </div>
      </main >

      <Footer />
    </div >
  );
}
