"use client";

import { useState } from "react";

import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { ContactProtectionFormValues } from "@/lib/contact-protection";

type ContactProtectionFormProps = {
  action: (formData: FormData) => Promise<void>;
  initialSettings: ContactProtectionFormValues;
};

export function ContactProtectionForm({
  action,
  initialSettings,
}: ContactProtectionFormProps) {
  const [turnstileEnabled, setTurnstileEnabled] = useState(initialSettings.turnstile.enabled);
  const [rateLimitEnabled, setRateLimitEnabled] = useState(initialSettings.rateLimit.enabled);

  return (
    <form id="contact-protection-form" action={action} className="grid gap-6 xl:grid-cols-2">
      <AppCard>
        <CardHeader>
          <CardTitle>Turnstile</CardTitle>
          <CardDescription>Cloudflare Schutz fuer das Kontaktformular.</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-5 p-4 md:grid-cols-2">
          <div className="space-y-4 md:col-span-2">
            <label
              htmlFor="turnstileEnabled"
              className="flex cursor-pointer items-start gap-3 rounded-nested border border-input bg-card px-4 py-4 transition-colors hover:bg-accent/20"
            >
              <Checkbox
                id="turnstileEnabled"
                name="turnstileEnabled"
                checked={turnstileEnabled}
                onCheckedChange={(checked) => setTurnstileEnabled(checked === true)}
                className="mt-0.5"
              />
              <span className="space-y-1">
                <span className="block text-sm font-medium text-foreground">Enable Turnstile</span>
                <span className="block text-xs text-muted-foreground">
                  {turnstileEnabled
                    ? "ON: Besucher muessen die Pruefung bestehen."
                    : "OFF: Kein Turnstile Schutz im Formular."}
                </span>
              </span>
            </label>
          </div>

          <div className="space-y-2">
            <Label htmlFor="turnstileSiteKey">Turnstile Site Key</Label>
            <Input
              id="turnstileSiteKey"
              name="turnstileSiteKey"
              defaultValue={initialSettings.turnstile.siteKey}
              autoComplete="off"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="turnstileSecretKey">Turnstile Secret Key</Label>
            <Input
              id="turnstileSecretKey"
              name="turnstileSecretKey"
              type="password"
              defaultValue={initialSettings.turnstile.secretKey}
              placeholder={initialSettings.turnstile.hasSecretKey ? "Saved secret key will be kept" : "Secret key"}
              autoComplete="new-password"
            />
          </div>
        </CardContent>
      </AppCard>

      <AppCard>
        <CardHeader>
          <CardTitle>Rate Limiting</CardTitle>
          <CardDescription>Begrenzung wiederholter Kontaktanfragen.</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-5 p-4 md:grid-cols-2">
          <div className="space-y-4 md:col-span-2">
            <label
              htmlFor="contactRateLimitEnabled"
              className="flex cursor-pointer items-start gap-3 rounded-nested border border-input bg-card px-4 py-4 transition-colors hover:bg-accent/20"
            >
              <Checkbox
                id="contactRateLimitEnabled"
                name="contactRateLimitEnabled"
                checked={rateLimitEnabled}
                onCheckedChange={(checked) => setRateLimitEnabled(checked === true)}
                className="mt-0.5"
              />
              <span className="space-y-1">
                <span className="block text-sm font-medium text-foreground">Enable rate limiting</span>
                <span className="block text-xs text-muted-foreground">
                  {rateLimitEnabled
                    ? "ON: Das Formular blockiert zu viele Anfragen pro Zeitfenster."
                    : "OFF: Keine serverseitige Begrenzung aktiv."}
                </span>
              </span>
            </label>
          </div>

          <div className="space-y-2">
            <Label htmlFor="contactRateLimitMaxRequests">Max Requests</Label>
            <Input
              id="contactRateLimitMaxRequests"
              name="contactRateLimitMaxRequests"
              type="number"
              min="1"
              defaultValue={initialSettings.rateLimit.maxRequests}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="contactRateLimitWindowMinutes">Window Minutes</Label>
            <Input
              id="contactRateLimitWindowMinutes"
              name="contactRateLimitWindowMinutes"
              type="number"
              min="1"
              defaultValue={initialSettings.rateLimit.windowMinutes}
            />
          </div>
        </CardContent>
      </AppCard>
      <div className="xl:col-span-2 flex justify-end">
        <Button type="submit">Save Protection</Button>
      </div>
    </form>
  );
}