"use client";

import { Bookmark, MapPin, Clock, Briefcase } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { formatDistanceToNow } from "date-fns";
import { useAuthStore } from "@/store/auth.store";
import { generateJobUrl } from "@/utils/generateJobUrl";
import { useRouter } from "next/navigation";
import React, { useState, useEffect } from "react";
import { useBookmarkJob } from "@/hooks/useJobs";

export interface DashboardJob {
  id: number | string;
  job_id?: number | string;
  saved_id?: number | string;
  title?: string;
  job_title?: string;
  company?: { name?: string, logo?: string };
  company_name?: string;
  company_logo?: string;
  location?: string;
  city_name?: string;
  state_name?: string;
  country_name?: string;
  job_type?: string;
  job_type_name?: string;
  min_salary?: number;
  salary_min?: number;
  max_salary?: number;
  salary_max?: number;
  skills?: any[];
  created_at?: string;
  saved_at?: string;
  is_saved?: boolean;
  has_saved?: boolean;
}

export function JobCard({ job }: { job?: DashboardJob }) {
  const router = useRouter();
  const { isAuthenticated } = useAuthStore();
  const bookmarkMutation = useBookmarkJob();

  // Use mock data if no job prop provided to keep visual structure
  const displayJob = job || {
    id: 1,
    title: "Software Developer",
    company_name: "TST Pvt. Ltd.",
    location: "Gautam Budh Nagar, Uttar Pradesh, India",
    job_type: "Full Time",
    min_salary: 15000,
    max_salary: 20000,
    skills: ["Customer Handling", "Digital Marketing", "Communication Skill"],
    created_at: new Date().toISOString()
  };

  const compName = displayJob.company?.name || displayJob.company_name || "Unknown Company";
  let compLogo = displayJob.company?.logo || displayJob.company_logo;
  const isSavedProp = Boolean(displayJob.is_saved) || Boolean(displayJob.has_saved) || job !== undefined; // Assume saved if on saved jobs page
  
  // Local state to instantly update the UI when the user saves/unsaves a job
  const [isSaved, setIsSaved] = useState(isSavedProp);

  useEffect(() => {
    setIsSaved(isSavedProp);
  }, [isSavedProp]);

  let isValidLogo = false;
  if (typeof compLogo === 'string' && compLogo && compLogo !== 'null' && compLogo !== 'undefined') {
    if (!compLogo.startsWith('http') && !compLogo.startsWith('/')) {
      compLogo = `/${compLogo}`;
    }
    try {
      new URL(compLogo, 'http://localhost');
      isValidLogo = true;
    } catch (e) {
      isValidLogo = false;
    }
  }

  const getInitials = (name: string) => name.substring(0, 2).toUpperCase();

  const timestamp = displayJob.saved_at || displayJob.created_at;
  const timeAgo = timestamp 
    ? formatDistanceToNow(new Date(timestamp), { addSuffix: true }).replace('about ', '')
    : '1d ago';

  const title = displayJob.title || displayJob.job_title || 'Software Developer';
  const jobId = displayJob.job_id || displayJob.id;
  
  let locationStr = displayJob.location;
  if (!locationStr) {
    const parts = [displayJob.city_name, displayJob.state_name, displayJob.country_name].filter(Boolean);
    if (parts.length > 0) locationStr = parts.join(', ');
    else locationStr = 'Gautam Budh Nagar, Uttar Pradesh, India';
  }

  const jobType = displayJob.job_type_name || displayJob.job_type || 'Full Time';
  const minSal = displayJob.salary_min || displayJob.min_salary || 15000;
  const maxSal = displayJob.salary_max || displayJob.max_salary || 20000;

  const skills = (displayJob.skills?.length ? displayJob.skills : ["Customer Handling", "Digital Marketing", "Communication Skill"]).slice(0, 3);

  return (
    <Link 
      href={generateJobUrl({ id: jobId, title } as any)} 
      className="bg-white rounded-[12px] border border-gray-200 p-5 flex flex-col hover:shadow-md transition-shadow w-full group cursor-pointer block"
    >
      <div className="flex justify-between items-start mb-4">
        <div className="flex gap-4 items-center">
          <div className="w-14 h-14 rounded-full relative flex-shrink-0 bg-gray-50 border border-gray-100 flex items-center justify-center overflow-hidden">
            {isValidLogo && compLogo ? (
              <Image src={compLogo} alt={compName} fill className="object-cover" />
            ) : (
              <span className="text-[#ff6b00] font-bold text-lg">{getInitials(compName)}</span>
            )}
          </div>
          <div className="flex flex-col">
            <h4 className="font-bold text-gray-900 text-base leading-tight mb-1 group-hover:text-[#ff6b00] transition-colors">{title}</h4>
            <p className="text-sm text-gray-500 font-medium">{compName}</p>
          </div>
        </div>
        
        <button 
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
            if (!isAuthenticated) {
              router.push("/?login=true");
              return;
            }
            if (jobId) {
              bookmarkMutation.mutate(Number(jobId), {
                onSuccess: (data) => {
                  if (data.success !== false) {
                    setIsSaved(!isSaved);
                  }
                }
              });
            }
          }}
          disabled={bookmarkMutation.isPending}
          className="p-1 -mt-1 -mr-1 transition-colors flex-shrink-0 text-black hover:opacity-70 disabled:opacity-50"
          title={isSaved ? "Saved" : "Save Job"}
        >
          <Bookmark className="w-[22px] h-[22px]" strokeWidth={1.5} fill={isSaved ? 'currentColor' : 'none'} />
        </button>
      </div>

      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-[13px] text-gray-500 font-medium mb-3">
        <div className="flex items-center gap-2">
          <Briefcase className="w-4 h-4 text-gray-400" />
          <span>Entry Level (0-1 years)</span>
          <span className="text-gray-300 mx-1">|</span>
          <Clock className="w-4 h-4 text-gray-400" />
          <span>{jobType}</span>
        </div>
        <div className="text-gray-800 font-semibold sm:text-right">
          ₹{minSal.toLocaleString()} - ₹{maxSal.toLocaleString()}
        </div>
      </div>

      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-[13px] text-gray-500 font-medium mb-5">
        <div className="flex items-center gap-2 max-w-full">
          <MapPin className="w-4 h-4 text-gray-400 flex-shrink-0" />
          <span className="truncate">{locationStr}</span>
        </div>
        <div className="flex items-center gap-1.5 sm:text-right flex-shrink-0">
          <Clock className="w-4 h-4 text-gray-400" />
          <span>{timeAgo}</span>
        </div>
      </div>

      <div className="flex flex-wrap gap-2 mt-auto pt-2">
        {skills.map((skill: any, idx: number) => {
          const skillName = typeof skill === 'string' ? skill : (skill.name || skill.skill || 'Skill');
          const colors = [
            { bg: 'bg-[#e8f7ec]', text: 'text-[#4db068]' },
            { bg: 'bg-[#e8f0fe]', text: 'text-[#4d86f7]' },
            { bg: 'bg-[#f3e8fc]', text: 'text-[#9b51e0]' }
          ];
          const color = colors[idx % colors.length];
          return (
            <span key={idx} className={`px-3 py-1 ${color.bg} ${color.text} rounded text-[11px] font-semibold truncate`}>
              {skillName}
            </span>
          )
        })}
      </div>
    </Link>
  );
}