import { useState } from "react";
import { Button, FileInput, Stack } from "@mantine/core";
import { FileText } from "lucide-react";
import toast from "react-hot-toast";

import { ActionShell } from "./ActionShell";
import { contractsService } from "@/services/contracts.service";

export function TransportDocumentCard({ bookingId }: { bookingId: string }) {
  const [file, setFile] = useState<File | null>(null);
  const [loading, setLoading] = useState(false);

  return (
    <ActionShell
      icon={FileText}
      title="Transit permit"
      subtitle="Upload after wagon allocation (GL Ethiopia)"
      done={false}
    >
      <Stack gap="sm">
        <FileInput
          label="Transit permit"
          value={file}
          onChange={setFile}
          size="sm"
        />
        <Button
          color="edr-green"
          loading={loading}
          disabled={!file}
          onClick={async () => {
            if (!file) return;
            setLoading(true);
            try {
              await contractsService.uploadTransportDocument(bookingId, { transportDocument: file });
              toast.success("Transport document uploaded");
            } catch (e) {
              toast.error(e instanceof Error ? e.message : "Upload failed");
            } finally {
              setLoading(false);
            }
          }}
        >
          Upload document
        </Button>
      </Stack>
    </ActionShell>
  );
}
