import React, { useState } from "react";
import { useDropzone } from "react-dropzone";
import * as XLSX from "xlsx";
import {
  BackHomeButton,
  CommandPalletteButton,
  MinimalPage,
  PageHeading,
} from "ui";
import { BugReportButton, CommandInterface, Navigation } from "@/components";

interface VesselManagerRecord {
  IMONumber: string;
  EffectiveControl: string;
}

const UpdateVesselManager: React.FC = () => {
  const [file, setFile] = useState<File | null>(null);
  const [tableData, setTableData] = useState<VesselManagerRecord[]>([]);

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

    const reader = new FileReader();
    reader.onload = (e) => {
      const data = e.target?.result;
      const workbook = XLSX.read(data, { type: "binary" });
      const worksheet = workbook.Sheets["Recent Changes (EffControl)"];
      const jsonData = XLSX.utils.sheet_to_json<VesselManagerRecord>(worksheet);
      setTableData(jsonData);
    };
    reader.readAsBinaryString(uploadedFile);
  };

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

  return (
    <MinimalPage
      pageTitle={"Update Vessel Manager | Vessel Interface"}
      pageDescription={"Vessel Interface | Update Vessel Manager"}
    >
      <div className="flex w-full flex-row justify-between pl-1 pt-1">
        <div>
          <BackHomeButton />
        </div>
        <Navigation />
        <div className="flex flex-row gap-4">
          <BugReportButton />
          <CommandPalletteButton />
          <CommandInterface />
        </div>
      </div>

      <PageHeading text="Update Vessel Manager" />

      <div className="mt-6 flex w-full flex-col gap-2 p-2 sm:w-1/2">
        <div className="mt-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>
        </div>

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

        {tableData.length > 0 && (
          <div className="mt-6 overflow-x-auto">
            <table className="min-w-full border-collapse border border-gray-400">
              <thead>
                <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">
                    Effective Control
                  </th>
                </tr>
              </thead>
              <tbody>
                {tableData.map((record, index) => (
                  <tr key={index}>
                    <td className="border border-gray-300 px-4 py-2 text-white">
                      {record.IMONumber}
                    </td>
                    <td className="border border-gray-300 px-4 py-2 text-white">
                      {record.EffectiveControl}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </MinimalPage>
  );
};

export default UpdateVesselManager;