'use client';
import { useCallback } from "react";
import { useDropzone } from "react-dropzone";
import { CloudUpload } from "lucide-react";
import * as React from 'react';
import Papa from 'papaparse';
import { RowDataType } from "@/_types/Types";

type DragAndDropProps = {
  onDataParsed: (data: RowDataType[]) => void;
  setActiveStep: (data: number) => void;
};

export default function DragAndDrop({ onDataParsed, setActiveStep }: DragAndDropProps) {
  const onDrop = useCallback((acceptedFiles: File[]) => {
    acceptedFiles.forEach((file) => {
      const reader = new FileReader()

      reader.onabort = () => console.log('file reading was aborted')
      reader.onerror = () => console.log('file reading has failed')
      reader.onload = () => {
        const text = reader.result as string;

        Papa.parse(text, {
          header: true,
          skipEmptyLines: true,
          complete: function (results: { data: RowDataType[] }) {
            console.log('Parsed CSV:', results.data);
            onDataParsed(results.data);
            setActiveStep(1)
          },
        });
      };

      reader.readAsText(file);
    })
  }, [onDataParsed, setActiveStep]);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "text/csv": [".csv"]
    }
  });

  return (
    <div className="p-8 mx-auto text-center space-y-8 w-full">
      <h2 className="text-2xl font-semibold">Choose a File to Upload</h2>

      <div
        {...getRootProps()}
        className="border-2 border-dashed border-gray-400 rounded-md p-12 hover:border-pink-500 cursor-pointer transition"
      >
        <input {...getInputProps()} />
        <div className="flex flex-col items-center space-y-2">
          <CloudUpload className="text-4xl text-pink-500" />
          {isDragActive ? (
            <p className="font-semibold">Drop the CSV file here...</p>
          ) : (
            <>
              <p className="font-semibold">Drag & Drop a CSV file here</p>
              <p>OR</p>
              <button className="cursor-pointer bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded">SELECT A FILE</button>
            </>
          )}
        </div>
      </div>

      <CSVFormatExample />

      <button className="mt-4 cursor-pointer bg-pink-500 hover:bg-pink-600 text-white px-6 py-2 rounded">DOWNLOAD SAMPLE</button>
    </div>
  );
}

function CSVFormatExample() {
  return (
    <div className="text-left mt-8">
      <h3 className="text-xl font-semibold">CSV Format</h3>
      <p className="text-sm mt-2 mb-4 text-gray-600">
        The format of your CSV file is important. Please arrange your CSV file to match the headers shown below and save as UTF-8.
        Note: First name and Phone are the only required fields.
      </p>
      <div className="overflow-x-auto">
        <table className="table-auto border border-collapse w-full text-sm">
          <thead>
            <tr className="bg-pink-500 text-white">
              <th className="border px-3 py-2">First Name</th>
              <th className="border px-3 py-2">Last Name</th>
              <th className="border px-3 py-2">Company</th>
              <th className="border px-3 py-2">Phone</th>
              <th className="border px-3 py-2">Email</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border px-3 py-2">John</td>
              <td className="border px-3 py-2">Doe</td>
              <td className="border px-3 py-2">XYZ Corp</td>
              <td className="border px-3 py-2">18015555555</td>
              <td className="border px-3 py-2">J.Doe@web.com</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}