"use client";
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Label } from "@/components/ui/label";
import { Edit, Save, AlertTriangle, CircleDashed } from "lucide-react";
import {
  useGetPolicyQuery,
  useGetTermsQuery,
  useUpdatePolicyMutation,
  useUpdateTermMutation,
} from "@/redux/services/documents.api";
import { toast } from "@/components/ui/use-toast";

export default function TermsAndConditionsManagement() {
  const { data, isLoading, error } = useGetTermsQuery();
  const [updatePolicyMutation, { isLoading: updateLoading }] =
    useUpdateTermMutation();
  const [privacyPolicy, setPrivacyPolicy] = useState(data?.content);

  const [editedPolicy, setEditedPolicy] = useState(privacyPolicy);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);

  const handleSavePolicy = () => {
    setPrivacyPolicy(editedPolicy);
    updatePolicyMutation({ content: editedPolicy!, type: "terms" })
      .unwrap()
      .then((res: any) => {
        if (res.status) {
          return toast({
            title: res.message,
            variant: "success",
          });
        }
        return toast({
          title: res.message,
          variant: "destructive",
        });
      })
      .catch((err: any) =>
        toast({
          title: "Error",
        })
      );
    setIsEditDialogOpen(false);
  };

  return (
    <div className="container mx-auto p-4">
      {/* <h1 className="text-3xl font-bold mb-6">Terms And Condition</h1> */}

      <Card>
        <CardHeader>
          <CardTitle>Terms And Condition</CardTitle>
          <CardDescription>
            View and edit the current Terms And Condition
          </CardDescription>
        </CardHeader>
        <CardContent>
          <ScrollArea className="h-[60vh] w-full rounded-md border p-4 mb-4">
            {(isLoading || updateLoading) && (
              <div className="flex justify-center  h-[55vh] items-center ">
                <CircleDashed className="animate-spin text-[#be063f]" />
              </div>
            )}
            <pre className="whitespace-pre-wrap font-sans">{data?.content}</pre>
          </ScrollArea>
          <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
            <DialogTrigger asChild>
              <Button variant={"appVariant"}>
                <Edit className="mr-2 h-4 w-4" />
                Edit Terms And Condition
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-[90vw] w-full max-h-[90vh]">
              <DialogHeader>
                <DialogTitle>Edit Terms And Condition</DialogTitle>
                <DialogDescription>
                  Make your changes to the Terms And Condition below. Click save
                  when you{"'"}re done.
                </DialogDescription>
              </DialogHeader>
              <div className="mt-4">
                <Label htmlFor="policy-editor">Terms And Condition</Label>

                <Textarea
                  id="policy-editor"
                  defaultValue={data?.content}
                  onChange={(e) => setEditedPolicy(e.target.value)}
                  className="h-[50vh] font-mono"
                />
              </div>
              <DialogFooter>
                <Button variant={"appVariant"} onClick={handleSavePolicy}>
                  <Save className="mr-2 h-4 w-4" />
                  Save Changes
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </CardContent>
        <CardFooter>
          <p className="text-sm text-gray-500">
            Last updated: {new Date().toLocaleDateString()}
          </p>
        </CardFooter>
      </Card>
    </div>
  );
}