import React, { useState } from "react";
import { useDropzone } from "react-dropzone";
import { UpdateManager } from "@/types/vessel";

interface ManagerAndCoatingFormProps {
  onManagerDataUpdate: (data: UpdateManager[]) => void;
}

const ManagerAndCoatingForm: React.FC<ManagerAndCoatingFormProps> = ({
  onManagerDataUpdate,
}) => {
  const [file, setFile] = useState<File | null>(null);
  const [managerData, setManagerData] = useState<UpdateManager[]>([]);

  const onDrop = async (acceptedFiles: File[]) => {
    const uploadedFile = acceptedFiles[0];
    setFile(uploadedFile);

    const formData = new FormData();
    formData.append("file", uploadedFile);

    try {
      const response = await fetch("/api/menteithUpdate?action=previewData", {
        method: "POST",
        body: formData,
      });

      const data = await response.json();
      if (data.success) {
        const filteredManagerRecords = data.managerRecords.filter(
          (record: any) => !/unknown/i.test(record.manager),
        );
        setManagerData(filteredManagerRecords);
        onManagerDataUpdate(filteredManagerRecords);
      }
    } catch (error) {
      console.error("Error previewing file: ", error);
    }
  };

  const handleUpdate = async () => {
    try {
      // Update manager records in DB
      await fetch("/api/menteithUpdate", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          action: "updateManagerRecords",
          records: managerData,
        }),
      });

      alert("Manager data updated successfully.");
    } catch (error) {
      console.error("Error updating manager data: ", error);
    }
  };

  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div className="p-4">
      <div
        {...getRootProps({
          className:
            "dropzone border-2 border-dashed p-4 rounded-md text-center cursor-pointer text-white",
        })}
      >
        <input {...getInputProps()} />
        <p>
          Drag & drop a vessel manager update file here, or click to select one
        </p>
      </div>

      {file && (
        <div className="mt-4">
          <p className="text-white">File: {file.name}</p>
        </div>
      )}

      <button
        onClick={handleUpdate}
        className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-white"
      >
        Update Data
      </button>

      {managerData.length > 0 && (
        <div className="mt-6">
          <h3 className="mb-2 bg-gray-800 p-2 text-lg text-white">
            Manager Changes
          </h3>
          <div className="max-h-96 overflow-auto">
            <table className="min-w-full border-collapse border border-gray-400">
              <thead className="sticky top-0 bg-gray-700">
                <tr>
                  <th className="border border-gray-300 px-4 py-2 text-white">
                    IMO Number
                  </th>
                  <th className="border border-gray-300 px-4 py-2 text-white">
                    Manager
                  </th>
                </tr>
              </thead>
              <tbody>
                {managerData.map((record, index) => (
                  <tr key={index}>
                    <td className="border border-gray-300 px-4 py-2 text-white">
                      {record.imo}
                    </td>
                    <td className="border border-gray-300 px-4 py-2 text-white">
                      {record.manager}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
};

export default ManagerAndCoatingForm;