"use client";

import { type ImapFolder } from "@/lib/api";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Separator } from "@/components/ui/separator";

interface ImapAccountDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  formName: string;
  setFormName: (v: string) => void;
  formHost: string;
  setFormHost: (v: string) => void;
  formPort: string;
  setFormPort: (v: string) => void;
  formTls: string;
  setFormTls: (v: string) => void;
  formUsername: string;
  setFormUsername: (v: string) => void;
  formPassword: string;
  setFormPassword: (v: string) => void;
  testing: boolean;
  testError: string;
  testFolders: ImapFolder[] | null;
  excludedFolders: Set<string>;
  saving: boolean;
  onTest: () => void;
  onSave: () => void;
  onCancel: () => void;
  onToggleExcluded: (name: string) => void;
}

export function ImapAccountDialog({
  open,
  onOpenChange,
  formName,
  setFormName,
  formHost,
  setFormHost,
  formPort,
  setFormPort,
  formTls,
  setFormTls,
  formUsername,
  setFormUsername,
  formPassword,
  setFormPassword,
  testing,
  testError,
  testFolders,
  excludedFolders,
  saving,
  onTest,
  onSave,
  onCancel,
  onToggleExcluded,
}: ImapAccountDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-lg max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>IMAP-Konto hinzufuegen</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-1">
            <Label htmlFor="imap-name">Name</Label>
            <Input
              id="imap-name"
              placeholder="z.B. Firmen-Mail"
              value={formName}
              onChange={(e) => setFormName(e.target.value)}
            />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div className="space-y-1">
              <Label htmlFor="imap-host">Host</Label>
              <Input
                id="imap-host"
                placeholder="imap.example.com"
                value={formHost}
                onChange={(e) => setFormHost(e.target.value)}
              />
            </div>
            <div className="space-y-1">
              <Label htmlFor="imap-port">Port</Label>
              <Input
                id="imap-port"
                type="number"
                value={formPort}
                onChange={(e) => setFormPort(e.target.value)}
              />
            </div>
          </div>
          <div className="space-y-1">
            <Label>Verschluesselung</Label>
            <Select value={formTls} onValueChange={setFormTls}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="ssl">SSL/TLS</SelectItem>
                <SelectItem value="starttls">STARTTLS</SelectItem>
                <SelectItem value="none">Unverschluesselt</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1">
            <Label htmlFor="imap-user">Benutzername</Label>
            <Input
              id="imap-user"
              placeholder="user@example.com"
              value={formUsername}
              onChange={(e) => setFormUsername(e.target.value)}
            />
          </div>
          <div className="space-y-1">
            <Label htmlFor="imap-pass">Passwort</Label>
            <Input
              id="imap-pass"
              type="password"
              value={formPassword}
              onChange={(e) => setFormPassword(e.target.value)}
            />
          </div>

          <Button
            variant="outline"
            onClick={onTest}
            disabled={testing || !formHost || !formUsername || !formPassword}
            className="w-full"
          >
            {testing ? "Teste Verbindung..." : "Verbindung testen"}
          </Button>

          {testError && <p className="text-sm text-destructive">{testError}</p>}

          {testFolders && (
            <>
              <Separator />
              <div>
                <h4 className="text-sm font-medium mb-2">Erkannte Ordner</h4>
                <div className="space-y-2 max-h-48 overflow-y-auto">
                  {testFolders.map((folder) => (
                    <div key={folder.name} className="flex items-center gap-2">
                      <Checkbox
                        id={`folder-${folder.name}`}
                        checked={!excludedFolders.has(folder.name)}
                        onCheckedChange={() => onToggleExcluded(folder.name)}
                      />
                      <Label
                        htmlFor={`folder-${folder.name}`}
                        className="text-sm flex-1 cursor-pointer"
                      >
                        {folder.name}
                      </Label>
                      {folder.excluded && folder.reason && (
                        <span className="text-xs text-muted-foreground">
                          ({folder.reason === "special_use"
                            ? "IMAP-Flag"
                            : "Namens-Erkennung"})
                        </span>
                      )}
                    </div>
                  ))}
                </div>
                <p className="text-xs text-muted-foreground mt-2">
                  Deaktivierte Ordner werden nicht importiert.
                </p>
              </div>
            </>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onCancel}>
            Abbrechen
          </Button>
          <Button
            onClick={onSave}
            disabled={
              saving || !formName || !formHost || !formUsername || !formPassword
            }
          >
            {saving ? "Speichert..." : "Speichern"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
