import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardHeader } from '@/components/ui/card';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Separator } from '@/components/ui/separator';
import { ChevronDown, MapPin } from 'lucide-react';
import React, { useState } from 'react'
import Link from 'next/link';
import apis from '@/utils/apis';
import { Icons } from '@/components/icons';
import { Skeleton } from '@/components/ui/skeleton';
import { useSearchParams } from 'next/navigation';
import { useGlobalContext } from '@/context/Provider';
import Loader from '../loader';


const EnhancedCard = ({ enhancedData, loading }: any) => {

  const [isOpen, setIsOpen] = useState(true);
  const searchParams = useSearchParams();
  const { Toast } = useGlobalContext()
  const queryParams = Object.fromEntries(searchParams.entries());
  const [iseEnhanced, setIsEnhanced] = useState(false)
  const [loading1, seLoading1] = useState(false)




  // enhabnced data...................
  const getEnhancedData = async () => {
    try {
      let payload = {
        jobs_ids: [queryParams?.job_id]
      }
      seLoading1(true)
      const apiRes = await apis.Job.enhanced(payload)
      setIsEnhanced(true)
    } catch (error: any) {
      Toast.error(error)
    } finally {
      seLoading1(false)
    }
  }

  const getInitials = (name: string | undefined): string => {
    if (!name) return "";
    const words = name.trim().split(" ");
    if (words.length === 1) {
      return words[0].substring(0, 2).toUpperCase();
    }
    const firstLetter = words[0][0].toUpperCase();
    const lastLetter = words[words.length - 1][0].toUpperCase();
    return firstLetter + lastLetter;
  };

  return (
    <>
      {/* AI Results Section */}
      <Card >
        <Collapsible open={isOpen} onOpenChange={setIsOpen}>
          <div className="flex justify-between items-center p-4">
            <div className='flex  gap-2 items-center'>
              <Button type='button' className='bg-transparent shadow-none'><Icons.DragIcon /></Button>
              <h2 className="text-base font-normal theme-color">Enhanced AI results</h2>
            </div>
            <CollapsibleTrigger asChild>
              <Button variant="ghost" size="sm" className="w-9 p-0">
                <ChevronDown className={`h-5 w-5 text-gray-500 transition-transform duration-200 ${isOpen ? '' : 'rotate-180'}`} />
              </Button>
            </CollapsibleTrigger>
          </div>
          <Separator />
          <CollapsibleContent>
            <CardHeader className="p-0 relative">
              {
                loading ? <div className="flex  p-4 items-center space-x-4">
                  <Skeleton className="h-12 w-12 rounded-full" />
                  <div className="space-y-2">
                    <Skeleton className="h-4 w-[250px]" />
                    <Skeleton className="h-4 w-[200px]" />
                  </div>
                </div>
                  :
                  <div className="flex gap-4  p-4">
                    <Avatar className="h-12 w-12">
                      <AvatarImage className='border object-cover' src={apis.FILES.imageOriginal(enhancedData?.company_logo, "")} />
                      <AvatarFallback className="bg-orange-500 text-white">{getInitials(enhancedData?.advertiser_name)}</AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="font-semibold text-sm theme-color">{enhancedData?.job_title ? enhancedData?.job_title : "N/A"}</h3>
                      <div className="flex flex-col  text-sm text-gray">
                        <span className="font-normal text-sm theme-color">{enhancedData?.advertiser_name ? enhancedData?.advertiser_name : "N/A"}</span>
                        <div className="flex gap-2">
                          <span className="flex  gap-1 font-normal text-xs text-gray">
                            <MapPin className="h-4 w-4" />
                            {enhancedData?.job_location ? enhancedData?.job_location : "N/A"}
                          </span>
                          <span>•</span>
                          <span className="font-normal text-xs text-gray">{enhancedData?.work_type}</span>
                        </div>
                      </div>
                    </div>
                  </div>

              }
            </CardHeader>
            <Separator />
            <div className="space-y-6 p-6">
              {
                loading ? <div className="flex flex-col space-y-3">
                  <Skeleton className="h-[125px] w-full rounded--sm" />
                </div>
                  :
                  <section>
                    <h4 className="font-semibold text-base theme-color mb-4">About this role</h4>
                    <div className="space-y-3">
                      <div className="flex justify-between items-center text-sm">
                        <span className="text-gray font-normal text-xs">Job ID</span>
                        <div className="text-right text-xs theme-color font-semibold">
                          <span >{enhancedData?.job_id ? enhancedData?.job_id : "N/A"}</span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center text-sm">
                        <span className="text-gray font-normal text-xs">Days Active</span>
                        <div className="text-right text-xs theme-color font-semibold">
                          <span >{enhancedData?.time_listed ? enhancedData?.time_listed.includes("ago") ? enhancedData?.time_listed.replace("ago", "").trim() : enhancedData?.time_listed : "N/A"}</span>
                        </div>
                      </div>
                      <div className="flex justify-between items-center text-sm">
                        <span className="text-gray font-normal text-xs">Job type</span>
                        <div className="text-right text-xs theme-color font-semibold">
                          <span >{enhancedData?.work_type ? enhancedData?.work_type : "N/A"}</span>
                        </div>
                      </div>
                      {
                        (iseEnhanced || enhancedData?.is_enhanced) &&
                        <div className="flex justify-between items-center text-sm">
                          <span className="text-gray font-normal text-xs">Experience required</span>
                          <div className="text-right text-xs theme-color font-semibold">
                            <span >{enhancedData?.experience_required ? enhancedData?.experience_required : "N/A"}</span>
                          </div>
                        </div>
                      }
                      <div className="flex justify-between items-start text-sm">
                        <span className="text-gray font-normal text-xs">Salary</span>
                        <div className="text-right text-xs theme-color font-semibold">
                          <span >{enhancedData?.salary ? enhancedData?.salary : "N/A"}</span>
                        </div>
                      </div>

                      {
                        (iseEnhanced || enhancedData?.is_enhanced) &&
                        <>
                          <div className="flex justify-between gap-2 items-start text-sm">
                            <span className="text-gray font-normal text-xs ">Phone number and email</span>
                            <div className="text-right flex flex-col justify-start text-xs theme-color font-semibold">
                              <span >{enhancedData?.contacts?.country_code}{enhancedData?.contacts?.phone_number ? enhancedData?.contacts?.phone_number : "N/A"}</span>
                              <span >{enhancedData?.contacts?.email ? enhancedData?.contacts?.email : null}</span>
                            </div>
                          </div>
                          <div className="flex justify-between items-center text-sm">
                            <span className="text-gray font-normal text-xs">Website URL</span>
                            {
                              enhancedData?.company_link && enhancedData?.company_link !== "null" ?
                                <Link href={enhancedData?.company_link} target="_blank" className="text-right text-xs text-primary font-semibold">
                                  <span >Link</span>
                                </Link> : <span className="theme-color font-semibold text-xs">N/A</span>
                            }
                          </div>
                        </>

                      }
                    </div>
                  </section>
              }
              <Separator />
              {
                loading ? <div className="flex flex-col space-y-3">
                  <Skeleton className="h-[125px] w-full rounded--sm" />
                  <Skeleton className="h-[125px] w-full rounded--sm" />

                </div> :
                  (iseEnhanced || enhancedData?.is_enhanced) ?
                    <>
                      <section>
                        <h4 className="font-semibold text-base theme-color mb-4">Education requirements</h4>
                        <div className="flex flex-wrap gap-2">
                          {Array.isArray(enhancedData?.contacts?.education_requirement) && enhancedData?.contacts?.education_requirement?.length > 0 ? enhancedData?.contacts?.education_requirement?.map((res: any, index: number) => (
                            <Badge key={index} variant="outline" className="rounded-full yellow-border font-normal text-warning ">
                              {res}
                            </Badge>
                          )) : <div>No data</div>}
                        </div>
                      </section>
                      <section>
                        <h4 className="font-semibold text-base theme-color mb-4">Systems/Programs needed</h4>
                        <div className="flex flex-wrap gap-2">
                          {Array.isArray(enhancedData?.contacts?.skill_needed) && enhancedData?.contacts?.skill_needed?.length > 0 ? enhancedData?.contacts?.skill_needed?.map((res: any, index: number) => (
                            <Badge key={index} variant="outline" className="rounded-full border-primary font-normal text-primary ">
                              {res}
                            </Badge>
                          )) : <div>No data</div>}
                        </div>
                      </section>
                      <Collapsible>
                        <CollapsibleTrigger asChild>
                          <Button variant="link" className="text-blue-500 p-0 h-auto font-semibold flex items-center mb-4 gap-2">Read More<ChevronDown className="h-4 w-4" /></Button>
                        </CollapsibleTrigger>
                        <CollapsibleContent>
                          {/* Additional content can be added here */}
                          <section>
                            <h4 className="font-semibold text-base theme-color mb-4">Description</h4>
                            <div
                              className=" h-full rounded-lg p-4 flex items-center justify-center bg-gray-50"
                              dangerouslySetInnerHTML={{ __html: enhancedData?.job_description }}
                            />
                          </section>
                        </CollapsibleContent>
                      </Collapsible>
                      <div className="flex justify-end">
                        <Link href={enhancedData?.link ? enhancedData?.link : ""} target="_blank" className="theme-background inline-flex items-center py-2 justify-center text-white rounded-lg w-[100px]">View ad</Link>
                      </div>
                    </>
                    :
                    <>
                      <Collapsible>
                        <CollapsibleTrigger asChild>
                          <Button variant="link" className="text-blue-500 p-0 h-auto font-semibold flex items-center mb-4 gap-2">Read More<ChevronDown className="h-4 w-4" /></Button>
                        </CollapsibleTrigger>
                        <CollapsibleContent>
                          {/* Additional content can be added here */}
                          <section>
                            <h4 className="font-semibold text-base theme-color mb-4">Description</h4>
                            <div
                              className=" h-full rounded-lg p-4 flex items-center justify-center bg-gray-50"
                              dangerouslySetInnerHTML={{ __html: enhancedData?.job_description }}
                            />
                          </section>
                        </CollapsibleContent>
                      </Collapsible>
                      <div className='flex justify-end'>
                        <Button className='theme-background border-0 shadow-none text-white' type='button' onClick={() => getEnhancedData()}><Loader loading={loading1} />Enhance with AI</Button>
                      </div>
                    </>
              }


            </div>
          </CollapsibleContent>
        </Collapsible>
      </Card>
    </>
  )
}

export default EnhancedCard;