"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Server, Lock, Info } from "lucide-react";
import type { SystemInfo } from "@/lib/api";

interface ImapSectionProps {
  systemInfo: SystemInfo | null;
  systemInfoLoading: boolean;
  username: string;
}

export function ImapSection({
  systemInfo,
  systemInfoLoading,
  username,
}: ImapSectionProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-3">
          <Server className="h-5 w-5" aria-hidden="true" />
          IMAP-Zugang
          <Badge variant="default" className="bg-green-600">
            Verfuegbar
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <p className="text-sm text-muted-foreground">
          Verbinden Sie Ihren Mail-Client (Thunderbird, Outlook, Apple Mail)
          mit folgenden Zugangsdaten:
        </p>

        <div
          className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm"
          role="list"
          aria-label="IMAP-Verbindungsdaten"
        >
          <span className="text-muted-foreground flex items-center gap-1.5">
            <Server className="h-3.5 w-3.5" aria-hidden="true" />
            Server
          </span>
          <span className="font-mono">
            {systemInfoLoading
              ? "Laden..."
              : systemInfo?.fqdn ||
                (typeof window !== "undefined"
                  ? window.location.hostname
                  : "")}
          </span>

          <span className="text-muted-foreground flex items-center gap-1.5">
            <Lock className="h-3.5 w-3.5" aria-hidden="true" />
            IMAP-Port
          </span>
          <span className="font-mono">
            {systemInfo?.imap_port ?? 9993} (SSL/TLS)
          </span>

          <span className="text-muted-foreground flex items-center gap-1.5">
            <Lock className="h-3.5 w-3.5" aria-hidden="true" />
            Alternativ-Port
          </span>
          <span className="font-mono">
            {systemInfo?.imap_port_alt ?? 993} (SSL/TLS)
          </span>

          <span className="text-muted-foreground flex items-center gap-1.5">
            <Lock className="h-3.5 w-3.5" aria-hidden="true" />
            Sicherheit
          </span>
          <span className="font-mono">SSL/TLS</span>

          <span className="text-muted-foreground">Benutzername</span>
          <span className="font-mono">{username}</span>

          <span className="text-muted-foreground">Passwort</span>
          <span className="text-sm italic">Ihr archivmail-Passwort</span>
        </div>

        <div className="flex items-start gap-2 rounded-md border border-yellow-300 bg-yellow-50 px-3 py-2 text-sm text-yellow-800 dark:border-yellow-700 dark:bg-yellow-950 dark:text-yellow-200">
          <Info className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
          <span>
            Der IMAP-Zugang ist schreibgeschuetzt. Loeschen, Verschieben und
            neue Mails einlegen sind nicht moeglich.
          </span>
        </div>
      </CardContent>
    </Card>
  );
}
