"use client";

import { type UploadJob } from "@/lib/api";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription } from "@/components/ui/alert";

interface ImportTabProps {
  uploadDragging: boolean;
  setUploadDragging: (v: boolean) => void;
  uploadJob: UploadJob | null;
  uploadError: string;
  uploadLoading: boolean;
  onUploadFiles: (files: File[]) => void;
}

export function ImportTab({
  uploadDragging,
  setUploadDragging,
  uploadJob,
  uploadError,
  uploadLoading,
  onUploadFiles,
}: ImportTabProps) {
  return (
    <div className="mt-4 space-y-4">
      <h2 className="text-lg font-semibold">EML / MBOX importieren</h2>
      <p className="text-sm text-muted-foreground">
        Lade .eml oder .mbox Dateien hoch um sie ins Archiv zu importieren. Duplikate werden automatisch übersprungen.
      </p>

      {/* Drop zone */}
      <div
        onDragOver={(e) => { e.preventDefault(); setUploadDragging(true); }}
        onDragLeave={() => setUploadDragging(false)}
        onDrop={(e) => {
          e.preventDefault();
          setUploadDragging(false);
          const files = Array.from(e.dataTransfer.files);
          onUploadFiles(files);
        }}
        className={`border-2 border-dashed rounded-lg p-10 text-center transition-colors cursor-pointer ${
          uploadDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-primary/50"
        }`}
        onClick={() => document.getElementById("upload-file-input")?.click()}
      >
        <input
          id="upload-file-input"
          type="file"
          multiple
          accept=".eml,.mbox"
          className="hidden"
          onChange={(e) => {
            if (e.target.files) onUploadFiles(Array.from(e.target.files));
            e.target.value = "";
          }}
        />
        <p className="text-sm font-medium">Dateien hierher ziehen oder klicken zum Auswählen</p>
        <p className="text-xs text-muted-foreground mt-1">Akzeptiert: .eml, .mbox</p>
      </div>

      {uploadError && (
        <Alert variant="destructive">
          <AlertDescription>{uploadError}</AlertDescription>
        </Alert>
      )}

      {/* Progress */}
      {(uploadLoading || uploadJob) && uploadJob && (
        <Card>
          <CardContent className="p-4 space-y-3">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">
                {uploadJob.status === "running" ? "Import läuft..." : "Import abgeschlossen"}
              </span>
              <Badge variant={uploadJob.status === "done" ? "default" : "secondary"}>
                {uploadJob.status === "done" ? "Fertig" : "Läuft"}
              </Badge>
            </div>

            {/* Progress bar */}
            {uploadJob.total > 0 && (
              <div className="space-y-1">
                <div className="w-full bg-muted rounded-full h-2">
                  <div
                    className="bg-primary h-2 rounded-full transition-all"
                    style={{ width: `${Math.min(100, ((uploadJob.imported + uploadJob.skipped + uploadJob.errors) / uploadJob.total) * 100)}%` }}
                  />
                </div>
                <p className="text-xs text-muted-foreground">
                  {uploadJob.imported + uploadJob.skipped + uploadJob.errors} / {uploadJob.total} verarbeitet
                </p>
              </div>
            )}

            {uploadJob.status === "done" && (
              <div className="grid grid-cols-3 gap-3 text-center text-sm">
                <div className="rounded bg-green-50 dark:bg-green-950 p-2">
                  <p className="font-bold text-green-700 dark:text-green-400">{uploadJob.imported}</p>
                  <p className="text-xs text-muted-foreground">Importiert</p>
                </div>
                <div className="rounded bg-yellow-50 dark:bg-yellow-950 p-2">
                  <p className="font-bold text-yellow-700 dark:text-yellow-400">{uploadJob.skipped}</p>
                  <p className="text-xs text-muted-foreground">Übersprungen</p>
                </div>
                <div className="rounded bg-red-50 dark:bg-red-950 p-2">
                  <p className="font-bold text-red-700 dark:text-red-400">{uploadJob.errors}</p>
                  <p className="text-xs text-muted-foreground">Fehler</p>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {uploadLoading && !uploadJob && (
        <p className="text-sm text-muted-foreground animate-pulse">Upload läuft...</p>
      )}
    </div>
  );
}
