Untitled

"use client";

import MainLayout from "@/components/HOC/layout/MainLayout";
import { useState } from "react";
import { useRouter, useParams } from "next/navigation";
import axios from "axios";
import { apiEndpoint } from "@/app/api/config";
import Image from "next/image";

export default function UploadCCTVCertificatePage() {
  const [licenseNumber, setLicenseNumber] = useState<string>("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [uploadError, setUploadError] = useState<string | null>(null);
  const [uploadSuccess, setUploadSuccess] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState<boolean>(false); // Uploading state
  const router = useRouter();
  const { id } = useParams();

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  const handleSubmit = async () => {
    if (!selectedFile || !licenseNumber) {
      setUploadError("Please select a file and enter license number.");
      return;
    }

    setIsUploading(true);

    try {
      const formData = new FormData();
      formData.append("file", selectedFile);
      formData.append("name", "CCTV License");
      formData.append("type", "cctv_certificate");
      formData.append("data", JSON.stringify({
        "license_number": licenseNumber,
        description: "",
        todo: {
          device_installed: false,
          sample_recording: false,
          register_to_police_station: false,
          license_acquired: false
        },
      }));

      const response = await axios.post(
        `${apiEndpoint}/api/business_units/${id}/documents`,
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );

      setUploadSuccess("File uploaded successfully!");
      setIsUploading(false);
      router.push(`/business/cctv-certificate/${id}/detail/${response.data.data.id}`);
    } catch (error) {
      setUploadError("Failed to save document data.");
      setIsUploading(false);
      console.error(error);
    }
  };


  const getIconForFile = (file: File | null) => {
    if (!file) return "/images/Internet.png";

    const fileType = file.type.toLowerCase();

    if (fileType.includes("pdf")) {
      return "/images/PdfImage.png";
    } else if (fileType.includes("image")) {
      return "/images/Doc.png";
    } else {
      return "/images/Internet.png";
    }
  };

  const handleRemoveFile = () => {
    setSelectedFile(null);
  };

  return (
    <MainLayout>
      <div className="bg-white p-6 rounded-lg max-w-md mx-auto">
        <h1 className="text-xl mb-6 font-semibold text-gray-800">Upload CCTV Certificate</h1>

        <div className="border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center">
          {selectedFile ? (
            <div className="flex flex-col items-center">
              <div className="flex items-center space-x-2">
                <Image
                  src={getIconForFile(selectedFile)}
                  alt="File Icon"
                  height={8}
                  width={8}
                />
                <p className="text-gray-700 font-semibold">{selectedFile.name}</p>
              </div>
              <button
                className="mt-2 px-4 py-2 bg-gray-200 text-gray-600 rounded-md hover:bg-gray-300"
                onClick={handleRemoveFile}
              >
                <i className="fas fa-trash-alt mr-2"></i>Remove document
              </button>
            </div>
          ) : (
            <>
              <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
                <i className="fas fa-plus text-2xl text-gray-500"></i>
              </div>
              <p className="text-gray-500 mt-2">Add Document</p>
            </>
          )}

          <input
            type="file"
            id="file-upload"
            onChange={handleFileChange}
            className="hidden"
          />

          <label
            htmlFor="file-upload"
            className="mt-4 px-6 py-3 bg-blue-500 text-white rounded-lg cursor-pointer hover:bg-blue-600 focus:ring-2 focus:ring-blue-500"
          >
            Upload
          </label>
        </div>

        {/* License Number Field */}
        <div className="mb-4">
          <label className="block text-gray-700 text-sm font-semibold mb-1">
            License Number
          </label>
          <input
            type="text"
            placeholder="Enter License Number"
            value={licenseNumber}
            onChange={(e) => setLicenseNumber(e.target.value)}
            className="p-3 border border-gray-300 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        {uploadError && <p className="text-red-500 mb-4">{uploadError}</p>}
        {uploadSuccess && <p className="text-green-500 mb-4">{uploadSuccess}</p>}

        <button
          onClick={handleSubmit}
          disabled={isUploading}
          className={`w-full text-white py-3 mt-48 rounded-lg focus:outline-none focus:ring-2 ${isUploading ? 'bg-gray-400' : 'bg-blue-500 hover:bg-blue-600 focus:ring-blue-500'
            }`}
        >
          {isUploading ? 'Uploading...' : 'Save'}
        </button>
      </div>
    </MainLayout>
  );
}