"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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import AdminMcuService from "@/services/admin.mcu.service";
import type { MCUContent } from "@/services/mcu.service";
import type { ServiceCard, Advantage, Step } from "@/types/landing-pages.type";
import {
  Plus,
  Save,
  MoreHorizontal,
  Edit,
  Trash,
  Loader2,
  HeartPulse,
  List,
  Star,
  Footprints,
} from "lucide-react";

interface HeroFormData {
  title: string;
  subtitle: string;
  imageUrl: string;
  primaryCtaLabel: string;
  primaryCtaUrl: string;
  secondaryCtaLabel: string;
  secondaryCtaUrl: string;
}

interface PageContentFormData {
  serviceSectionTitle: string;
  serviceSectionSubtitle: string;
  advantageSectionTitle: string;
  advantageSectionSubtitle: string;
  advantageImagePrimaryUrl: string;
  advantageImageSecondaryUrl: string;
  advantageStatValue: string;
  advantageStatLabel: string;
  flowSectionTitle: string;
  flowSectionSubtitle: string;
  flowImageUrl: string;
  testimonialSectionTitle: string;
  testimonialSectionSubtitle: string;
}

interface ServiceCardFormData {
  title: string;
  description: string;
  items: string;
  icon: string;
  order: number;
}

interface AdvantageFormData {
  title: string;
  description: string;
  icon: string;
  color: string;
  order: number;
}

interface StepFormData {
  title: string;
  description: string;
  order: number;
}

