"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { CategoryModal, ConfirmDialog, TableSkeleton } from "@/components/shared";
import { Plus, Pencil, Trash2 } from "lucide-react";
import { toast } from "sonner";
import api from "@/lib/api";
import type { PropertyCategory } from "@/lib/types";

export default function PropertyCategoriesPage() {
  const [categories, setCategories] = useState<PropertyCategory[]>([]);
  const [loading, setLoading] = useState(true);
  const [modalOpen, setModalOpen] = useState(false);
  const [editTarget, setEditTarget] = useState<PropertyCategory | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<PropertyCategory | null>(null);
  const [page, setPage] = useState(1);
  const perPage = 10;

  const fetchCategories = async () => {
    try {
      const { data } = await api.get("/api/properties/categories");
      setCategories(data.data);
    } catch {
      toast.error("Failed to load categories");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchCategories();
  }, []);

  const handleSubmit = async (formData: { name: string; description: string; icon?: string; sort_order?: number; is_active?: boolean }) => {
    try {
      if (editTarget) {
        await api.put(`/api/properties/categories/${editTarget.id}`, formData);
        toast.success("Category updated");
      } else {
        await api.post("/api/properties/categories", formData);
        toast.success("Category created");
      }
      setEditTarget(null);
      fetchCategories();
    } catch {
      toast.error("Failed to save category");
      throw new Error("Failed");
    }
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    try {
      await api.delete(`/api/properties/categories/${deleteTarget.id}`);
      toast.success("Category deleted");
      fetchCategories();
    } catch {
      toast.error("Failed to delete category");
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="font-display text-2xl font-semibold">Property Categories</h1>
          <p className="text-sm text-muted-foreground">Organize property listings by type</p>
        </div>
        <Button onClick={() => { setEditTarget(null); setModalOpen(true); }}>
          <Plus className="mr-2 h-4 w-4" /> Add Category
        </Button>
      </div>

      <Card>
        <CardContent className="p-4">
          {loading ? (
            <TableSkeleton columns={4} rows={5} />
          ) : (
            <div className="overflow-x-auto rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead className="hidden sm:table-cell">Description</TableHead>
                    <TableHead>Properties</TableHead>
                    <TableHead className="w-[100px]">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {categories.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={4} className="py-8 text-center text-muted-foreground">
                        No categories found
                      </TableCell>
                    </TableRow>
                  )}
                  {categories.slice((page - 1) * perPage, page * perPage).map((cat) => (
                    <TableRow key={cat.id}>
                      <TableCell className="font-medium">{cat.name}</TableCell>
                      <TableCell className="hidden sm:table-cell text-muted-foreground">
                        {cat.description || "—"}
                      </TableCell>
                      <TableCell>{cat.properties_count ?? 0}</TableCell>
                      <TableCell>
                        <div className="flex items-center gap-1">
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0"
                            onClick={() => { setEditTarget(cat); setModalOpen(true); }}
                          >
                            <Pencil className="h-3.5 w-3.5" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                            onClick={() => setDeleteTarget(cat)}
                          >
                            <Trash2 className="h-3.5 w-3.5" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          )}
          {!loading && categories.length > perPage && (
            <div className="mt-4 flex items-center justify-between">
              <p className="text-sm text-muted-foreground">
                Page {page} of {Math.ceil(categories.length / perPage)} ({categories.length} categories)
              </p>
              <div className="flex gap-2">
                <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
                  Previous
                </Button>
                <Button variant="outline" size="sm" disabled={page >= Math.ceil(categories.length / perPage)} onClick={() => setPage((p) => p + 1)}>
                  Next
                </Button>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

      <CategoryModal
        open={modalOpen}
        onOpenChange={setModalOpen}
        onSubmit={handleSubmit}
        initialData={editTarget ? { name: editTarget.name, description: editTarget.description || "", icon: editTarget.icon || "", sort_order: editTarget.sort_order ?? 0, is_active: editTarget.is_active ?? true } : null}
        title={editTarget ? "Edit Category" : "Add Category"}
        showPropertyFields
      />

      <ConfirmDialog
        open={!!deleteTarget}
        onOpenChange={(open) => !open && setDeleteTarget(null)}
        onConfirm={handleDelete}
        title="Delete Category"
        description={`Delete "${deleteTarget?.name}"? Properties in this category will be affected.`}
      />
    </div>
  );
}