"use client";

import { type UploadJob } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

interface ExportZipDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  selectedCount: number;
  exportAttachments: boolean;
  setExportAttachments: (v: boolean) => void;
  exporting: boolean;
  onExport: () => void;
}

export function ExportZipDialog({
  open,
  onOpenChange,
  selectedCount,
  exportAttachments,
  setExportAttachments,
  exporting,
  onExport,
}: ExportZipDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>E-Mails exportieren</DialogTitle>
          <DialogDescription>
            {selectedCount} E-Mail{selectedCount !== 1 ? "s" : ""} als ZIP herunterladen
          </DialogDescription>
        </DialogHeader>
        <div className="flex items-center gap-3 py-2">
          <Switch
            id="attachments"
            checked={exportAttachments}
            onCheckedChange={setExportAttachments}
          />
          <Label htmlFor="attachments">Anhänge einschließen</Label>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Abbrechen
          </Button>
          <Button onClick={onExport} disabled={exporting}>
            {exporting ? "Wird exportiert..." : "ZIP herunterladen"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

interface EDiscoveryDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  caseName: string;
  setCaseName: (v: string) => void;
  loading: boolean;
  onExport: () => void;
  query: string;
  fromFilter: string;
  toFilter: string;
  dateFrom: string;
  dateTo: string;
}

export function EDiscoveryDialog({
  open,
  onOpenChange,
  caseName,
  setCaseName,
  loading,
  onExport,
  query,
  fromFilter,
  toFilter,
  dateFrom,
  dateTo,
}: EDiscoveryDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>eDiscovery Export</DialogTitle>
          <DialogDescription>
            Exportiert alle Mails der aktuellen Suche als ZIP mit Metadaten-CSV und README.
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-2">
          <div className="space-y-1.5">
            <Label htmlFor="case-name">Case-Name (optional)</Label>
            <input
              id="case-name"
              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
              placeholder="z.B. Ermittlung-2026-Q1"
              value={caseName}
              onChange={(e) => setCaseName(e.target.value)}
            />
          </div>
          <div className="rounded-md bg-muted px-3 py-2 text-sm text-muted-foreground space-y-1">
            <div><span className="font-medium">Aktive Filter:</span></div>
            {query && <div>Suche: <span className="font-mono">{query}</span></div>}
            {fromFilter && <div>Von: <span className="font-mono">{fromFilter}</span></div>}
            {toFilter && <div>An: <span className="font-mono">{toFilter}</span></div>}
            {dateFrom && <div>Von Datum: {dateFrom}</div>}
            {dateTo && <div>Bis Datum: {dateTo}</div>}
            {!query && !fromFilter && !toFilter && !dateFrom && !dateTo && (
              <div className="italic">Keine Filter — alle archivierten Mails werden exportiert</div>
            )}
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Abbrechen
          </Button>
          <Button onClick={onExport} disabled={loading}>
            {loading ? "Wird exportiert..." : "ZIP herunterladen"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

interface UploadDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  dragging: boolean;
  setDragging: (v: boolean) => void;
  job: UploadJob | null;
  error: string;
  loading: boolean;
  onUploadFiles: (files: FileList | File[]) => void;
  onClose: () => void;
}

export function UploadDialog({
  open,
  onOpenChange,
  dragging,
  setDragging,
  job,
  error,
  loading,
  onUploadFiles,
  onClose,
}: UploadDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>E-Mails importieren</DialogTitle>
          <DialogDescription>
            EML- oder MBOX-Dateien in das Archiv hochladen
          </DialogDescription>
        </DialogHeader>

        {!job && (
          <div
            className={`flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
              dragging ? "border-primary bg-primary/5" : "border-muted-foreground/30"
            }`}
            onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
            onDragLeave={() => setDragging(false)}
            onDrop={(e) => {
              e.preventDefault();
              setDragging(false);
              if (e.dataTransfer.files.length > 0) onUploadFiles(e.dataTransfer.files);
            }}
          >
            <p className="text-sm text-muted-foreground mb-3">
              Dateien hierher ziehen oder auswählen
            </p>
            <label>
              <input
                type="file"
                accept=".eml,.mbox"
                multiple
                className="hidden"
                onChange={(e) => { if (e.target.files) onUploadFiles(e.target.files); }}
              />
              <Button type="button" variant="outline" size="sm" asChild>
                <span>Dateien auswählen</span>
              </Button>
            </label>
            <p className="mt-2 text-xs text-muted-foreground">.eml · .mbox</p>
          </div>
        )}

        {error && (
          <p className="text-sm text-destructive">{error}</p>
        )}

        {job && (
          <div className="space-y-3">
            <Progress
              value={job.total > 0 ? Math.round(((job.imported + job.skipped + job.errors) / job.total) * 100) : 0}
            />
            <div className="grid grid-cols-3 gap-2 text-center text-sm">
              <div>
                <div className="font-semibold text-green-600">{job.imported}</div>
                <div className="text-xs text-muted-foreground">Importiert</div>
              </div>
              <div>
                <div className="font-semibold text-yellow-600">{job.skipped}</div>
                <div className="text-xs text-muted-foreground">Duplikate</div>
              </div>
              <div>
                <div className="font-semibold text-red-600">{job.errors}</div>
                <div className="text-xs text-muted-foreground">Fehler</div>
              </div>
            </div>
            {job.status === "running" && (
              <p className="text-xs text-center text-muted-foreground">
                Verarbeite {job.imported + job.skipped + job.errors} / {job.total} …
              </p>
            )}
            {job.status === "done" && (
              <p className="text-xs text-center text-green-600 font-medium">Abgeschlossen</p>
            )}
          </div>
        )}

        <DialogFooter>
          <Button variant="outline" onClick={onClose} disabled={loading && job?.status === "running"}>
            {job?.status === "done" ? "Schließen" : "Abbrechen"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
