"use client";

import { useEffect, useState } from "react";
import { Upload, Plus, Settings, CheckCheck } from "lucide-react";
import Image from "next/image";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardContent, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { loading } from "@/config/swal";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useDropzone } from "react-dropzone";
import z from "zod";
import dynamic from "next/dynamic";
import { useParams } from "next/navigation";
import Cookies from "js-cookie";
import { getProductDataById } from "@/service/product";
import { getAgentById } from "@/service/agent";
import { Checkbox } from "@/components/ui/checkbox";

const ViewEditor = dynamic(
  () => {
    return import("@/components/editor/view-editor");
  },
  { ssr: false },
);
const CustomEditor = dynamic(
  () => {
    return import("@/components/editor/custom-editor");
  },
  { ssr: false },
);

interface FileWithPreview extends File {
  preview: string;
}

interface CategoryType {
  id: number;
  label: string;
  value: number;
}
const categorySchema = z.object({
  id: z.number(),
  label: z.string(),
  value: z.number(),
});

const AGENT_TYPES = [
  { key: "after-sales", label: "After Sales" },
  { key: "sales", label: "Sales" },
  { key: "spv", label: "SPV" },
  { key: "branch_manager", label: "Branch Manager" },
];

const createArticleSchema = z.object({
  title: z.string().min(2, {
    message: "Judul harus diisi",
  }),
  variant: z.string().min(2, {
    message: "variant diisi",
  }),
  price: z.string().min(2, {
    message: "Price harus diisi",
  }),
  category: z.array(categorySchema).nonempty({
    message: "Kategori harus memiliki setidaknya satu item",
  }),
  tags: z.array(z.string()).nonempty({
    message: "Minimal 1 tag",
  }), // Array berisi string
});

export default function DetailAgentForm(props: { isDetail: boolean }) {
  const { isDetail } = props;
  const params = useParams();
  const id = params?.id;
  const [data, setData] = useState<any>(null);
  const [openApproverHistory, setOpenApproverHistory] = useState(false);

  useEffect(() => {
    fetchData();
  }, []);

  async function fetchData() {
    const res = await getAgentById(id);
    setData(res?.data?.data);
  }

  if (!data) return null;

  const handleOpenApproverHistory = () => {
    setOpenApproverHistory(true);
  };

  return (
    <>
      <Card className="w-full border-none shadow-md">
        <CardHeader>
          <CardTitle className="text-xl font-bold text-teal-900">
            Detail Agen
          </CardTitle>
        </CardHeader>

        <CardContent className="space-y-6">
          {/* FORM */}
          <div className="grid md:grid-cols-3 gap-4">
            <div>
              <Label className="mb-2">Nama Lengkap</Label>
              <Input value={data.name} readOnly />
            </div>

            <div>
              <Label className="mb-2">Jabatan</Label>
              <Input value={data.job_title} readOnly />
            </div>

            <div>
              <Label className="mb-2">No Telp</Label>
              <Input value={data.phone} readOnly />
            </div>
          </div>

          {/* JENIS AGEN */}
          <div>
            <Label className="mb-2 block">Jenis Agen</Label>
            <div className="flex gap-6">
              {AGENT_TYPES.map((item) => (
                <div key={item.key} className="flex items-center gap-2">
                  <Checkbox checked={data.job_title === item.key} disabled />
                  <span>{item.label}</span>
                </div>
              ))}
            </div>
          </div>

          {/* FOTO PROFILE */}
          <div>
            <Label className="mb-2 block">Foto Profile</Label>
            <div className="w-24 h-24 rounded-lg overflow-hidden border">
              <Image
                src={data.profile_picture_url}
                alt="Profile"
                width={96}
                height={96}
                className="object-cover"
              />
            </div>
          </div>
          <div className="border rounded-lg px-3 py-3">
            <p>Comment : </p>
            <div className="flex flex-row justify-between">
              <button
                onClick={handleOpenApproverHistory}
                className="text-sm text-blue-600 hover:underline mt-2"
              >
                View Approver History
              </button>
              <p>Jaecoo - Approver | 10/11/2026</p>
            </div>
          </div>
          {/* <Button className=" bg-teal-800 hover:bg-teal-900 text-white py-3">
            Submit
          </Button> */}
        </CardContent>
      </Card>
      {openApproverHistory && (
        <div
          className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
          onClick={() => setOpenApproverHistory(false)}
        >
          <div
            className="bg-white rounded-2xl shadow-2xl max-w-3xl w-full overflow-hidden"
            onClick={(e) => e.stopPropagation()}
          >
            {/* HEADER */}
            <div className="bg-gradient-to-br from-[#1F6779] to-[#0F6C75] text-white px-6 py-5 relative">
              <button
                onClick={() => setOpenApproverHistory(false)}
                className="absolute top-4 right-4 text-white/80 hover:text-white text-xl"
              >
                ✕
              </button>

              <h2 className="text-lg font-semibold">Approver History</h2>

              <div className="flex items-center gap-2 mt-3">
                <span className="bg-yellow-100 text-yellow-800 text-xs font-medium px-3 py-1 rounded-full">
                  Menunggu
                </span>
                <span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
                  Banner
                </span>
                <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
                  1
                </span>
              </div>
            </div>

            {/* BODY */}
            <div className="p-6 grid grid-cols-[1fr_auto_1fr] gap-6 items-start">
              {/* LEFT TIMELINE */}
              <div className="relative space-y-6">
                {/* Upload */}
                <div className="flex flex-col items-center">
                  <span className="bg-[#C7DDE4] text-[#0F6C75] text-xs px-4 py-1 rounded-full">
                    Upload
                  </span>
                  <div className="w-px h-6 bg-gray-300" />
                </div>

                {/* Diterima */}
                <div className="relative bg-[#1F6779] text-white rounded-xl p-4">
                  <h4 className="font-semibold text-sm mb-2">Diterima</h4>
                  <span className="inline-block bg-[#E3EFF4] text-[#0F6C75] text-xs px-3 py-1 rounded-full">
                    Direview oleh: approver-jaecoo1
                  </span>
                </div>

                <div className="w-px h-6 bg-gray-300 mx-auto" />

                {/* Pending */}
                <div className="relative bg-[#B36A00] text-white rounded-xl p-4">
                  <h4 className="font-semibold text-sm mb-2">Pending</h4>
                  <span className="inline-block bg-[#FFF6CC] text-[#7A4A00] text-xs px-3 py-1 rounded-full">
                    Direview oleh: approver-jaecoo1
                  </span>
                </div>
              </div>

              {/* ARROW */}
              <div className="flex flex-col gap-20 text-gray-500 font-bold">
                <span>&gt;</span>
                <span>&gt;</span>
              </div>

              {/* RIGHT NOTES */}
              <div className="space-y-14">
                <div>
                  <div className="bg-[#C7DDE4] text-sm px-4 py-2 rounded-lg">
                    Catatan:
                  </div>
                </div>

                <div>
                  <div className="bg-[#FFF9C4] text-sm px-4 py-2 rounded-lg">
                    Catatan:
                  </div>
                </div>
              </div>
            </div>

            {/* FOOTER */}
            <div className="border-t bg-[#F2F7FA] text-center py-3">
              <button
                onClick={() => setOpenApproverHistory(false)}
                className="text-[#0F6C75] font-medium hover:underline"
              >
                Tutup
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}