"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 { Badge } from "@/components/ui/badge";
import AdminProgramsService from "@/services/admin.programs.service";
import ProgramsService from "@/services/programs.service";
import type { Program, PackageDetail } from "@/types/program.type";
import {
  Plus,
  MoreHorizontal,
  Edit,
  Trash,
  ChevronLeft,
  ChevronRight,
  Loader2,
  Briefcase,
  Package,
} from "lucide-react";

interface ProgramFormData {
  title: string;
  slug: string;
  description: string;
}

interface PackageFormData {
  name: string;
  slug: string;
  description: string;
  summary: string;
  benefits: string;
  excluded: string;
  price: string;
  priceText: string;
  priceNote: string;
  variant: 'solar' | 'pertalite' | 'pertamax' | 'turbo';
  order: number;
}

const variantColors: Record<string, string> = {
  solar: 'bg-yellow-500',
  pertalite: 'bg-pink-500',
  pertamax: 'bg-red-500',
  turbo: 'bg-green-500',
};

const variantLabels: Record<string, string> = {
  solar: 'Solar',
  pertalite: 'Pertalite',
  pertamax: 'Pertamax',
  turbo: 'Turbo',
};

const ProgramsAdminPage = () => {
  const [activeTab, setActiveTab] = useState("programs");
  const [sorting, setSorting] = useState<SortingState>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [dialogType, setDialogType] = useState<'program' | 'package' | null>(null);
  const [editingItem, setEditingItem] = useState<Program | PackageDetail | null>(null);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [itemToDelete, setItemToDelete] = useState<Program | PackageDetail | null>(null);

  const { data: programsData, isLoading: isLoadingPrograms, mutate: mutatePrograms } = useSWR<{ programs: Program[] }>(
    "/admin/programs",
    async () => {
      const response = await ProgramsService.getAll();
      return response.data || { programs: [] };
    }
  );

  const [programForm, setProgramForm] = useState<ProgramFormData>({
    title: "",
    slug: "",
    description: "",
  });

  const [packageForm, setPackageForm] = useState<PackageFormData>({
    name: "",
    slug: "",
    description: "",
    summary: "",
    benefits: "",
    excluded: "",
    price: "",
    priceText: "",
    priceNote: "",
    variant: 'solar',
    order: 0,
  });

  const openCreateDialog = (type: 'program' | 'package') => {
    setDialogType(type);
    setEditingItem(null);
    if (type === 'program') {
      setProgramForm({ title: "", slug: "", description: "" });
    } else {
      setPackageForm({
        name: "", slug: "", description: "", summary: "",
        benefits: "", excluded: "", price: "", priceText: "",
        priceNote: "", variant: 'solar', order: 0
      });
    }
    setIsDialogOpen(true);
  };

  const openEditDialog = (type: 'program' | 'package', item: Program | PackageDetail) => {
    setDialogType(type);
    setEditingItem(item);
    if (type === 'program') {
      const program = item as Program;
      setProgramForm({
        title: program.title,
        slug: program.slug,
        description: program.description || "",
      });
    } else {
      const pkg = item as PackageDetail;
      setPackageForm({
        name: pkg.name || "",
        slug: pkg.slug,
        description: pkg.description || "",
        summary: pkg.summary || "",
        benefits: pkg.benefits?.join("\n") || "",
        excluded: pkg.excluded?.join("\n") || "",
        price: pkg.price?.toString() || "",
        priceText: pkg.priceText || "",
        priceNote: pkg.priceNote || "",
        variant: pkg.variant || 'solar',
        order: 0,
      });
    }
    setIsDialogOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      if (dialogType === 'program') {
        const data = {
          ...programForm,
          slug: programForm.slug || undefined,
        };
        if (editingItem) {
          await AdminProgramsService.updateProgram((editingItem as Program).id, data);
          toast.success("Program berhasil diperbarui");
        } else {
          await AdminProgramsService.createProgram(data);
          toast.success("Program berhasil ditambahkan");
        }
        mutatePrograms();
      } else if (dialogType === 'package') {
        const data = {
          ...packageForm,
          slug: packageForm.slug || undefined,
          price: packageForm.price ? parseFloat(packageForm.price) : undefined,
          benefits: packageForm.benefits.split("\n").filter(Boolean),
          excluded: packageForm.excluded.split("\n").filter(Boolean),
        };
        if (editingItem) {
          await AdminProgramsService.updatePackage((editingItem as PackageDetail).id, data);
          toast.success("Paket berhasil diperbarui");
        } else {
          // For creating new package, need programId - using first program as default
          const programId = programs[0]?.id || "";
          await AdminProgramsService.createPackage({ ...data, programId });
          toast.success("Paket berhasil ditambahkan");
        }
      }
      setIsDialogOpen(false);
    } catch (error) {
      toast.error(dialogType === 'program' ? "Gagal menyimpan program" : "Gagal menyimpan paket");
    } finally {
      setIsSubmitting(false);
    }
  };

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

    try {
      if (dialogType === 'program') {
        await AdminProgramsService.deleteProgram((itemToDelete as Program).id);
        toast.success("Program berhasil dihapus");
        mutatePrograms();
      } else {
        await AdminProgramsService.deletePackage((itemToDelete as PackageDetail).id);
        toast.success("Paket berhasil dihapus");
      }
    } catch (error) {
      toast.error("Gagal menghapus");
    } finally {
      setDeleteDialogOpen(false);
      setItemToDelete(null);
    }
  };

  const programs = programsData?.programs || [];
  
  // Get all packages from all programs
  const allPackages: (PackageDetail & { programTitle: string })[] = [];
  programs.forEach(program => {
    if (program.packages) {
      program.packages.forEach(pkg => {
        allPackages.push({ ...pkg as unknown as PackageDetail, programTitle: program.title });
      });
    }
  });

  const programColumns: ColumnDef<Program>[] = [
    {
      accessorKey: "title",
      header: "Program",
      cell: ({ row }) => (
        <div className="flex items-center gap-3">
          <div className="h-10 w-10 rounded-full bg-slate-100 flex items-center justify-center">
            <Briefcase className="h-5 w-5 text-slate-500" />
          </div>
          <div>
            <p className="font-medium">{row.original.title}</p>
            <p className="text-sm text-slate-500">/{row.original.slug}</p>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "description",
      header: "Deskripsi",
      cell: ({ row }) => (
        <span className="text-sm text-slate-600 truncate max-w-xs">
          {row.original.description}
        </span>
      ),
    },
    {
      accessorKey: "packages",
      header: "Paket",
      cell: ({ row }) => (
        <Badge variant="secondary">
          {row.original.packages?.length || 0} paket
        </Badge>
      ),
    },
    {
      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('program', row.original)}>
              <Edit className="h-4 w-4 mr-2" />
              Edit
            </DropdownMenuItem>
            <DropdownMenuItem
              className="text-red-600"
              onClick={() => { setDialogType('program'); setItemToDelete(row.original); setDeleteDialogOpen(true); }}
            >
              <Trash className="h-4 w-4 mr-2" />
              Hapus
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  const packageColumns: ColumnDef<PackageDetail & { programTitle: string }>[] = [
    {
      accessorKey: "title",
      header: "Paket",
      cell: ({ row }) => (
        <div className="flex items-center gap-3">
          <div className="h-10 w-10 rounded-full bg-slate-100 flex items-center justify-center">
            <Package className="h-5 w-5 text-slate-500" />
          </div>
          <div>
            <p className="font-medium">{row.original.title}</p>
            <p className="text-sm text-slate-500">/{row.original.slug}</p>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "programTitle",
      header: "Program",
      cell: ({ row }) => (
        <Badge variant="outline">{row.original.programTitle}</Badge>
      ),
    },
    {
      accessorKey: "variant",
      header: "Varian",
      cell: ({ row }) => (
        row.original.variant ? (
          <Badge className={variantColors[row.original.variant]}>
            {variantLabels[row.original.variant]}
          </Badge>
        ) : (
          <span className="text-slate-400">-</span>
        )
      ),
    },
    {
      accessorKey: "price",
      header: "Harga",
      cell: ({ row }) => (
        <span className="font-medium">
          {row.original.price ? `Rp ${row.original.price.toLocaleString()}` : row.original.priceText || '-'}
        </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('package', row.original)}>
              <Edit className="h-4 w-4 mr-2" />
              Edit
            </DropdownMenuItem>
            <DropdownMenuItem
              className="text-red-600"
              onClick={() => { setDialogType('package'); setItemToDelete(row.original); setDeleteDialogOpen(true); }}
            >
              <Trash className="h-4 w-4 mr-2" />
              Hapus
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ),
    },
  ];

  const programTable = useReactTable({
    data: programs,
    columns: programColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  });

  const packageTable = useReactTable({
    data: allPackages,
    columns: packageColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  });

  if (isLoadingPrograms) {
    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 Program</h1>
          <p className="text-slate-500">Kelola program dan paket layanan klinik</p>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="programs">Program ({programs.length})</TabsTrigger>
          <TabsTrigger value="packages">Paket ({allPackages.length})</TabsTrigger>
        </TabsList>

        <TabsContent value="programs" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Briefcase className="h-5 w-5" />
                Daftar Program
              </CardTitle>
              <Button onClick={() => openCreateDialog('program')} size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Tambah Program
              </Button>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    {programTable.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>
                    {programTable.getRowModel().rows?.length ? (
                      programTable.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={programColumns.length} className="h-24 text-center">
                          Tidak ada data program.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>

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

        <TabsContent value="packages" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="flex items-center gap-2">
                <Package className="h-5 w-5" />
                Daftar Paket
              </CardTitle>
              <Button onClick={() => openCreateDialog('package')} size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Tambah Paket
              </Button>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    {packageTable.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>
                    {packageTable.getRowModel().rows?.length ? (
                      packageTable.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={packageColumns.length} className="h-24 text-center">
                          Tidak ada data paket.
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
              </div>

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

      {/* Dialog */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>
              {editingItem ? "Edit" : "Tambah"} {dialogType === 'program' ? 'Program' : 'Paket'}
            </DialogTitle>
          </DialogHeader>
          <form onSubmit={handleSubmit} className="space-y-4">
            {dialogType === 'program' && (
              <>
                <div className="space-y-2">
                  <Label>Judul Program *</Label>
                  <Input
                    value={programForm.title}
                    onChange={(e) => setProgramForm({ ...programForm, title: e.target.value })}
                    placeholder="Contoh: Medical Check Up"
                    required
                  />
                </div>
                <div className="space-y-2">
                  <Label>Slug (URL)</Label>
                  <Input
                    value={programForm.slug}
                    onChange={(e) => setProgramForm({ ...programForm, slug: e.target.value })}
                    placeholder="medical-check-up"
                  />
                </div>
                <div className="space-y-2">
                  <Label>Deskripsi *</Label>
                  <Textarea
                    value={programForm.description}
                    onChange={(e) => setProgramForm({ ...programForm, description: e.target.value })}
                    placeholder="Deskripsi program..."
                    required
                    rows={4}
                  />
                </div>
              </>
            )}
            {dialogType === 'package' && (
              <>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Judul Paket *</Label>
                    <Input
                      value={packageForm.name}
                      onChange={(e) => setPackageForm({ ...packageForm, name: e.target.value })}
                      placeholder="Contoh: Paket Basic"
                      required
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Slug (URL)</Label>
                    <Input
                      value={packageForm.slug}
                      onChange={(e) => setPackageForm({ ...packageForm, slug: e.target.value })}
                      placeholder="paket-basic"
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Deskripsi</Label>
                  <Textarea
                    value={packageForm.description}
                    onChange={(e) => setPackageForm({ ...packageForm, description: e.target.value })}
                    placeholder="Deskripsi paket..."
                    rows={2}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Ringkasan</Label>
                  <Input
                    value={packageForm.summary}
                    onChange={(e) => setPackageForm({ ...packageForm, summary: e.target.value })}
                    placeholder="Ringkasan singkat..."
                  />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <Label>Harga (angka)</Label>
                    <Input
                      type="number"
                      value={packageForm.price}
                      onChange={(e) => setPackageForm({ ...packageForm, price: e.target.value })}
                      placeholder="500000"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label>Text Harga</Label>
                    <Input
                      value={packageForm.priceText}
                      onChange={(e) => setPackageForm({ ...packageForm, priceText: e.target.value })}
                      placeholder="Rp 500.000"
                    />
                  </div>
                </div>
                <div className="space-y-2">
                  <Label>Catatan Harga</Label>
                  <Input
                    value={packageForm.priceNote}
                    onChange={(e) => setPackageForm({ ...packageForm, priceNote: e.target.value })}
                    placeholder="*Harga belum termasuk..."
                  />
                </div>
                <div className="space-y-2">
                  <Label>Varian</Label>
                  <select
                    value={packageForm.variant}
                    onChange={(e) => setPackageForm({ ...packageForm, variant: e.target.value as any })}
                    className="w-full p-2 border rounded"
                  >
                    <option value="solar">Solar</option>
                    <option value="pertalite">Pertalite</option>
                    <option value="pertamax">Pertamax</option>
                    <option value="turbo">Turbo</option>
                  </select>
                </div>
                <div className="space-y-2">
                  <Label>Benefits (satu per baris)</Label>
                  <Textarea
                    value={packageForm.benefits}
                    onChange={(e) => setPackageForm({ ...packageForm, benefits: e.target.value })}
                    placeholder="Konsultasi dokter&#10;Pemeriksaan fisik&#10;..."
                    rows={3}
                  />
                </div>
                <div className="space-y-2">
                  <Label>Tidak Termasuk (satu per baris)</Label>
                  <Textarea
                    value={packageForm.excluded}
                    onChange={(e) => setPackageForm({ ...packageForm, excluded: e.target.value })}
                    placeholder="Obat-obatan&#10;Biaya rawat inap&#10;..."
                    rows={3}
                  />
                </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 === 'program' ? 'Program' : 'Paket'}</AlertDialogTitle>
            <AlertDialogDescription>
              Yakin ingin menghapus "{(itemToDelete as any)?.title || (itemToDelete as any)?.name}"?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Batal</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-600">
              Hapus
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default ProgramsAdminPage;