"use client";

import React, { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { getUserById } from "@/service/management-user/management-user";
import { Card } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { FileText } from "lucide-react";

interface Detail {
  fullname: string;
  birthPlace: string;
  birthDate: string;
  education: string;
  career: string;
  expertise: string;
  experience: string;
  position: string;
  region: string;
  cvUrl: string;
  photoUrl: string;
  isActive: boolean;
}

export default function FormDetailExperts() {
  const params = useParams();
  const id = params?.id;
  const [detail, setDetail] = useState<Detail | null>(null);

  useEffect(() => {
    async function initState() {
      if (id) {
        const response = await getUserById(String(id));
        const details = response?.data?.data;
        setDetail(details);
      }
    }
    initState();
  }, [id]);

  if (!detail) return <div>Loading...</div>;

  return (
    <Card className="flex flex-col md:flex-row p-4 gap-6">
      <div className="flex flex-col items-center">
        <Image
          src={"/assets/img/experts.png"}
          alt="Profile Picture"
          width={450}
          height={850}
          className="rounded-md object-cover"
        />
        <div className="flex items-start gap-2 mt-2">
          <span className="text-sm">Not Active</span>
          <Switch checked={detail.isActive} disabled />
          <span className="text-sm">Active</span>
        </div>
      </div>

      <div className="flex flex-col gap-y-2 w-full">
        <div>
          <strong>Nama:</strong> {detail?.fullname}
        </div>
        <div>
          <strong>Tempat / Tanggal Lahir:</strong> {detail.birthPlace},{" "}
          {detail.birthDate}
        </div>
        <div>
          <strong>Pendidikan:</strong> {detail.education}
        </div>
        <div className="sm:col-span-2">
          <strong>Karier:</strong>
          <p className="whitespace-pre-line">{detail.career}</p>
        </div>
        <div>
          <strong>Bidang Keahlian:</strong> {detail.expertise}
        </div>
        <div>
          <strong>Pengalaman:</strong> {detail.experience}
        </div>
        <div>
          <strong>Posisi:</strong> {detail.position}
        </div>
        <div>
          <strong>Wilayah:</strong> {detail.region}
        </div>
        <div className="sm:col-span-2">
          <strong>CV:</strong>
          <div className="mt-1">
            <Button variant="outline" asChild>
              <a href={detail.cvUrl} target="_blank" rel="noopener noreferrer">
                <FileText className="mr-2 h-4 w-4" /> Lihat CV
              </a>
            </Button>
          </div>
        </div>
      </div>
    </Card>
  );
}