"use client";

import { useAuth } from "@/hooks/useAuth";
import { useImapAccounts } from "@/hooks/useImapAccounts";
import { Navbar } from "@/components/navbar";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { ImapAccountCard } from "@/components/imap/ImapAccountCard";
import { ImapAccountDialog } from "@/components/imap/ImapAccountDialog";
import { ImapEditDialog } from "@/components/imap/ImapEditDialog";
import { ImapDeleteDialog } from "@/components/imap/ImapDeleteDialog";

export default function ImapPage() {
  const { user, loading: authLoading } = useAuth();
  const imap = useImapAccounts(user);

  return (
    <div className="min-h-screen">
      <Navbar username={user?.username ?? ""} role={user?.role ?? ""} />
      <main className="mx-auto max-w-4xl px-4 py-6">
        {authLoading || !user ? (
          <div className="space-y-4">
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-64 w-full" />
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between mb-6">
              <h1 className="text-2xl font-bold">IMAP Import</h1>
              <Button
                onClick={() => {
                  imap.resetForm();
                  imap.setDialogOpen(true);
                }}
              >
                Konto hinzufuegen
              </Button>
            </div>

            {imap.importError && (
              <p className="mb-4 text-sm text-destructive" role="alert">
                {imap.importError}
              </p>
            )}

            {imap.loading ? (
              <div className="space-y-4">
                {[1, 2].map((i) => (
                  <Skeleton key={i} className="h-32 w-full" />
                ))}
              </div>
            ) : imap.accounts.length === 0 ? (
              <Card>
                <CardContent className="p-8 text-center text-muted-foreground">
                  Noch keine IMAP-Konten konfiguriert. Klicken Sie auf &quot;Konto
                  hinzufuegen&quot;, um zu beginnen.
                </CardContent>
              </Card>
            ) : (
              <div className="space-y-4">
                {imap.accounts.map((acc) => (
                  <ImapAccountCard
                    key={acc.id}
                    acc={acc}
                    onStartImport={imap.handleStartImport}
                    onSyncNow={imap.handleSyncNow}
                    onEdit={imap.openEdit}
                    onDelete={imap.setDeleteConfirm}
                    onIntervalChange={imap.handleIntervalChange}
                  />
                ))}
              </div>
            )}

            <ImapAccountDialog
              open={imap.dialogOpen}
              onOpenChange={imap.setDialogOpen}
              formName={imap.formName}
              setFormName={imap.setFormName}
              formHost={imap.formHost}
              setFormHost={imap.setFormHost}
              formPort={imap.formPort}
              setFormPort={imap.setFormPort}
              formTls={imap.formTls}
              setFormTls={imap.setFormTls}
              formUsername={imap.formUsername}
              setFormUsername={imap.setFormUsername}
              formPassword={imap.formPassword}
              setFormPassword={imap.setFormPassword}
              testing={imap.testing}
              testError={imap.testError}
              testFolders={imap.testFolders}
              excludedFolders={imap.excludedFolders}
              saving={imap.saving}
              onTest={imap.handleTest}
              onSave={imap.handleSave}
              onCancel={() => {
                imap.setDialogOpen(false);
                imap.resetForm();
              }}
              onToggleExcluded={imap.toggleExcluded}
            />

            <ImapEditDialog
              editAccount={imap.editAccount}
              onClose={() => imap.setEditAccount(null)}
              editName={imap.editName}
              setEditName={imap.setEditName}
              editHost={imap.editHost}
              setEditHost={imap.setEditHost}
              editPort={imap.editPort}
              setEditPort={imap.setEditPort}
              editTls={imap.editTls}
              setEditTls={imap.setEditTls}
              editUsername={imap.editUsername}
              setEditUsername={imap.setEditUsername}
              editPassword={imap.editPassword}
              setEditPassword={imap.setEditPassword}
              editSaving={imap.editSaving}
              editError={imap.editError}
              onSave={imap.handleEditSave}
            />

            <ImapDeleteDialog
              deleteConfirm={imap.deleteConfirm}
              onCancel={() => imap.setDeleteConfirm(null)}
              onConfirm={imap.handleDelete}
            />
          </>
        )}
      </main>
    </div>
  );
}
