import React from "react";
import CircleUpload from "./CircleUpload";
import { CircleX } from "lucide-react";
import { postCSV } from "../utils/fileHandler";

type ImportGUIProps = {
  onClose: () => void;
  setFiles: (files: File[]) => void;
  files?: File[];
};

const ImportGUI: React.FC<ImportGUIProps> = ({ onClose, setFiles, files }) => {
  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center pt-24">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />

      {/* Dialog Panel */}
      <div className="relative z-10 w-11/12 max-w-lg rounded-2xl border border-black/10 bg-white/95 p-6 shadow-xl ring-1 ring-black/5">
        <div className="flex items-start justify-between gap-4">
          <div>
            <h2 className="text-xl font-extrabold tracking-tight text-zinc-900">
              Losnummern importieren
            </h2>
            <p className="mt-1 text-sm text-zinc-600 leading-relaxed">
              Importieren Sie Losnummern als strukturierte Datei. Unterstützte
              Formate:
            </p>
            <div className="mt-2 flex flex-wrap gap-2">
              {[".csv"].map((fileFormat) => (
                <span
                  key={fileFormat}
                  className="inline-flex items-center rounded-full border border-black/10 bg-zinc-100 px-3 py-0.5 text-xs font-medium text-zinc-700 shadow-inner"
                >
                  {fileFormat}
                </span>
              ))}
            </div>
            <a href="/Beispiel.csv" download>
              <button className="inline-flex justify-center rounded bg-zinc-300 px-1 py-1 text-xs text-zinc-800 shadow transition hover:bg-zinc-400 active:bg-zinc-500">
                Beispiel (Download)
              </button>
            </a>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="group rounded-full p-1.5 text-zinc-500 transition hover:bg-zinc-200/70 hover:text-zinc-700 active:scale-95"
            aria-label="Schließen"
          >
            <CircleX className="h-6 w-6" strokeWidth={2.25} />
          </button>
        </div>

        <div className="mt-6">
          <CircleUpload accept=".csv" setFiles={setFiles} files={files} />
        </div>

        {/* Placeholder for optional file summary / mapping UI */}
        <div className="mt-6 hidden rounded-xl border border-dashed border-black/15 bg-zinc-50/60 p-4 text-center text-xs text-zinc-500">
          Ausgewählte Dateien werden hier aufgelistet.
        </div>

        {/* Actions */}
        <div className="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={onClose}
            className="inline-flex justify-center rounded-xl bg-zinc-300 px-5 py-3 text-sm font-bold text-zinc-800 shadow transition hover:bg-zinc-400 active:bg-zinc-500"
          >
            Abbrechen
          </button>
          <button
            type="button"
            className="inline-flex justify-center rounded-xl bg-blue-600 px-6 py-3 text-sm font-bold text-white shadow transition hover:bg-blue-700 active:bg-blue-800 disabled:opacity-60 disabled:cursor-not-allowed"
            disabled={!files || files.length === 0}
            onClick={() => {
              if (files && files.length) {
                postCSV(files[0]);
              }
              onClose();
            }}
          >
            Importieren
          </button>
        </div>
      </div>
    </div>
  );
};

export default ImportGUI;