const McuAdminPage = () => {
  const [activeTab, setActiveTab] = useState("hero");
  const [sorting, setSorting] = useState<SortingState>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState<'serviceCard' | 'advantage' | 'step' | null>(null);
  const [editingItem, setEditingItem] = useState<any>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<any>(null);

  const { data: content, isLoading, mutate } = useSWR<MCUContent>(
    "/admin/mcu",
    () => AdminMcuService.getAdminContent()
  );

  // Hero Form
  const [heroForm, setHeroForm] = useState<HeroFormData>({
    title: "",
    subtitle: "",
    imageUrl: "",
    primaryCtaLabel: "",
    primaryCtaUrl: "",
    secondaryCtaLabel: "",
    secondaryCtaUrl: "",
  });

  // Page Content Form
  const [pageContentForm, setPageContentForm] = useState<PageContentFormData>({
    serviceSectionTitle: "",
    serviceSectionSubtitle: "",
    advantageSectionTitle: "",
    advantageSectionSubtitle: "",
    advantageImagePrimaryUrl: "",
    advantageImageSecondaryUrl: "",
    advantageStatValue: "",
    advantageStatLabel: "",
    flowSectionTitle: "",
    flowSectionSubtitle: "",
    flowImageUrl: "",
    testimonialSectionTitle: "",
    testimonialSectionSubtitle: "",
  });

  // Forms for CRUD
  const [serviceCardForm, setServiceCardForm] = useState<ServiceCardFormData>({
    title: "", description: "", items: "", icon: "", order: 0,
  });
  const [advantageForm, setAdvantageForm] = useState<AdvantageFormData>({
    title: "", description: "", icon: "", color: "", order: 0,
  });
  const [stepForm, setStepForm] = useState<StepFormData>({
    title: "", description: "", order: 0,
  });

  const handleSaveHero = async () => {
    setIsSubmitting(true);
    try {
      await AdminMcuService.updateHero({
        title: heroForm.title,
        subtitle: heroForm.subtitle,
        imageUrl: heroForm.imageUrl,
        primaryCtaLabel: heroForm.primaryCtaLabel,
        primaryCtaUrl: heroForm.primaryCtaUrl,
        secondaryCtaLabel: heroForm.secondaryCtaLabel,
        secondaryCtaUrl: heroForm.secondaryCtaUrl,
      });
      toast.success("Hero berhasil diperbarui");
      mutate();
    } catch (error) {
      toast.error("Gagal memperbarui hero");
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleSavePageContent = async () => {
    setIsSubmitting(true);
    try {
      await AdminMcuService.updatePageContent({
        serviceSectionTitle: pageContentForm.serviceSectionTitle,
        serviceSectionSubtitle: pageContentForm.serviceSectionSubtitle,
        advantageSectionTitle: pageContentForm.advantageSectionTitle,
        advantageSectionSubtitle: pageContentForm.advantageSectionSubtitle,
        advantageImagePrimaryUrl: pageContentForm.advantageImagePrimaryUrl,
        advantageImageSecondaryUrl: pageContentForm.advantageImageSecondaryUrl,
        advantageStatValue: pageContentForm.advantageStatValue,
        advantageStatLabel: pageContentForm.advantageStatLabel,
        flowSectionTitle: pageContentForm.flowSectionTitle,
        flowSectionSubtitle: pageContentForm.flowSectionSubtitle,
        flowImageUrl: pageContentForm.flowImageUrl,
        testimonialSectionTitle: pageContentForm.testimonialSectionTitle,
        testimonialSectionSubtitle: pageContentForm.testimonialSectionSubtitle,
      });
      toast.success("Konten halaman berhasil diperbarui");
      mutate();
    } catch (error) {
      toast.error("Gagal memperbarui konten");
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const openCreateDialog = (type: 'serviceCard' | 'advantage' | 'step') => {
    setDialogType(type);
    setEditingItem(null);
    if (type === 'serviceCard') {
      setServiceCardForm({ 
        title: "", description: "", items: "", icon: "", 
        order: content?.serviceCards?.length || 0 
      });
    } else if (type === 'advantage') {
      setAdvantageForm({ 
        title: "", description: "", icon: "", color: "", 
        order: content?.advantages?.length || 0 
      });
    } else {
      setStepForm({ 
        title: "", description: "", 
        order: content?.steps?.length || 0 
      });
    }
    setIsDialogOpen(true);
  };

  const openEditDialog = (type: 'serviceCard' | 'advantage' | 'step', item: any) => {
    setDialogType(type);
    setEditingItem(item);
    if (type === 'serviceCard') {
      setServiceCardForm({
        title: item.title,
        description: item.description || "",
        items: item.items?.join("\n") || "",
        icon: item.icon || "",
        order: item.order,
      });
    } else if (type === 'advantage') {
      setAdvantageForm({
        title: item.title,
        description: item.description,
        icon: item.icon || "",
        color: item.color || "",
        order: item.order,
      });
    } else {
      setStepForm({
        title: item.title,
        description: item.description,
        order: item.order,
      });
    }
    setIsDialogOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    try {
      if (dialogType === 'serviceCard') {
        const data = { 
          ...serviceCardForm, 
          items: serviceCardForm.items.split("\n").filter(Boolean) 
        };
        if (editingItem) {
          await AdminMcuService.updateServiceCard(editingItem.id, data);
        } else {
          await AdminMcuService.createServiceCard(data);
        }
      } else if (dialogType === 'advantage') {
        if (editingItem) {
          await AdminMcuService.updateAdvantage(editingItem.id, advantageForm);
        } else {
          await AdminMcuService.createAdvantage(advantageForm);
        }
      } else if (dialogType === 'step') {
        if (editingItem) {
          await AdminMcuService.updateStep(editingItem.id, stepForm);
        } else {
          await AdminMcuService.createStep(stepForm);
        }
      }
      
      const typeLabel = dialogType === 'serviceCard' ? 'Layanan' : dialogType === 'advantage' ? 'Keunggulan' : 'Langkah';
      toast.success(`${typeLabel} berhasil ${editingItem ? 'diperbarui' : 'ditambahkan'}`);
      mutate();
      setIsDialogOpen(false);
    } catch (error) {
      toast.error("Gagal menyimpan data");
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!itemToDelete || !dialogType) return;
    try {
      if (dialogType === 'serviceCard') {
        await AdminMcuService.deleteServiceCard(itemToDelete.id);
      } else if (dialogType === 'advantage') {
        await AdminMcuService.deleteAdvantage(itemToDelete.id);
      } else if (dialogType === 'step') {
        await AdminMcuService.deleteStep(itemToDelete.id);
      }
      toast.success("Berhasil dihapus");
      mutate();
    } catch (error) {
      toast.error("Gagal menghapus");
      console.error(error);
    } finally {
      setDeleteDialogOpen(false);
      setItemToDelete(null);
    }
  };

  // Columns for tables
  const serviceCardColumns: ColumnDef<ServiceCard>[] = [
    { accessorKey: "title", header: "Judul", cell: ({ row }) => <span className="font-medium">{row.original.title}</span> },
    { accessorKey: "description", header: "Deskripsi", cell: ({ row }) => <span className="text-sm text-slate-600 truncate max-w-xs">{row.original.description}</span> },
    { accessorKey: "icon", header: "Icon" },
    { accessorKey: "order", header: "Urutan" },
    {
      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('serviceCard', row.original)}>
              <Edit className="h-4 w-4 mr-2" />Edit
            </DropdownMenuItem>
            <DropdownMenuItem 
              className="text-red-600" 
              onClick={() => { setDialogType('serviceCard'); setItemToDelete(row.original); setDeleteDialogOpen(true); }}
            >
              <Trash className="h-4 w-4 mr-2" />Hapus
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  const advantageColumns: ColumnDef<Advantage>[] = [
    { accessorKey: "title", header: "Judul", cell: ({ row }) => <span className="font-medium">{row.original.title}</span> },
    { accessorKey: "description", header: "Deskripsi", cell: ({ row }) => <span className="text-sm text-slate-600 truncate max-w-xs">{row.original.description}</span> },
    { accessorKey: "icon", header: "Icon" },
    { accessorKey: "color", header: "Warna" },
    { accessorKey: "order", header: "Urutan" },
    {
      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('advantage', row.original)}>
              <Edit className="h-4 w-4 mr-2" />Edit
            </DropdownMenuItem>
            <DropdownMenuItem 
              className="text-red-600" 
              onClick={() => { setDialogType('advantage'); setItemToDelete(row.original); setDeleteDialogOpen(true); }}
            >
              <Trash className="h-4 w-4 mr-2" />Hapus
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  const stepColumns: ColumnDef<Step>[] = [
    { accessorKey: "title", header: "Judul", cell: ({ row }) => <span className="font-medium">{row.original.title}</span> },
    { accessorKey: "description", header: "Deskripsi", cell: ({ row }) => <span className="text-sm text-slate-600 truncate max-w-xs">{row.original.description}</span> },
    { accessorKey: "order", header: "Urutan" },
    {
      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('step', row.original)}>
              <Edit className="h-4 w-4 mr-2" />Edit
            </DropdownMenuItem>
            <DropdownMenuItem 
              className="text-red-600" 
              onClick={() => { setDialogType('step'); setItemToDelete(row.original); setDeleteDialogOpen(true); }}
            >
              <Trash className="h-4 w-4 mr-2" />Hapus
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  const serviceCardTable = useReactTable({
    data: content?.serviceCards || [],
    columns: serviceCardColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  });

  const advantageTable = useReactTable({
    data: content?.advantages || [],
    columns: advantageColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  });

  const stepTable = useReactTable({
    data: content?.steps || [],
    columns: stepColumns,
    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">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Kelola MCU</h1>
          <p className="text-slate-500">Edit konten landing page Medical Check Up</p>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="hero">Hero</TabsTrigger>
          <TabsTrigger value="content">Konten</TabsTrigger>
          <TabsTrigger value="serviceCards">Layanan ({content?.serviceCards?.length || 0})</TabsTrigger>
          <TabsTrigger value="advantages">Keunggulan ({content?.advantages?.length || 0})</TabsTrigger>
          <TabsTrigger value="steps">Langkah ({content?.steps?.length || 0})</TabsTrigger>
        </TabsList>

        {/* Hero Tab */}
        <TabsContent value="hero" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <HeartPulse className="h-5 w-5" />
                Hero Section
              </CardTitle>
              <Button onClick={handleSaveHero} disabled={isSubmitting} size="sm">
                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                <Save className="h-4 w-4 mr-2" />
                Simpan
              </Button>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Judul</Label>
                <Input 
                  value={heroForm.title} 
                  onChange={(e) => setHeroForm({ ...heroForm, title: e.target.value })} 
                  placeholder="Medical Check Up" 
                />
              </div>
              <div className="space-y-2">
                <Label>Subtitle</Label>
                <Textarea 
                  value={heroForm.subtitle} 
                  onChange={(e) => setHeroForm({ ...heroForm, subtitle: e.target.value })} 
                  placeholder="Deskripsi..." 
                  rows={2} 
                />
              </div>
              <div className="space-y-2">
                <Label>URL Gambar</Label>
                <Input 
                  value={heroForm.imageUrl} 
                  onChange={(e) => setHeroForm({ ...heroForm, imageUrl: e.target.value })} 
                  placeholder="https://..." 
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Label CTA Primary</Label>
                  <Input 
                    value={heroForm.primaryCtaLabel} 
                    onChange={(e) => setHeroForm({ ...heroForm, primaryCtaLabel: e.target.value })} 
                    placeholder="Daftar Sekarang" 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Link CTA Primary</Label>
                  <Input 
                    value={heroForm.primaryCtaUrl} 
                    onChange={(e) => setHeroForm({ ...heroForm, primaryCtaUrl: e.target.value })} 
                    placeholder="/mcu/paket" 
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Label CTA Secondary</Label>
                  <Input 
                    value={heroForm.secondaryCtaLabel} 
                    onChange={(e) => setHeroForm({ ...heroForm, secondaryCtaLabel: e.target.value })} 
                    placeholder="Pelajari Lebih" 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Link CTA Secondary</Label>
                  <Input 
                    value={heroForm.secondaryCtaUrl} 
                    onChange={(e) => setHeroForm({ ...heroForm, secondaryCtaUrl: e.target.value })} 
                    placeholder="#layanan" 
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Page Content Tab */}
        <TabsContent value="content" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <List className="h-5 w-5" />
                Section Titles
              </CardTitle>
              <Button onClick={handleSavePageContent} disabled={isSubmitting} size="sm">
                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                <Save className="h-4 w-4 mr-2" />
                Simpan
              </Button>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Judul Section Layanan</Label>
                <Input 
                  value={pageContentForm.serviceSectionTitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, serviceSectionTitle: e.target.value })} 
                />
              </div>
              <div className="space-y-2">
                <Label>Subtitle Section Layanan</Label>
                <Input 
                  value={pageContentForm.serviceSectionSubtitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, serviceSectionSubtitle: e.target.value })} 
                />
              </div>
              <div className="space-y-2">
                <Label>Judul Section Keunggulan</Label>
                <Input 
                  value={pageContentForm.advantageSectionTitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, advantageSectionTitle: e.target.value })} 
                />
              </div>
              <div className="space-y-2">
                <Label>Subtitle Section Keunggulan</Label>
                <Input 
                  value={pageContentForm.advantageSectionSubtitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, advantageSectionSubtitle: e.target.value })} 
                />
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>URL Gambar Keunggulan Primary</Label>
                  <Input 
                    value={pageContentForm.advantageImagePrimaryUrl} 
                    onChange={(e) => setPageContentForm({ ...pageContentForm, advantageImagePrimaryUrl: e.target.value })} 
                  />
                </div>
                <div className="space-y-2">
                  <Label>URL Gambar Keunggulan Secondary</Label>
                  <Input 
                    value={pageContentForm.advantageImageSecondaryUrl} 
                    onChange={(e) => setPageContentForm({ ...pageContentForm, advantageImageSecondaryUrl: e.target.value })} 
                  />
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label>Value Statistik</Label>
                  <Input 
                    value={pageContentForm.advantageStatValue} 
                    onChange={(e) => setPageContentForm({ ...pageContentForm, advantageStatValue: e.target.value })} 
                    placeholder="99%"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Label Statistik</Label>
                  <Input 
                    value={pageContentForm.advantageStatLabel} 
                    onChange={(e) => setPageContentForm({ ...pageContentForm, advantageStatLabel: e.target.value })} 
                    placeholder="Kepuasan Pasien"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Judul Section Alur</Label>
                <Input 
                  value={pageContentForm.flowSectionTitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, flowSectionTitle: e.target.value })} 
                />
              </div>
              <div className="space-y-2">
                <Label>Subtitle Section Alur</Label>
                <Input 
                  value={pageContentForm.flowSectionSubtitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, flowSectionSubtitle: e.target.value })} 
                />
              </div>
              <div className="space-y-2">
                <Label>URL Gambar Alur</Label>
                <Input 
                  value={pageContentForm.flowImageUrl} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, flowImageUrl: e.target.value })} 
                />
              </div>
              <div className="space-y-2">
                <Label>Judul Section Testimoni</Label>
                <Input 
                  value={pageContentForm.testimonialSectionTitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, testimonialSectionTitle: e.target.value })} 
                />
              </div>
              <div className="space-y-2">
                <Label>Subtitle Section Testimoni</Label>
                <Input 
                  value={pageContentForm.testimonialSectionSubtitle} 
                  onChange={(e) => setPageContentForm({ ...pageContentForm, testimonialSectionSubtitle: e.target.value })} 
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Service Cards Tab */}
        <TabsContent value="serviceCards" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <HeartPulse className="h-5 w-5" />
                Layanan
              </CardTitle>
              <Button onClick={() => openCreateDialog('serviceCard')} size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Tambah
              </Button>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    {serviceCardTable.getHeaderGroups().map((hg) => (
                      <TableRow key={hg.id}>
                        {hg.headers.map((h) => (
                          <TableHead key={h.id}>
                            {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
                          </TableHead>
                        ))}
                      </TableRow>
                    ))}
                  </TableHeader>
                  <TableBody>
                    {serviceCardTable.getRowModel().rows?.length ? (
                      serviceCardTable.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={serviceCardColumns.length} className="h-24 text-center">
                          Tidak ada data.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Advantages Tab */}
        <TabsContent value="advantages" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Star className="h-5 w-5" />
                Keunggulan
              </CardTitle>
              <Button onClick={() => openCreateDialog('advantage')} size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Tambah
              </Button>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    {advantageTable.getHeaderGroups().map((hg) => (
                      <TableRow key={hg.id}>
                        {hg.headers.map((h) => (
                          <TableHead key={h.id}>
                            {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
                          </TableHead>
                        ))}
                      </TableRow>
                    ))}
                  </TableHeader>
                  <TableBody>
                    {advantageTable.getRowModel().rows?.length ? (
                      advantageTable.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={advantageColumns.length} className="h-24 text-center">
                          Tidak ada data.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Steps Tab */}
        <TabsContent value="steps" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Footprints className="h-5 w-5" />
                Langkah
              </CardTitle>
              <Button onClick={() => openCreateDialog('step')} size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Tambah
              </Button>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    {stepTable.getHeaderGroups().map((hg) => (
                      <TableRow key={hg.id}>
                        {hg.headers.map((h) => (
                          <TableHead key={h.id}>
                            {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
                          </TableHead>
                        ))}
                      </TableRow>
                    ))}
                  </TableHeader>
                  <TableBody>
                    {stepTable.getRowModel().rows?.length ? (
                      stepTable.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={stepColumns.length} className="h-24 text-center">
                          Tidak ada data.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Dialog */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>
              {editingItem ? "Edit" : "Tambah"} 
              {dialogType === 'serviceCard' ? ' Layanan' : dialogType === 'advantage' ? ' Keunggulan' : ' Langkah'}
            </DialogTitle>
          </DialogHeader>
          <form onSubmit={handleSubmit} className="space-y-4">
            {dialogType === 'serviceCard' && (
              <>
                <div className="space-y-2">
                  <Label>Judul *</Label>
                  <Input 
                    value={serviceCardForm.title} 
                    onChange={(e) => setServiceCardForm({ ...serviceCardForm, title: e.target.value })} 
                    required 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Deskripsi</Label>
                  <Textarea 
                    value={serviceCardForm.description} 
                    onChange={(e) => setServiceCardForm({ ...serviceCardForm, description: e.target.value })} 
                    rows={3} 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Items (satu per baris)</Label>
                  <Textarea 
                    value={serviceCardForm.items} 
                    onChange={(e) => setServiceCardForm({ ...serviceCardForm, items: e.target.value })} 
                    placeholder="Item 1&#10;Item 2&#10;Item 3"
                    rows={4} 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Icon</Label>
                  <Input 
                    value={serviceCardForm.icon} 
                    onChange={(e) => setServiceCardForm({ ...serviceCardForm, icon: e.target.value })} 
                    placeholder="heart, check, star, dll" 
                  />
                </div>
              </>
            )}
            {dialogType === 'advantage' && (
              <>
                <div className="space-y-2">
                  <Label>Judul *</Label>
                  <Input 
                    value={advantageForm.title} 
                    onChange={(e) => setAdvantageForm({ ...advantageForm, title: e.target.value })} 
                    required 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Deskripsi *</Label>
                  <Textarea 
                    value={advantageForm.description} 
                    onChange={(e) => setAdvantageForm({ ...advantageForm, description: e.target.value })} 
                    required 
                    rows={3} 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Icon</Label>
                  <Input 
                    value={advantageForm.icon} 
                    onChange={(e) => setAdvantageForm({ ...advantageForm, icon: e.target.value })} 
                    placeholder="check, star, shield, dll" 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Warna</Label>
                  <Input 
                    value={advantageForm.color} 
                    onChange={(e) => setAdvantageForm({ ...advantageForm, color: e.target.value })} 
                    placeholder="blue, green, red, #hex" 
                  />
                </div>
              </>
            )}
            {dialogType === 'step' && (
              <>
                <div className="space-y-2">
                  <Label>Judul *</Label>
                  <Input 
                    value={stepForm.title} 
                    onChange={(e) => setStepForm({ ...stepForm, title: e.target.value })} 
                    required 
                  />
                </div>
                <div className="space-y-2">
                  <Label>Deskripsi *</Label>
                  <Textarea 
                    value={stepForm.description} 
                    onChange={(e) => setStepForm({ ...stepForm, description: e.target.value })} 
                    required 
                    rows={3} 
                  />
                </div>
              </>
            )}
            <div className="space-y-2">
              <Label>Urutan</Label>
              <Input 
                type="number" 
                value={dialogType === 'serviceCard' ? serviceCardForm.order : dialogType === 'advantage' ? advantageForm.order : stepForm.order} 
                onChange={(e) => {
                  const val = parseInt(e.target.value) || 0;
                  if (dialogType === 'serviceCard') setServiceCardForm({ ...serviceCardForm, order: val });
                  else if (dialogType === 'advantage') setAdvantageForm({ ...advantageForm, order: val });
                  else setStepForm({ ...stepForm, order: val });
                }} 
                min={0} 
              />
            </div>
            <DialogFooter>
              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                Batal
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting && <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 {dialogType === 'serviceCard' ? 'Layanan' : dialogType === 'advantage' ? 'Keunggulan' : 'Langkah'}
            </AlertDialogTitle>
            <AlertDialogDescription>
              Yakin ingin menghapus "{itemToDelete?.title || itemToDelete?.question}"?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Batal</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-600">
              Hapus
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default McuAdminPage;