"use client";

import { useMemo, useState } from "react";
import {
  useCreateTag,
  useDeleteTag,
  useTags,
  useUpdateTag,
} from "@/hooks/use-tags";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import type { TagDto } from "@/services/tags";

export default function InAppContentPage() {
  const { data, isLoading, isError } = useTags();
  const createTag = useCreateTag();
  const updateTag = useUpdateTag();
  const deleteTag = useDeleteTag();

  const [newTag, setNewTag] = useState("");
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editingName, setEditingName] = useState("");

  const tags = useMemo(() => (data?.data?.tags ?? []) as TagDto[], [data]);

  const handleCreate = async () => {
    const name = newTag.trim();
    if (!name) return;
    await createTag.mutateAsync(name);
    setNewTag("");
  };

  const startEdit = (id: string, currentName: string) => {
    setEditingId(id);
    setEditingName(currentName);
  };

  const handleUpdate = async () => {
    if (!editingId) return;
    const name = editingName.trim();
    if (!name) return;
    await updateTag.mutateAsync({ id: editingId, name });
    setEditingId(null);
    setEditingName("");
  };

  const handleDelete = async (id: string) => {
    await deleteTag.mutateAsync(id);
  };

  return (
    <div className="p-6 space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-xl font-semibold">In-App Content • Tags</h1>
        {/* <Button onClick={() => refetch()}>Refresh</Button> */}
      </div>
      <Card className="card-gradient">
        <CardHeader>
          <CardTitle>Create new tag</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex gap-2 max-w-md">
            <Input
              placeholder="Enter tag name"
              value={newTag}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                setNewTag(e.target.value)
              }
              disabled={createTag.isPending}
            />
            <Button
              onClick={handleCreate}
              disabled={!newTag.trim() || createTag.isPending}
              className="gradient-button"
            >
              Add
            </Button>
          </div>
        </CardContent>
      </Card>

      <Separator />

      <Card className="card-gradient">
        <CardHeader>
          <CardTitle>All tags</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <div className="text-sm text-muted-foreground">Loading tags...</div>
          ) : isError ? (
            <div className="text-sm text-destructive">Failed to load tags</div>
          ) : tags.length === 0 ? (
            <div className="text-sm text-muted-foreground">No tags found</div>
          ) : (
            <ul className="divide-y">
              {tags.map((t: TagDto) => (
                <li
                  key={t._id}
                  className="flex items-center justify-between py-3"
                >
                  <div className="flex items-center gap-4">
                    <Badge variant="outline" className="gradient-badge">
                      {t.tag}
                    </Badge>
                    <span className="text-xs text-muted-foreground">
                      Used {t.usedCount} times
                    </span>
                    <span className="text-xs text-muted-foreground">
                      {new Date(t.createdAt).toLocaleString()}
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Dialog
                      open={editingId === t._id}
                      onOpenChange={(open: boolean) => {
                        if (!open) setEditingId(null);
                      }}
                    >
                      <DialogTrigger asChild>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => startEdit(t._id, t.tag)}
                          className="gradient-button"
                        >
                          Edit
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Edit tag</DialogTitle>
                        </DialogHeader>
                        <Input
                          value={editingName}
                          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                            setEditingName(e.target.value)
                          }
                        />
                        <DialogFooter>
                          <Button
                            variant="ghost"
                            onClick={() => setEditingId(null)}
                          >
                            Cancel
                          </Button>
                          <Button
                            onClick={handleUpdate}
                            disabled={
                              !editingName.trim() || updateTag.isPending
                            }
                            className="gradient-button"
                          >
                            Save
                          </Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                    <Button
                      variant="destructive"
                      size="sm"
                      onClick={() => handleDelete(t._id)}
                      disabled={deleteTag.isPending}
                    >
                      Delete
                    </Button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  );
}