"use client";

import { useState } from "react";
import useSWR from "swr";
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  SortingState,
  useReactTable,
} from "@tanstack/react-table";
import { toast } from "sonner";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import AdminInquiriesService from "@/services/admin.inquiries.service";
import type { Inquiry, InquiryStatus } from "@/types/inquiry.type";
import {
  Search,
  Eye,
  Trash,
  Mail,
  Phone,
  User,
  ChevronLeft,
  ChevronRight,
  RefreshCw,
} from "lucide-react";

const statusLabels: Record<InquiryStatus, string> = {
  PENDING: "Pending",
  REVIEWED: "Dibaca",
  COMPLETED: "Selesai",
};

const statusColors: Record<InquiryStatus, string> = {
  PENDING: "bg-yellow-500",
  REVIEWED: "bg-blue-500",
  COMPLETED: "bg-green-500",
};

const InquiriesListPage = () => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [globalFilter, setGlobalFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState<InquiryStatus | "ALL">("ALL");
  const [viewDialogOpen, setViewDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedInquiry, setSelectedInquiry] = useState<Inquiry | null>(null);
  const [inquiryToDelete, setInquiryToDelete] = useState<Inquiry | null>(null);
  const [page, setPage] = useState(1);
  const [limit] = useState(10);

  const { data: inquiriesData, isLoading, mutate } = useSWR(
    `/admin/inquiries?page=${page}&limit=${limit}&status=${statusFilter}`,
    () => AdminInquiriesService.getAll({
      page,
      limit,
      status: statusFilter === "ALL" ? undefined : statusFilter,
    })
  );

  const handleView = (inquiry: Inquiry) => {
    setSelectedInquiry(inquiry);
    setViewDialogOpen(true);
    
    // Auto-update status to REVIEWED if it's still PENDING
    if (inquiry.status === "PENDING") {
      handleUpdateStatus(inquiry.id, "REVIEWED");
    }
  };

  const handleUpdateStatus = async (id: string, status: InquiryStatus) => {
    try {
      await AdminInquiriesService.updateStatus(id, { status });
      mutate();
    } catch (error) {
      console.error("Failed to update status:", error);
    }
  };

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

    try {
      await AdminInquiriesService.delete(inquiryToDelete.id);
      toast.success("Pesan berhasil dihapus");
      mutate();
    } catch (error) {
      toast.error("Gagal menghapus pesan");
    } finally {
      setDeleteDialogOpen(false);
      setInquiryToDelete(null);
    }
  };

  const inquiries = inquiriesData?.inquiries || [];

  const columns: ColumnDef<Inquiry>[] = [
    {
      accessorKey: "name",
      header: "Pengirim",
      cell: ({ row }) => (
        <div>
          <div className="flex items-center gap-2">
            <User className="h-4 w-4 text-slate-400" />
            <p className="font-medium">{row.original.name}</p>
          </div>
          <div className="flex items-center gap-2 text-sm text-slate-500">
            <Mail className="h-3 w-3" />
            <span className="line-clamp-1">{row.original.email}</span>
          </div>
        </div>
      ),
    },
    {
      accessorKey: "subject",
      header: "Subjek",
      cell: ({ row }) => (
        <div>
          <p className="font-medium line-clamp-1">{row.original.subject || "-"}</p>
          <p className="text-sm text-slate-500 line-clamp-1">
            {row.original.message}
          </p>
        </div>
      ),
    },
    {
      accessorKey: "phone",
      header: "Telepon",
      cell: ({ row }) => (
        <div className="flex items-center gap-2 text-sm text-slate-500">
          <Phone className="h-4 w-4" />
          <span>{row.original.phone || "-"}</span>
        </div>
      ),
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }) => (
        <Badge
          className={statusColors[row.original.status] || "bg-gray-500"}
        >
          {statusLabels[row.original.status] || row.original.status}
        </Badge>
      ),
    },
    {
      accessorKey: "createdAt",
      header: "Tanggal",
      cell: ({ row }) => (
        <span className="text-sm text-slate-500">
          {new Date(row.original.createdAt).toLocaleDateString("id-ID", {
            day: "numeric",
            month: "short",
            year: "numeric",
            hour: "2-digit",
            minute: "2-digit",
          })}
        </span>
      ),
    },
    {
      id: "actions",
      header: "Aksi",
      cell: ({ row }) => (
        <div className="flex items-center gap-2">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => handleView(row.original)}
          >
            <Eye className="h-4 w-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="text-red-600"
            onClick={() => {
              setInquiryToDelete(row.original);
              setDeleteDialogOpen(true);
            }}
          >
            <Trash className="h-4 w-4" />
          </Button>
        </div>
      ),
    },
  ];

  const table = useReactTable({
    data: inquiries,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: {
      sorting,
      globalFilter,
    },
    manualPagination: true,
    pageCount: inquiriesData?.pagination?.totalPages || 1,
  });

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Pesan Masuk</h1>
          <p className="text-slate-500">Kelola pesan dan pertanyaan dari pengunjung website</p>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-4">
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
          <p className="text-sm text-yellow-700">Pending</p>
          <p className="text-2xl font-bold text-yellow-800">
            {inquiries.filter((i) => i.status === "PENDING").length}
          </p>
        </div>
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
          <p className="text-sm text-blue-700">Dibaca</p>
          <p className="text-2xl font-bold text-blue-800">
            {inquiries.filter((i) => i.status === "REVIEWED").length}
          </p>
        </div>
        <div className="bg-green-50 border border-green-200 rounded-lg p-4">
          <p className="text-sm text-green-700">Selesai</p>
          <p className="text-2xl font-bold text-green-800">
            {inquiries.filter((i) => i.status === "COMPLETED").length}
          </p>
        </div>
      </div>

      {/* Filters */}
      <div className="flex items-center gap-2">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" />
          <Input
            placeholder="Cari pesan..."
            value={globalFilter}
            onChange={(e) => setGlobalFilter(e.target.value)}
            className="pl-9"
          />
        </div>

        <Select
          value={statusFilter}
          onValueChange={(value) => setStatusFilter(value as InquiryStatus | "ALL")}
        >
          <SelectTrigger className="w-40">
            <SelectValue placeholder="Filter status" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="ALL">Semua Status</SelectItem>
            <SelectItem value="PENDING">Pending</SelectItem>
            <SelectItem value="REVIEWED">Dibaca</SelectItem>
            <SelectItem value="COMPLETED">Selesai</SelectItem>
          </SelectContent>
        </Select>

        <Button
          variant="outline"
          size="icon"
          onClick={() => mutate()}
        >
          <RefreshCw className="h-4 w-4" />
        </Button>
      </div>

      {/* Table */}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.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>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  Memuat data...
                </TableCell>
              </TableRow>
            ) : table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  Tidak ada pesan masuk.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      <div className="flex items-center justify-between">
        <p className="text-sm text-slate-500">
          Menampilkan {inquiries.length} dari {inquiriesData?.pagination?.total || 0} pesan
        </p>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={page === 1}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <span className="text-sm text-slate-500">
            Halaman {page} dari {inquiriesData?.pagination?.totalPages || 1}
          </span>
          <Button
            variant="outline"
            size="sm"
            onClick={() => setPage((p) => p + 1)}
            disabled={page >= (inquiriesData?.pagination?.totalPages || 1)}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* View Inquiry Dialog */}
      <Dialog open={viewDialogOpen} onOpenChange={setViewDialogOpen}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Detail Pesan</DialogTitle>
            <DialogDescription>
              Dikirim pada {selectedInquiry && new Date(selectedInquiry.createdAt).toLocaleDateString("id-ID", {
                day: "numeric",
                month: "long",
                year: "numeric",
                hour: "2-digit",
                minute: "2-digit",
              })}
            </DialogDescription>
          </DialogHeader>
          
          {selectedInquiry && (
            <div className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-slate-700">Nama</p>
                  <p className="text-sm text-slate-600">{selectedInquiry.name}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-700">Email</p>
                  <p className="text-sm text-slate-600">{selectedInquiry.email}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-700">Telepon</p>
                  <p className="text-sm text-slate-600">{selectedInquiry.phone || "-"}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-slate-700">Subjek</p>
                  <p className="text-sm text-slate-600">{selectedInquiry.subject || "-"}</p>
                </div>
              </div>
              
              <div>
                <p className="text-sm font-medium text-slate-700 mb-2">Pesan</p>
                <div className="bg-slate-50 rounded-lg p-4 text-sm text-slate-600 whitespace-pre-wrap">
                  {selectedInquiry.message}
                </div>
              </div>

              <div>
                <p className="text-sm font-medium text-slate-700 mb-2">Status</p>
                <Select
                  value={selectedInquiry.status}
                  onValueChange={(value) => {
                    handleUpdateStatus(selectedInquiry.id, value as InquiryStatus);
                    setSelectedInquiry({ ...selectedInquiry, status: value as InquiryStatus });
                  }}
                >
                  <SelectTrigger className="w-40">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="PENDING">Pending</SelectItem>
                    <SelectItem value="REVIEWED">Dibaca</SelectItem>
                    <SelectItem value="COMPLETED">Selesai</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          )}

          <DialogFooter>
            <Button variant="outline" onClick={() => setViewDialogOpen(false)}>
              Tutup
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Hapus Pesan</AlertDialogTitle>
            <AlertDialogDescription>
              Apakah Anda yakin ingin menghapus pesan dari &quot;{inquiryToDelete?.name}&quot;? 
              Tindakan ini tidak dapat dibatalkan.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Batal</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
              Hapus
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default InquiriesListPage;