"use client";

import { useState } from "react";
import useSWR from "swr";
import { toast } from "sonner";
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  SortingState,
  useReactTable,
} from "@tanstack/react-table";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import AdminAboutService from "@/services/admin.about.service";
import type { AboutContent } from "@/services/about.service";
import {
  Plus,
  Save,
  MoreHorizontal,
  Edit,
  Trash,
  ChevronLeft,
  ChevronRight,
  Loader2,
  Building2,
  Stethoscope,
} from "lucide-react";

interface AboutItemFormData {
  groupType: 'POLI' | 'PROGRAM';
  title: string;
  description: string;
  color: string;
  order: number;
}

const defaultColors = [
  "#3b82f6", "#10b981", "#f59e0b", "#ef4444",
  "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"
];

const AboutAdminPage = () => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isItemSubmitting, setIsItemSubmitting] = useState(false);
  const [editingItem, setEditingItem] = useState<AboutContent['items'][0] | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<AboutContent['items'][0] | null>(null);

  const { data: aboutData, isLoading, mutate } = useSWR<AboutContent>(
    "/admin/about",
    () => AdminAboutService.getAdminContent()
  );

  const [pageForm, setPageForm] = useState({
    bannerTitle: "",
    bannerButtonLabel: "",
    aboutTitle: "",
    aboutDescriptionPrimary: "",
    aboutDescriptionSecondary: "",
    aboutImageUrl: "",
    aboutQuote: "",
    storyTitle: "",
    storyDescriptionPrimary: "",
    storyDescriptionSecondary: "",
    storyImagePrimaryUrl: "",
    storyImageSecondaryUrl: "",
    serviceSectionTitle: "",
  });

  const [itemForm, setItemForm] = useState<AboutItemFormData>({
    groupType: 'POLI',
    title: "",
    description: "",
    color: "#3b82f6",
    order: 0,
  });

  // Update form when data loads
  useState(() => {
    if (aboutData?.pageContent) {
      setPageForm({
        bannerTitle: aboutData.pageContent.bannerTitle || "",
        bannerButtonLabel: aboutData.pageContent.bannerButtonLabel || "",
        aboutTitle: aboutData.pageContent.aboutTitle || "",
        aboutDescriptionPrimary: aboutData.pageContent.aboutDescriptionPrimary || "",
        aboutDescriptionSecondary: aboutData.pageContent.aboutDescriptionSecondary || "",
        aboutImageUrl: aboutData.pageContent.aboutImageUrl || "",
        aboutQuote: aboutData.pageContent.aboutQuote || "",
        storyTitle: aboutData.pageContent.storyTitle || "",
        storyDescriptionPrimary: aboutData.pageContent.storyDescriptionPrimary || "",
        storyDescriptionSecondary: aboutData.pageContent.storyDescriptionSecondary || "",
        storyImagePrimaryUrl: aboutData.pageContent.storyImagePrimaryUrl || "",
        storyImageSecondaryUrl: aboutData.pageContent.storyImageSecondaryUrl || "",
        serviceSectionTitle: aboutData.pageContent.serviceSectionTitle || "",
      });
    }
  });

  const handleSavePage = async () => {
    setIsSubmitting(true);
    try {
      await AdminAboutService.updatePage(pageForm);
      toast.success("Halaman About berhasil diperbarui");
      mutate();
    } catch (error) {
      toast.error("Gagal memperbarui halaman");
    } finally {
      setIsSubmitting(false);
    }
  };

  const resetItemForm = () => {
    setItemForm({
      groupType: 'POLI',
      title: "",
      description: "",
      color: "#3b82f6",
      order: aboutData?.items?.length || 0,
    });
    setEditingItem(null);
  };

  const openCreateDialog = () => {
    resetItemForm();
    setIsDialogOpen(true);
  };

  const openEditDialog = (item: AboutContent['items'][0]) => {
    setEditingItem(item);
    setItemForm({
      groupType: item.groupType,
      title: item.title,
      description: item.description,
      color: item.color || "#3b82f6",
      order: item.order,
    });
    setIsDialogOpen(true);
  };

  const handleItemSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsItemSubmitting(true);

    try {
      if (editingItem) {
        await AdminAboutService.updateItem(editingItem.id, itemForm);
        toast.success("Item berhasil diperbarui");
      } else {
        await AdminAboutService.createItem(itemForm);
        toast.success("Item berhasil ditambahkan");
      }
      mutate();
      setIsDialogOpen(false);
      resetItemForm();
    } catch (error) {
      toast.error(editingItem ? "Gagal memperbarui item" : "Gagal menambahkan item");
    } finally {
      setIsItemSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!itemToDelete) return;

    try {
      await AdminAboutService.deleteItem(itemToDelete.id);
      toast.success("Item berhasil dihapus");
      mutate();
    } catch (error) {
      toast.error("Gagal menghapus item");
    } finally {
      setDeleteDialogOpen(false);
      setItemToDelete(null);
    }
  };

  const itemColumns: ColumnDef<AboutContent['items'][0]>[] = [
    {
      accessorKey: "title",
      header: "Judul",
      cell: ({ row }) => (
        <div className="flex items-center gap-3">
          <div
            className="h-8 w-8 rounded-full flex items-center justify-center"
            style={{ backgroundColor: row.original.color || "#3b82f6" }}
          >
            {row.original.groupType === 'POLI' ? (
              <Stethoscope className="h-4 w-4 text-white" />
            ) : (
              <Building2 className="h-4 w-4 text-white" />
            )}
          </div>
          <div>
            <p className="font-medium">{row.original.title}</p>
            <p className="text-xs text-slate-500">{row.original.groupType}</p>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "description",
      header: "Deskripsi",
      cell: ({ row }) => (
        <p className="text-sm text-slate-600 truncate max-w-xs">
          {row.original.description}
        </p>
      ),
    },
    {
      accessorKey: "order",
      header: "Urutan",
      cell: ({ row }) => (
        <span className="text-sm font-medium">{row.original.order}</span>
      ),
    },
    {
      id: "actions",
      header: "Aksi",
      cell: ({ row }) => (
        <DropdownMenu>
          <DropdownMenuTrigger>
            <Button variant="ghost" size="icon">
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => openEditDialog(row.original)}>
              <Edit className="h-4 w-4 mr-2" />
              Edit
            </DropdownMenuItem>
            <DropdownMenuItem
              className="text-red-600"
              onClick={() => {
                setItemToDelete(row.original);
                setDeleteDialogOpen(true);
              }}
            >
              <Trash className="h-4 w-4 mr-2" />
              Hapus
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  const itemTable = useReactTable({
    data: aboutData?.items || [],
    columns: itemColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Kelola Halaman About</h1>
          <p className="text-slate-500">Edit konten halaman tentang kami</p>
        </div>
        <Button onClick={handleSavePage} disabled={isSubmitting}>
          {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
          <Save className="h-4 w-4 mr-2" />
          Simpan Perubahan
        </Button>
      </div>

      <Tabs defaultValue="banner" className="space-y-4">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="banner">Banner</TabsTrigger>
          <TabsTrigger value="about">Tentang</TabsTrigger>
          <TabsTrigger value="story">Cerita</TabsTrigger>
          <TabsTrigger value="items">Items ({aboutData?.items?.length || 0})</TabsTrigger>
        </TabsList>

        {/* Banner Tab */}
        <TabsContent value="banner" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Banner Section</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Judul Banner</Label>
                <Input
                  value={pageForm.bannerTitle}
                  onChange={(e) => setPageForm({ ...pageForm, bannerTitle: e.target.value })}
                  placeholder="Tentang Klinik Adera"
                />
              </div>
              <div className="space-y-2">
                <Label>Label Tombol</Label>
                <Input
                  value={pageForm.bannerButtonLabel}
                  onChange={(e) => setPageForm({ ...pageForm, bannerButtonLabel: e.target.value })}
                  placeholder="Pelajari Lebih Lanjut"
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* About Tab */}
        <TabsContent value="about" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Section Tentang</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Judul</Label>
                <Input
                  value={pageForm.aboutTitle}
                  onChange={(e) => setPageForm({ ...pageForm, aboutTitle: e.target.value })}
                  placeholder="Tentang Kami"
                />
              </div>
              <div className="space-y-2">
                <Label>Deskripsi Utama</Label>
                <Textarea
                  value={pageForm.aboutDescriptionPrimary}
                  onChange={(e) => setPageForm({ ...pageForm, aboutDescriptionPrimary: e.target.value })}
                  placeholder="Deskripsi utama tentang klinik..."
                  rows={4}
                />
              </div>
              <div className="space-y-2">
                <Label>Deskripsi Sekunder</Label>
                <Textarea
                  value={pageForm.aboutDescriptionSecondary}
                  onChange={(e) => setPageForm({ ...pageForm, aboutDescriptionSecondary: e.target.value })}
                  placeholder="Deskripsi tambahan..."
                  rows={3}
                />
              </div>
              <div className="space-y-2">
                <Label>URL Gambar</Label>
                <Input
                  value={pageForm.aboutImageUrl}
                  onChange={(e) => setPageForm({ ...pageForm, aboutImageUrl: e.target.value })}
                  placeholder="https://example.com/image.jpg"
                />
              </div>
              <div className="space-y-2">
                <Label>Quote</Label>
                <Textarea
                  value={pageForm.aboutQuote}
                  onChange={(e) => setPageForm({ ...pageForm, aboutQuote: e.target.value })}
                  placeholder="Quote atau motto klinik..."
                  rows={2}
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Story Tab */}
        <TabsContent value="story" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Section Cerita</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Judul</Label>
                <Input
                  value={pageForm.storyTitle}
                  onChange={(e) => setPageForm({ ...pageForm, storyTitle: e.target.value })}
                  placeholder="Perjalanan Kami"
                />
              </div>
              <div className="space-y-2">
                <Label>Deskripsi Utama</Label>
                <Textarea
                  value={pageForm.storyDescriptionPrimary}
                  onChange={(e) => setPageForm({ ...pageForm, storyDescriptionPrimary: e.target.value })}
                  placeholder="Cerita utama..."
                  rows={4}
                />
              </div>
              <div className="space-y-2">
                <Label>Deskripsi Sekunder</Label>
                <Textarea
                  value={pageForm.storyDescriptionSecondary}
                  onChange={(e) => setPageForm({ ...pageForm, storyDescriptionSecondary: e.target.value })}
                  placeholder="Cerita tambahan..."
                  rows={3}
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>URL Gambar Primary</Label>
                  <Input
                    value={pageForm.storyImagePrimaryUrl}
                    onChange={(e) => setPageForm({ ...pageForm, storyImagePrimaryUrl: e.target.value })}
                    placeholder="URL gambar..."
                  />
                </div>
                <div className="space-y-2">
                  <Label>URL Gambar Secondary</Label>
                  <Input
                    value={pageForm.storyImageSecondaryUrl}
                    onChange={(e) => setPageForm({ ...pageForm, storyImageSecondaryUrl: e.target.value })}
                    placeholder="URL gambar..."
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Items Tab */}
        <TabsContent value="items" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Items (Poli & Program)</CardTitle>
              <Button onClick={openCreateDialog} size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Tambah Item
              </Button>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    {itemTable.getHeaderGroups().map((headerGroup) => (
                      <TableRow key={headerGroup.id}>
                        {headerGroup.headers.map((header) => (
                          <TableHead key={header.id}>
                            {header.isPlaceholder
                              ? null
                              : flexRender(header.column.columnDef.header, header.getContext())}
                          </TableHead>
                        ))}
                      </TableRow>
                    ))}
                  </TableHeader>
                  <TableBody>
                    {itemTable.getRowModel().rows?.length ? (
                      itemTable.getRowModel().rows.map((row) => (
                        <TableRow key={row.id}>
                          {row.getVisibleCells().map((cell) => (
                            <TableCell key={cell.id}>
                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
                            </TableCell>
                          ))}
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={itemColumns.length} className="h-24 text-center">
                          Tidak ada data item.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>

              {/* Pagination */}
              <div className="flex items-center justify-between mt-4">
                <p className="text-sm text-slate-500">
                  Halaman {itemTable.getState().pagination.pageIndex + 1} dari {itemTable.getPageCount()}
                </p>
                <div className="flex items-center gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => itemTable.previousPage()}
                    disabled={!itemTable.getCanPreviousPage()}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => itemTable.nextPage()}
                    disabled={!itemTable.getCanNextPage()}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Item Dialog */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>{editingItem ? "Edit Item" : "Tambah Item"}</DialogTitle>
          </DialogHeader>
          <form onSubmit={handleItemSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label>Tipe Group *</Label>
              <Select
                value={itemForm.groupType}
                onValueChange={(value) => {
                  if (value) setItemForm({ ...itemForm, groupType: value as 'POLI' | 'PROGRAM' });
                }}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="POLI">POLI</SelectItem>
                  <SelectItem value="PROGRAM">PROGRAM</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Judul *</Label>
              <Input
                value={itemForm.title}
                onChange={(e) => setItemForm({ ...itemForm, title: e.target.value })}
                placeholder="Nama poli atau program"
                required
              />
            </div>
            <div className="space-y-2">
              <Label>Deskripsi *</Label>
              <Textarea
                value={itemForm.description}
                onChange={(e) => setItemForm({ ...itemForm, description: e.target.value })}
                placeholder="Deskripsi singkat"
                required
                rows={3}
              />
            </div>
            <div className="space-y-2">
              <Label>Warna</Label>
              <div className="flex flex-wrap gap-2">
                {defaultColors.map((color) => (
                  <button
                    key={color}
                    type="button"
                    onClick={() => setItemForm({ ...itemForm, color })}
                    className={`w-8 h-8 rounded-full border-2 transition-all ${
                      itemForm.color === color ? "border-slate-900 scale-110" : "border-transparent"
                    }`}
                    style={{ backgroundColor: color }}
                  />
                ))}
              </div>
            </div>
            <div className="space-y-2">
              <Label>Urutan</Label>
              <Input
                type="number"
                value={itemForm.order}
                onChange={(e) => setItemForm({ ...itemForm, order: parseInt(e.target.value) || 0 })}
                min={0}
              />
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                Batal
              </Button>
              <Button type="submit" disabled={isItemSubmitting}>
                {isItemSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {editingItem ? "Simpan" : "Tambah"}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Delete Dialog */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Hapus Item</AlertDialogTitle>
            <AlertDialogDescription>
              Yakin ingin menghapus "{itemToDelete?.title}"?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Batal</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-600">
              Hapus
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default AboutAdminPage;