"use client";

import { useCallback, useState } from "react";
import { Upload, FileSpreadsheet, Check, X, AlertCircle } from "lucide-react";

import { trpc } from "@/trpc/client";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";

interface ImportItemsDialogProps {
  projectId: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

interface ImportResult {
  success: boolean;
  totalRows: number;
  added: number;
  updated: number;
  skipped: number;
  skippedItems: string[];
  errors: string[];
}

export function ImportItemsDialog({
  projectId,
  open,
  onOpenChange,
}: ImportItemsDialogProps) {
  const [dragActive, setDragActive] = useState(false);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [result, setResult] = useState<ImportResult | null>(null);

  const utils = trpc.useUtils();
  const mutation = trpc.project.bulkImportItems.useMutation({
    onSuccess: (data) => {
      setResult(data);
      utils.project.getById.invalidate({ id: projectId });
    },
  });

  const handleDrag = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true);
    } else if (e.type === "dragleave") {
      setDragActive(false);
    }
  }, []);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);

    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      const file = e.dataTransfer.files[0];
      if (isValidFileType(file)) {
        setSelectedFile(file);
        setResult(null);
      }
    }
  }, []);

  const handleFileChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files && e.target.files[0]) {
        const file = e.target.files[0];
        if (isValidFileType(file)) {
          setSelectedFile(file);
          setResult(null);
        }
      }
    },
    [],
  );

  const isValidFileType = (file: File) => {
    const validTypes = [
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      "application/vnd.ms-excel",
      "text/csv",
    ];
    return (
      validTypes.includes(file.type) ||
      file.name.endsWith(".xlsx") ||
      file.name.endsWith(".xls") ||
      file.name.endsWith(".csv")
    );
  };

  const downloadTemplate = () => {
    const headers = "Item Code,Quantity,Estimated Rate,Weight,Notes";
    const blob = new Blob([headers], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "import_template.csv";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const handleImport = async () => {
    if (!selectedFile) return;

    const reader = new FileReader();
    reader.onload = async (e) => {
      const base64 = (e.target?.result as string).split(",")[1];
      if (base64) {
        mutation.mutate({ projectId, fileContent: base64 });
      }
    };
    reader.readAsDataURL(selectedFile);
  };

  const handleClose = () => {
    setSelectedFile(null);
    setResult(null);
    setDragActive(false);
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Import Items</DialogTitle>
          <DialogDescription>
            Upload an Excel or CSV file to bulk import items to this project.
          </DialogDescription>
        </DialogHeader>

        {!result ? (
          <div className="space-y-4">
            <Button
              variant="outline"
              size="sm"
              className="w-full"
              onClick={downloadTemplate}
            >
              <FileSpreadsheet className="mr-2 size-4" />
              Download Template
            </Button>

            <div
              className={`relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors ${
                dragActive
                  ? "border-primary bg-primary/5"
                  : "border-border hover:bg-muted/50"
              }`}
              onDragEnter={handleDrag}
              onDragLeave={handleDrag}
              onDragOver={handleDrag}
              onDrop={handleDrop}
            >
              <Upload className="text-muted-foreground mb-2 size-8" />
              <p className="text-muted-foreground text-sm">
                {selectedFile
                  ? selectedFile.name
                  : "Drag & drop your file here, or click to browse"}
              </p>
              <p className="text-muted-foreground mt-1 text-xs">
                Supports .xlsx, .xls, .csv
              </p>
              <input
                type="file"
                accept=".xlsx,.xls,.csv"
                className="absolute inset-0 cursor-pointer opacity-0"
                onChange={handleFileChange}
              />
            </div>

            {mutation.isPending && (
              <div className="text-muted-foreground flex items-center justify-center text-sm">
                <div className="border-primary mr-2 size-4 animate-spin rounded-full border-2 border-t-transparent" />
                Importing...
              </div>
            )}

            {mutation.isError && (
              <div className="text-destructive flex items-center gap-2 text-sm">
                <AlertCircle className="size-4" />
                {mutation.error.message}
              </div>
            )}
          </div>
        ) : (
          <div className="space-y-4">
            {result.success ? (
              <div className="flex items-center gap-2 text-sm text-green-600">
                <Check className="size-4" />
                Import completed successfully
              </div>
            ) : (
              <div className="text-destructive flex items-center gap-2 text-sm">
                <AlertCircle className="size-4" />
                Import failed
              </div>
            )}

            <div className="grid grid-cols-3 gap-4 text-center">
              <div className="bg-muted rounded-lg p-3">
                <p className="text-2xl font-bold">{result.added}</p>
                <p className="text-muted-foreground text-xs">Added</p>
              </div>
              <div className="bg-muted rounded-lg p-3">
                <p className="text-2xl font-bold">{result.updated}</p>
                <p className="text-muted-foreground text-xs">Updated</p>
              </div>
              <div className="bg-muted rounded-lg p-3">
                <p className="text-2xl font-bold">{result.skipped}</p>
                <p className="text-muted-foreground text-xs">Skipped</p>
              </div>
            </div>

            {result.skippedItems.length > 0 && (
              <div>
                <p className="text-sm font-medium">Skipped Items:</p>
                <ul className="text-muted-foreground mt-1 max-h-24 list-inside list-disc overflow-y-auto text-xs">
                  {result.skippedItems.map((item, index) => (
                    <li key={index}>{item}</li>
                  ))}
                </ul>
              </div>
            )}

            {result.errors.length > 0 && (
              <div>
                <p className="text-destructive text-sm font-medium">Errors:</p>
                <ul className="text-destructive mt-1 max-h-24 list-inside list-disc overflow-y-auto text-xs">
                  {result.errors.map((error, index) => (
                    <li key={index}>{error}</li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        )}

        <DialogFooter>
          {!result ? (
            <>
              <Button variant="outline" onClick={handleClose}>
                Cancel
              </Button>
              <Button
                onClick={handleImport}
                disabled={!selectedFile || mutation.isPending}
              >
                Import
              </Button>
            </>
          ) : (
            <Button onClick={handleClose}>Done</Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}