"use client";

import { type ImapAccount } 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";

interface ImapEditDialogProps {
  editAccount: ImapAccount | null;
  onClose: () => void;
  editName: string;
  setEditName: (v: string) => void;
  editHost: string;
  setEditHost: (v: string) => void;
  editPort: string;
  setEditPort: (v: string) => void;
  editTls: string;
  setEditTls: (v: string) => void;
  editUsername: string;
  setEditUsername: (v: string) => void;
  editPassword: string;
  setEditPassword: (v: string) => void;
  editSaving: boolean;
  editError: string;
  onSave: () => void;
}

export function ImapEditDialog({
  editAccount,
  onClose,
  editName,
  setEditName,
  editHost,
  setEditHost,
  editPort,
  setEditPort,
  editTls,
  setEditTls,
  editUsername,
  setEditUsername,
  editPassword,
  setEditPassword,
  editSaving,
  editError,
  onSave,
}: ImapEditDialogProps) {
  return (
    <Dialog
      open={editAccount !== null}
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
    >
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>IMAP-Konto bearbeiten</DialogTitle>
        </DialogHeader>
        <div className="space-y-4">
          <div className="space-y-1">
            <Label>Name</Label>
            <Input
              value={editName}
              onChange={(e) => setEditName(e.target.value)}
              placeholder="z.B. Firmen-Mail"
            />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div className="space-y-1">
              <Label>Host</Label>
              <Input
                value={editHost}
                onChange={(e) => setEditHost(e.target.value)}
                placeholder="imap.example.com"
              />
            </div>
            <div className="space-y-1">
              <Label>Port</Label>
              <Input
                value={editPort}
                onChange={(e) => setEditPort(e.target.value)}
                type="number"
              />
            </div>
          </div>
          <div className="space-y-1">
            <Label>TLS</Label>
            <Select value={editTls} onValueChange={setEditTls}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="ssl">SSL/TLS</SelectItem>
                <SelectItem value="starttls">STARTTLS</SelectItem>
                <SelectItem value="none">Keine</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1">
            <Label>Benutzername</Label>
            <Input
              value={editUsername}
              onChange={(e) => setEditUsername(e.target.value)}
              placeholder="user@example.com"
            />
          </div>
          <div className="space-y-1">
            <Label>
              Passwort{" "}
              <span className="text-muted-foreground text-xs">
                (leer lassen = unveraendert)
              </span>
            </Label>
            <Input
              value={editPassword}
              onChange={(e) => setEditPassword(e.target.value)}
              type="password"
              placeholder="Neues Passwort eingeben"
            />
          </div>
          {editError && <p className="text-sm text-destructive">{editError}</p>}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Abbrechen
          </Button>
          <Button onClick={onSave} disabled={editSaving}>
            {editSaving ? "Speichert..." : "Speichern"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
