"use client";

import React, { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { updateForm } from "@/app/admin/form/actions";
import { Loader2, Save } from "lucide-react";

interface FormExtraClientProps {
  form: {
    id: string;
    discordWebhookUrl: string | null;
    discordWebhookTemplate: string | null;
    discordWebhookUpdateTemplate: string | null;
  };
}

export default function FormExtraClient({ form }: FormExtraClientProps) {
  const router = useRouter();
  const [webhookUrl, setWebhookUrl] = useState(form.discordWebhookUrl || "");
  const [webhookTemplate, setWebhookTemplate] = useState(form.discordWebhookTemplate || "");
  const [webhookUpdateTemplate, setWebhookUpdateTemplate] = useState(form.discordWebhookUpdateTemplate || "");
  const [isSaving, startSaveTransition] = useTransition();

  const handleSave = () => {
    startSaveTransition(async () => {
      try {
        await updateForm(form.id, {
          discordWebhookUrl: webhookUrl.trim() || null,
          discordWebhookTemplate: webhookTemplate.trim() || null,
          discordWebhookUpdateTemplate: webhookUpdateTemplate.trim() || null,
        });
        toast.success("Extra settings saved!");
        router.refresh();
      } catch (err: any) {
        toast.error(err.message || "Failed to update settings.");
      }
    });
  };

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Discord Webhook</CardTitle>
          <CardDescription>
            Send notifications to a Discord channel when a new submission is received.
            Leave URL empty to disable.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="webhook-url">Webhook URL</Label>
            <Input
              id="webhook-url"
              value={webhookUrl}
              onChange={(e) => setWebhookUrl(e.target.value)}
              placeholder="https://discord.com/api/webhooks/..."
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="webhook-template">New Submission Template</Label>
            <Textarea
              id="webhook-template"
              value={webhookTemplate}
              onChange={(e) => setWebhookTemplate(e.target.value)}
              placeholder="New submission received from {Name} for skill: {skill}!"
              className="min-h-24"
            />
            <p className="text-sm text-muted-foreground">
              Use <code>{`{1}`}</code>, <code>{`{2}`}</code> to insert answers according to question order, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
            </p>
          </div>
          <div className="space-y-2">
            <Label htmlFor="webhook-update-template">Update Submission Template</Label>
            <Textarea
              id="webhook-update-template"
              value={webhookUpdateTemplate}
              onChange={(e) => setWebhookUpdateTemplate(e.target.value)}
              placeholder="Submission updated by {Name} for skill: {skill}!"
              className="min-h-24"
            />
            <p className="text-sm text-muted-foreground">
              Used when a user updates their existing submission. Use <code>{`{1}`}</code>, <code>{`{2}`}</code> for answers, and <code>{`{username}`}</code>, <code>{`{displayname}`}</code>, <code>{`{id}`}</code> for user info.
            </p>
          </div>
          <div className="flex justify-end pt-2">
            <Button onClick={handleSave} disabled={isSaving} className="gap-2">
              {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
              Save Settings
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}