import avatarImage from "@/assets/images/avatar.jpeg";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowLeft, Pencil, Trash2 } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function Page({ params }: { params: { app: string; id: string } }) {
  const { app } = params;
  return (
    <div className="space-y-4">
      <div className="mb-2 flex items-center gap-2.5">
        <Link href={`/${app}/jobs`} className="rounded bg-white p-2 text-[#383E49]"><ArrowLeft className="size-4" /></Link>
        <h1 className="text-[30px] font-semibold leading-none text-[#272833]">Job Details</h1>
      </div>

      <div className="grid gap-4 xl:grid-cols-3">
        <div className="space-y-4 xl:col-span-2">
          <Card className="border-[#EBEEF2]"><CardContent className="space-y-4 p-4">
            <div className="flex items-start justify-between">
              <div>
                <h3 className="text-[21px] font-semibold text-[#272833]">Job Posted: UI/UX Designer</h3>
                <p className="text-[12px] text-[#8B8D97]">Posted Date: Mar 28, 2024</p>
              </div>
              <Button className="h-7 rounded bg-[#074473] px-3 text-[11px] font-semibold text-white">Edit Details</Button>
            </div>
            <section className="space-y-2"><h4 className="text-[18px] font-semibold text-[#272833]">Position Overview</h4><p className="text-[13px] leading-6 text-[#8B8D97]">We are seeking a talented and experienced UI/UX Designer to join our dynamic team in the development of our HR Management System...</p></section>
            <section className="space-y-2"><h4 className="text-[18px] font-semibold text-[#272833]">Key Responsibilities:</h4><ol className="list-decimal space-y-1 pl-4 text-[13px] leading-6 text-[#8B8D97]"><li>Designing intuitive and visually appealing user interfaces for our HR Management System.</li><li>Conducting user research and gathering feedback to understand user needs and preferences.</li><li>Creating wireframes, prototypes, and mockups.</li><li>Collaborating with software developers.</li><li>Implementing best practices in UI/UX design.</li></ol></section>
            <section className="space-y-2"><h4 className="text-[18px] font-semibold text-[#272833]">Qualifications:</h4><ol className="list-decimal space-y-1 pl-4 text-[13px] leading-6 text-[#8B8D97]"><li>Bachelor's degree in Graphic Design, Web Design, Human-Computer Interaction, or related field.</li><li>Proven experience in UI/UX design, with a strong portfolio.</li><li>Proficiency in design tools such as Adobe XD, Sketch, Figma.</li><li>Solid understanding of user-centered design principles.</li></ol></section>
            <section className="space-y-2"><h4 className="text-[18px] font-semibold text-[#272833]">Additional Information:</h4><ul className="list-disc space-y-1 pl-4 text-[13px] leading-6 text-[#8B8D97]"><li>This is a full-time position based at our office.</li><li>Competitive salary and benefits package offered.</li><li>Opportunity to work in a collaborative and innovative environment.</li></ul></section>
          </CardContent></Card>
        </div>

        <div className="space-y-4">
          <Card className="border-[#EBEEF2]"><CardContent className="space-y-3 p-4">
            <div className="flex items-center justify-between"><h3 className="text-[22px] font-semibold text-[#272833]">Project Details</h3><Button className="h-7 rounded bg-[#074473] px-3 text-[11px] font-semibold text-white">Edit Details</Button></div>
            <div className="grid grid-cols-2 gap-2 text-[12px]">
              <div><p className="text-[#8B8D97]">Job Type</p><p className="font-semibold text-[#272833]">Full Time</p></div>
              <div><p className="text-[#8B8D97]">Salary</p><p className="font-semibold text-[#272833]">75k</p></div>
              <div><p className="text-[#8B8D97]">Experience</p><p className="font-semibold text-[#272833]">2 years of experience</p></div>
              <div><p className="text-[#8B8D97]">Uploaded</p><p className="font-semibold text-[#272833]">Mar 28, 2024</p></div>
              <div><p className="text-[#8B8D97]">Vacancies</p><p className="font-semibold text-[#272833]">02</p></div>
              <div><p className="text-[#8B8D97]">Status</p><p className="font-semibold text-[#272833]">Active</p></div>
              <div className="col-span-2"><p className="text-[#8B8D97]">Location</p><p className="font-semibold text-[#272833]">i9/4, near gas station, Islamabad</p></div>
            </div>
          </CardContent></Card>

          <Card className="border-[#EBEEF2]"><CardContent className="space-y-2 p-4">
            <h3 className="text-[22px] font-semibold text-[#272833]">Shared Files</h3>
            {[1,2].map((n)=>(
              <div key={n} className="flex items-center gap-2 rounded bg-[#F8FAFD] p-2">
                <Image className="size-10 rounded object-cover" src={avatarImage} alt="" />
                <div className="grow"><p className="text-[12px] font-semibold text-[#272833]">{n===2?"Doc.pdf":"Image.jpeg"}</p><p className="text-[10px] text-[#8B8D97]">Share With Support Staff on 6 Mar, 2024</p></div>
                <div className="flex items-center gap-1"><Button className="size-6 rounded bg-[#074473] p-0"><Pencil className="size-3.5" /></Button><Button className="size-6 rounded bg-[#F04438] p-0"><Trash2 className="size-3.5" /></Button></div>
              </div>
            ))}
            <Link href="#" className="text-[11px] font-semibold text-[#074473]">See More</Link>
          </CardContent></Card>

          <Card className="border-[#EBEEF2]"><CardContent className="space-y-2 p-4">
            <h3 className="text-[22px] font-semibold text-[#272833]">Applied Candidates</h3>
            {[1,2].map((n)=>(
              <div key={n} className="flex items-center gap-2 rounded bg-[#F8FAFD] p-2">
                <Image className="size-10 rounded object-cover" src={avatarImage} alt="" />
                <div className="grow"><p className="text-[12px] font-semibold text-[#272833]">{n===2?"David Labron":"Janet Adebayo"}</p><p className="text-[10px] text-[#8B8D97]">Team {n===2?"Leader":"Leader"}</p></div>
              </div>
            ))}
            <Link href="#" className="text-[11px] font-semibold text-[#074473]">See More</Link>
          </CardContent></Card>
        </div>
      </div>
    </div>
  );
}