'use client'

import { useEffect, useState } from 'react'
import {
  getMyOrders,
  createOrder,
  updateOrder,
  updateOrderStatus,
  deleteOrder,
  getSessionUser,
} from '@/app/actions'
import { Button, buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'

import { ShareButton } from '@/components/ShareButton'
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
import { Textarea } from '@/components/ui/textarea'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { format, isToday } from 'date-fns'
import { id as idLocale } from 'date-fns/locale'
import Link from 'next/link'
import {
  PlusCircle,
  MinusCircle,
  Copy,
  FileText,
  Loader2,
  Plus,
  Users,
  Sparkles,
  Layers,
  Pencil,
  Lock,
  Trash2,
  AlertTriangle,
  ChevronLeft,
  ChevronRight,
} from 'lucide-react'
import PiutangManager from '@/components/PiutangManager'

export default function MyOrdersPage() {
  const [userId, setUserId] = useState<string | null>(null)
  const [orders, setOrders] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [isCreateOpen, setIsCreateOpen] = useState(false)
  const [editingOrder, setEditingOrder] = useState<any | null>(null)
  const [orderToDelete, setOrderToDelete] = useState<any | null>(null)
  const [orderToDuplicate, setOrderToDuplicate] = useState<any | null>(null)
  const [deleting, setDeleting] = useState(false)
  const [mainTab, setMainTab] = useState<'PO' | 'PIUTANG'>('PO')
  const [activeTab, setActiveTab] = useState<'ALL' | 'OPEN' | 'DRAFT' | 'CLOSE'>('ALL')
  const [currentPage, setCurrentPage] = useState(1)
  const [searchQuery, setSearchQuery] = useState('')
  const ITEMS_PER_PAGE = 5

  useEffect(() => {
    const init = async () => {
      const user = await getSessionUser()
      if (user?.id) {
        setUserId(user.id)
        loadOrders(user.id)
      }
    }
    init()
  }, [])

  const loadOrders = async (id: string) => {
    setLoading(true)
    const data = await getMyOrders(id)
    setOrders(data)
    setLoading(false)
  }

  const handleStatusChange = async (orderId: string, newStatus: string) => {
    const res = await updateOrderStatus(orderId, newStatus)
    if (res.success && userId) {
      loadOrders(userId)
    }
  }

  const handleDelete = async () => {
    if (!orderToDelete) return
    setDeleting(true)
    const res = await deleteOrder(orderToDelete.id)
    if (res.success && userId) {
      setOrderToDelete(null)
      loadOrders(userId)
    }
    setDeleting(false)
  }

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'OPEN':
        return (
          <span className="inline-flex items-center rounded-full border border-emerald-200/80 bg-emerald-50 px-2.5 py-0.5 text-xs font-black text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400">
            ● OPEN
          </span>
        )
      case 'CLOSE':
        return (
          <span className="inline-flex items-center rounded-full border border-rose-200/80 bg-rose-50 px-2.5 py-0.5 text-xs font-black text-rose-700 dark:bg-rose-950/50 dark:text-rose-400">
            ● CLOSE
          </span>
        )
      default:
        return (
          <span className="inline-flex items-center rounded-full border border-slate-200/90 bg-slate-100 px-2.5 py-0.5 text-xs font-black text-slate-700 dark:bg-slate-800 dark:text-slate-300">
            ● DRAFT
          </span>
        )
    }
  }

  const filteredOrders = orders.filter((o) => {
    const matchTab = activeTab === 'ALL' ? true : o.status === activeTab
    const matchSearch = o.title.toLowerCase().includes(searchQuery.toLowerCase())
    return matchTab && matchSearch
  })

  // Pagination logic
  const totalPages = Math.ceil(filteredOrders.length / ITEMS_PER_PAGE)
  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE
  const paginatedOrders = filteredOrders.slice(startIndex, startIndex + ITEMS_PER_PAGE)

  // Reset page when tab or search changes
  useEffect(() => {
    setCurrentPage(1)
  }, [activeTab, searchQuery])

  if (loading) {
    return (
      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">
        <Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
        <span className="text-xs font-semibold text-slate-500">Memuat data PO Anda...</span>
      </div>
    )
  }

  return (
    <div className="animate-in fade-in space-y-6 pb-12 duration-500">
      {/* Main Tab Switcher */}
      <div className="flex w-full max-w-sm rounded-xl border border-slate-200 bg-slate-100 p-1 dark:border-slate-800 dark:bg-slate-900">
        <button
          onClick={() => setMainTab('PO')}
          className={cn(
            'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
            mainTab === 'PO'
              ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
              : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
          )}
        >
          Daftar PO
        </button>
        <button
          onClick={() => setMainTab('PIUTANG')}
          className={cn(
            'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
            mainTab === 'PIUTANG'
              ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
              : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
          )}
        >
          Kelola Piutang
        </button>
      </div>

      {mainTab === 'PO' ? (
        <>
          {/* Top Controls & Segmented Control */}
          <div className="flex flex-col items-start justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
            <div className="flex w-full flex-col items-start gap-4 md:w-auto md:flex-row md:items-center">
              {/* Segmented Control / Tabs */}
              <div className="flex w-full items-center overflow-x-auto rounded-xl bg-slate-100 p-1 text-xs font-bold md:w-auto dark:bg-slate-800/80">
                {(['ALL', 'OPEN', 'DRAFT', 'CLOSE'] as const).map((tab) => (
                  <button
                    key={tab}
                    onClick={() => setActiveTab(tab)}
                    className={cn(
                      'rounded-lg px-4 py-2 whitespace-nowrap transition-all duration-200',
                      activeTab === tab
                        ? 'bg-white font-black text-[#1B2CC1] shadow-sm dark:bg-slate-900 dark:text-white'
                        : 'text-slate-500 hover:text-slate-900 dark:hover:text-white'
                    )}
                  >
                    {tab === 'ALL' ? 'Semua PO' : tab}
                    <span className="ml-1.5 text-[10px] opacity-70">
                      (
                      {tab === 'ALL'
                        ? orders.length
                        : orders.filter((o) => o.status === tab).length}
                      )
                    </span>
                  </button>
                ))}
              </div>

              {/* Search Input */}
              <div className="relative w-full md:w-64">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                  <svg
                    className="h-4 w-4 text-slate-400"
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                  >
                    <path
                      fillRule="evenodd"
                      d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                      clipRule="evenodd"
                    />
                  </svg>
                </div>
                <Input
                  type="text"
                  placeholder="Cari nama PO..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="h-10 w-full rounded-xl border-slate-200 bg-slate-50 pl-9 text-sm focus-visible:ring-[#1B2CC1] dark:border-slate-800 dark:bg-slate-900"
                />
              </div>
            </div>

            {/* Action Button */}
            <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
              <DialogTrigger
                className={cn(
                  buttonVariants({ size: 'lg' }),
                  'h-10 w-full cursor-pointer gap-2 rounded-xl bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/20 hover:bg-[#15229E] md:w-auto'
                )}
              >
                <Plus className="h-4 w-4" /> Buka Jasa PO Baru
              </DialogTrigger>
              <CreateOrderModal
                userId={userId!}
                onSuccess={() => {
                  setIsCreateOpen(false)
                  if (userId) loadOrders(userId)
                }}
              />
            </Dialog>
          </div>

          {/* Edit Order Modal */}
          {editingOrder && (
            <Dialog open={!!editingOrder} onOpenChange={(open) => !open && setEditingOrder(null)}>
              <EditOrderModal
                order={editingOrder}
                onClose={() => setEditingOrder(null)}
                onSuccess={() => {
                  setEditingOrder(null)
                  if (userId) loadOrders(userId)
                }}
              />
            </Dialog>
          )}

          {/* Duplicate Order Modal */}
          {orderToDuplicate && (
            <Dialog
              open={!!orderToDuplicate}
              onOpenChange={(open) => !open && setOrderToDuplicate(null)}
            >
              <CreateOrderModal
                userId={userId!}
                initialData={orderToDuplicate}
                onSuccess={() => {
                  setOrderToDuplicate(null)
                  if (userId) loadOrders(userId)
                }}
              />
            </Dialog>
          )}

          {/* Delete Confirmation Modal */}
          {orderToDelete && (
            <Dialog open={!!orderToDelete} onOpenChange={(open) => !open && setOrderToDelete(null)}>
              <DialogContent className="overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-2xl sm:max-w-[440px] dark:border-slate-800">
                <div className="flex items-center gap-3 border-b border-red-100 bg-red-50 p-6 dark:border-red-900/50 dark:bg-red-950/30">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-red-600 text-white shadow-md shadow-red-600/20">
                    <AlertTriangle className="h-5 w-5" />
                  </div>
                  <div>
                    <DialogTitle className="text-lg font-black text-slate-900 dark:text-white">
                      Hapus Jasa PO Ini?
                    </DialogTitle>
                    <p className="mt-0.5 text-xs text-slate-500">
                      Tindakan ini permanen dan tidak dapat dibatalkan.
                    </p>
                  </div>
                </div>

                <div className="space-y-4 bg-white p-6 dark:bg-slate-900">
                  <div className="rounded-xl border border-slate-200/80 bg-slate-50 p-3.5 text-xs dark:border-slate-700 dark:bg-slate-800/50">
                    <p className="mb-1 font-bold text-slate-800 dark:text-slate-200">
                      {orderToDelete.title}
                    </p>
                    <p className="text-[11px] text-slate-500">
                      Status:{' '}
                      <span className="font-bold text-slate-700 dark:text-slate-300">
                        {orderToDelete.status}
                      </span>{' '}
                      • {orderToDelete.submissions?.length || 0} titipan pemesan
                    </p>
                  </div>

                  <p className="text-xs leading-relaxed text-slate-600 dark:text-slate-400">
                    Seluruh data pesanan dan daftar menu yang ada di dalam PO ini akan dihapus dari
                    sistem.
                  </p>

                  <div className="flex gap-2.5 pt-2">
                    <Button
                      type="button"
                      variant="outline"
                      onClick={() => setOrderToDelete(null)}
                      disabled={deleting}
                      className="h-10 w-1/2 rounded-xl text-xs font-bold"
                    >
                      Batal
                    </Button>
                    <Button
                      type="button"
                      onClick={handleDelete}
                      disabled={deleting}
                      className="h-10 w-1/2 gap-1.5 rounded-xl bg-red-600 text-xs font-bold text-white shadow-md shadow-red-600/20 hover:bg-red-700"
                    >
                      {deleting ? (
                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
                      ) : (
                        <Trash2 className="h-3.5 w-3.5" />
                      )}
                      <span>{deleting ? 'Menghapus...' : 'Ya, Hapus PO'}</span>
                    </Button>
                  </div>
                </div>
              </DialogContent>
            </Dialog>
          )}

          {/* Order List */}
          {filteredOrders.length === 0 ? (
            <div className="flex flex-col items-center justify-center rounded-3xl border-2 border-dashed border-slate-200 bg-white p-16 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
              <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-[#1B2CC1]/10 text-[#1B2CC1]">
                <Layers className="h-8 w-8" />
              </div>
              <h3 className="mb-1 text-lg font-bold text-slate-800 dark:text-slate-200">
                {activeTab === 'ALL' ? 'Belum Ada Jasa PO' : `Tidak Ada PO Berstatus ${activeTab}`}
              </h3>
              <p className="mb-6 max-w-sm text-xs leading-relaxed text-slate-500">
                Mulai buka jasa titip pesanan makanan atau kebutuhan untuk teman kantor.
              </p>
              <Button
                onClick={() => setIsCreateOpen(true)}
                className="h-10 gap-2 rounded-xl bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/20 hover:bg-[#15229E]"
              >
                <Plus className="h-4 w-4" /> Buat PO Baru
              </Button>
            </div>
          ) : (
            <div className="flex h-full flex-col space-y-4">
              <div className="flex max-h-[calc(100vh-260px)] scrollbar-thin flex-col space-y-4 overflow-y-auto pr-2">
                {paginatedOrders.map((order) => {
                  const date = new Date(order.date)
                  const isClosed = order.status === 'CLOSE'
                  const isDraft = order.status === 'DRAFT'
                  const canDelete = isDraft || isClosed

                  return (
                    <div
                      key={order.id}
                      className="flex shrink-0 flex-col overflow-hidden rounded-2xl border border-slate-200/90 bg-white shadow-sm transition-all hover:border-[#1B2CC1]/40 hover:shadow-md md:flex-row dark:border-slate-800 dark:bg-slate-900"
                    >
                      {/* Left: Info */}
                      <div className="flex w-full flex-col justify-center border-slate-100 p-5 md:flex-1 md:border-r dark:border-slate-800/80">
                        <div className="flex items-start justify-between gap-4">
                          <div className="min-w-0 flex-1">
                            <h3 className="line-clamp-2 text-xl leading-snug font-bold text-slate-900 dark:text-white">
                              {order.title}
                            </h3>
                            {order.description && (
                              <p className="mt-1 line-clamp-2 text-xs font-medium text-slate-500">
                                {order.description}
                              </p>
                            )}
                          </div>
                          <div className="flex shrink-0 flex-col items-end gap-2 sm:flex-row sm:items-center">
                            <span className="rounded-full bg-slate-100/80 px-2.5 py-1 text-[11px] font-semibold whitespace-nowrap text-slate-500 dark:bg-slate-800">
                              {format(date, 'EEEE, dd MMM yyyy', { locale: idLocale })}
                            </span>
                            {getStatusBadge(order.status)}
                          </div>
                        </div>

                        <div className="mt-3 flex flex-wrap items-center gap-3 border-t border-slate-100 pt-3 dark:border-slate-800/60">
                          <div className="flex items-center gap-1.5">
                            <Users className="h-4 w-4 text-[#1B2CC1]" />
                            <span className="text-xs font-bold text-slate-700 dark:text-slate-300">
                              {order.submissions.length} Orang Menitip
                            </span>
                            {isClosed && order.submissions.length > 0 && (
                              <div className="ml-1 flex items-center gap-1.5 border-slate-200 sm:ml-2 sm:border-l sm:pl-3 dark:border-slate-700">
                                <span className="rounded bg-emerald-50 px-1.5 py-0.5 text-[10px] font-black text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-400">
                                  Lunas:{' '}
                                  {
                                    order.submissions.filter(
                                      (s: any) => s.payment_status === 'LUNAS'
                                    ).length
                                  }
                                </span>
                                <span className="rounded bg-rose-50 px-1.5 py-0.5 text-[10px] font-black text-rose-700 dark:bg-rose-950/50 dark:text-rose-400">
                                  Belum:{' '}
                                  {
                                    order.submissions.filter(
                                      (s: any) => s.payment_status !== 'LUNAS'
                                    ).length
                                  }
                                </span>
                              </div>
                            )}
                          </div>

                          <div className="hidden h-1 w-1 rounded-full bg-slate-300 sm:block dark:bg-slate-600"></div>

                          <div className="flex items-center gap-2">
                            {order.available_items.length > 0 && (
                              <span className="text-xs font-bold text-slate-600 dark:text-slate-400">
                                {order.available_items.length} Menu Pilihan
                              </span>
                            )}
                            {order.allow_custom && (
                              <div className="inline-flex items-center gap-1 rounded-md bg-blue-50 px-2 py-0.5 text-[10px] font-semibold text-[#1B2CC1] dark:bg-blue-950/40">
                                <Sparkles className="h-3 w-3" /> Custom Item Aktif
                              </div>
                            )}
                          </div>
                        </div>
                      </div>

                      {/* Right: Actions */}
                      <div className="flex w-full shrink-0 flex-col justify-center gap-3 bg-slate-50/70 p-4 sm:p-5 md:w-[280px] dark:bg-slate-800/40">
                        <div className="flex w-full flex-row gap-2">
                          {/* Detail Link */}
                          <Link
                            href={`/my-orders/${order.id}`}
                            className={cn(
                              buttonVariants({ variant: 'outline', size: 'sm' }),
                              'flex h-10 flex-1 items-center justify-center gap-1.5 rounded-xl border-slate-200 bg-white px-2 text-xs font-bold shadow-sm transition-all hover:border-[#1B2CC1]/40 hover:bg-blue-50/60 hover:text-[#1B2CC1] dark:border-slate-700 dark:bg-slate-900'
                            )}
                          >
                            <FileText className="h-4 w-4 shrink-0 text-[#1B2CC1]" />
                            <span className="truncate">Detail</span>
                          </Link>

                          {/* Status Action Button */}
                          <div className="flex-1">
                            {order.status === 'DRAFT' && (
                              <Button
                                onClick={() => handleStatusChange(order.id, 'OPEN')}
                                disabled={!isToday(new Date(order.date))}
                                className={cn(
                                  'h-10 w-full gap-1.5 rounded-xl px-2 text-xs font-bold shadow-sm transition-all',
                                  isToday(new Date(order.date))
                                    ? 'cursor-pointer bg-emerald-600 text-white hover:bg-emerald-700'
                                    : 'cursor-not-allowed bg-slate-200 text-slate-500 opacity-50'
                                )}
                                title={
                                  isToday(new Date(order.date))
                                    ? 'Buka PO'
                                    : 'Hanya PO hari ini yang bisa dibuka'
                                }
                              >
                                <Sparkles className="h-3.5 w-3.5 shrink-0" />
                                <span className="truncate">Buka</span>
                              </Button>
                            )}
                            {order.status === 'OPEN' && (
                              <Button
                                onClick={() => handleStatusChange(order.id, 'CLOSE')}
                                className="h-10 w-full cursor-pointer gap-1.5 rounded-xl bg-rose-600 px-2 text-xs font-bold text-white shadow-sm transition-all hover:bg-rose-700"
                                title="Tutup PO"
                              >
                                <Lock className="h-3.5 w-3.5 shrink-0" />
                                <span className="truncate">Tutup</span>
                              </Button>
                            )}
                            {order.status === 'CLOSE' && (
                              <Button
                                onClick={() => handleStatusChange(order.id, 'OPEN')}
                                disabled={!isToday(new Date(order.date))}
                                className={cn(
                                  'h-10 w-full gap-1.5 rounded-xl px-2 text-xs font-bold shadow-sm transition-all',
                                  isToday(new Date(order.date))
                                    ? 'cursor-pointer bg-emerald-600 text-white hover:bg-emerald-700'
                                    : 'cursor-not-allowed bg-slate-200 text-slate-500 opacity-50'
                                )}
                                title={
                                  isToday(new Date(order.date))
                                    ? 'Buka Kembali PO'
                                    : 'Hanya PO hari ini yang bisa dibuka'
                                }
                              >
                                <Sparkles className="h-3.5 w-3.5 shrink-0" />
                                <span className="truncate">Buka</span>
                              </Button>
                            )}
                          </div>
                        </div>

                        {/* Utility Tools Row */}
                        <div className="flex items-center justify-between gap-1 border-t border-slate-200/60 pt-3 dark:border-slate-800/60">
                          <Button
                            variant="ghost"
                            size="sm"
                            disabled={isClosed || !isToday(new Date(order.date))}
                            onClick={() => setEditingOrder(order)}
                            className={cn(
                              'h-8 flex-1 gap-1 rounded-lg px-1 text-[10px] font-bold transition-all sm:text-[11px]',
                              isClosed || !isToday(new Date(order.date))
                                ? 'cursor-not-allowed text-slate-400 opacity-35'
                                : 'text-slate-600 hover:bg-[#1B2CC1]/10 hover:text-[#1B2CC1] dark:text-slate-300'
                            )}
                            title={
                              isClosed
                                ? 'PO sudah CLOSE'
                                : !isToday(new Date(order.date))
                                  ? 'Hanya PO hari ini yang bisa diedit'
                                  : 'Edit PO'
                            }
                          >
                            <Pencil className="h-3.5 w-3.5 shrink-0" />
                            <span className="truncate">Edit</span>
                          </Button>

                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => setOrderToDuplicate(order)}
                            className="h-8 flex-1 gap-1 rounded-lg px-1 text-[10px] font-bold text-slate-600 transition-all hover:bg-slate-200/60 hover:text-slate-900 sm:text-[11px] dark:text-slate-300"
                            title="Duplikasi PO ini"
                          >
                            <Copy className="h-3.5 w-3.5 shrink-0" />
                            <span className="truncate">Duplikat</span>
                          </Button>

                          <Button
                            variant="ghost"
                            size="sm"
                            disabled={!canDelete}
                            onClick={() => setOrderToDelete(order)}
                            className={cn(
                              'h-8 flex-1 gap-1 rounded-lg px-1 text-[10px] font-bold transition-all sm:text-[11px]',
                              !canDelete
                                ? 'cursor-not-allowed text-slate-400 opacity-35'
                                : 'text-red-600 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-950/40'
                            )}
                            title={!canDelete ? 'PO OPEN tidak dapat dihapus' : 'Hapus PO'}
                          >
                            <Trash2 className="h-3.5 w-3.5 shrink-0" />
                            <span className="truncate">Hapus</span>
                          </Button>

                          {order.status === 'OPEN' && (
                            <ShareButton
                              orderId={order.id}
                              variant="ghost"
                              className="h-8 flex-1 gap-1 rounded-lg px-1 text-[10px] font-bold text-slate-600 transition-all hover:bg-[#1B2CC1]/10 hover:text-[#1B2CC1] sm:text-[11px] dark:text-slate-300"
                            />
                          )}
                        </div>
                      </div>
                    </div>
                  )
                })}
              </div>

              {/* Pagination Controls */}
              {totalPages > 1 && (
                <div className="mt-4 flex items-center justify-between border-t border-slate-200 pt-6 dark:border-slate-800">
                  <span className="text-xs font-medium text-slate-500">
                    Menampilkan{' '}
                    <span className="font-bold text-slate-900 dark:text-white">
                      {(currentPage - 1) * ITEMS_PER_PAGE + 1}
                    </span>{' '}
                    hingga{' '}
                    <span className="font-bold text-slate-900 dark:text-white">
                      {Math.min(currentPage * ITEMS_PER_PAGE, filteredOrders.length)}
                    </span>{' '}
                    dari{' '}
                    <span className="font-bold text-slate-900 dark:text-white">
                      {filteredOrders.length}
                    </span>{' '}
                    PO
                  </span>

                  <div className="flex items-center gap-1.5">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
                      disabled={currentPage === 1}
                      className="h-8 w-8 rounded-lg p-0"
                    >
                      <ChevronLeft className="h-4 w-4" />
                    </Button>

                    <div className="flex items-center gap-1 px-2">
                      {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                        <Button
                          key={page}
                          variant="ghost"
                          size="sm"
                          onClick={() => setCurrentPage(page)}
                          className={cn(
                            'h-8 w-8 rounded-lg p-0 text-xs font-bold transition-all',
                            currentPage === page
                              ? 'bg-[#1B2CC1] text-white hover:bg-[#15229E] hover:text-white'
                              : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'
                          )}
                        >
                          {page}
                        </Button>
                      ))}
                    </div>

                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setCurrentPage((prev) => Math.min(totalPages, prev + 1))}
                      disabled={currentPage === totalPages}
                      className="h-8 w-8 rounded-lg p-0"
                    >
                      <ChevronRight className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              )}
            </div>
          )}
        </>
      ) : (
        <PiutangManager creatorId={userId!} />
      )}
    </div>
  )
}

function CreateOrderModal({
  userId,
  onSuccess,
  initialData,
}: {
  userId: string
  onSuccess: () => void
  initialData?: any
}) {
  const [title, setTitle] = useState(initialData ? `${initialData.title} (Copy)` : '')
  const [description, setDescription] = useState(initialData ? initialData.description || '' : '')
  const [allowCustom, setAllowCustom] = useState(initialData ? initialData.allow_custom : false)
  const [items, setItems] = useState<{ id: string; name: string }[]>(
    initialData && initialData.available_items?.length > 0
      ? initialData.available_items.map((ai: any) => ({
          id: Math.random().toString(),
          name: ai.name,
        }))
      : [{ id: '1', name: '' }]
  )
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const addItem = () => setItems([...items, { id: Math.random().toString(), name: '' }])
  const removeItem = (id: string) =>
    setItems(items.filter((i: { id: string; name: string }) => i.id !== id))
  const updateItem = (id: string, name: string) =>
    setItems(items.map((i: { id: string; name: string }) => (i.id === id ? { ...i, name } : i)))

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!title.trim()) return setError('Judul PO wajib diisi.')

    const validItems = items
      .filter((i: { id: string; name: string }) => i.name.trim())
      .map((i: { id: string; name: string }) => i.name.trim())
    if (!allowCustom && validItems.length === 0) {
      return setError(
        'Wajib menambahkan minimal 1 menu pilihan jika tidak mengizinkan custom item.'
      )
    }

    setLoading(true)

    const res = await createOrder({
      creator_id: userId,
      title: title.trim(),
      description: description.trim(),
      date: new Date(),
      allow_custom: allowCustom,
      available_items: validItems,
    })

    if (res.success) {
      onSuccess()
    } else {
      setError(res.error || 'Gagal membuat order')
    }
    setLoading(false)
  }

  return (
    <DialogContent
      closeClassName="text-white/80 hover:text-slate-900 hover:bg-white/90"
      className="flex max-h-[90vh] flex-col overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-2xl sm:max-w-[540px] dark:border-slate-800"
    >
      <div className="bg-gradient-to-br from-[#1B2CC1] to-[#121E85] p-6 text-white">
        <span className="text-[11px] font-bold tracking-wider text-blue-200 uppercase">
          Form Buka PO
        </span>
        <DialogTitle className="mt-1 text-2xl font-black tracking-tight text-white">
          Buka Jasa Titip Baru
        </DialogTitle>
        <p className="mt-1 text-xs text-blue-100">
          Tentukan nama pesanan dan daftar menu yang bisa dipesan teman kantor.
        </p>
      </div>

      <form
        onSubmit={handleSubmit}
        className="flex-1 space-y-6 overflow-y-auto bg-white p-6 dark:bg-slate-900"
      >
        <div className="space-y-1.5">
          <Label
            htmlFor="order-title"
            className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
          >
            Judul PO <span className="text-red-500">*</span>
          </Label>
          <Input
            id="order-title"
            placeholder="Contoh: Titip Kopi Tuku Lebak Bulus"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="h-11 rounded-xl border-slate-200 focus-visible:border-[#1B2CC1] focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 dark:border-slate-800"
          />
        </div>

        <div className="space-y-1.5">
          <Label
            htmlFor="order-desc"
            className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
          >
            Deskripsi <span className="font-normal text-slate-400 lowercase">(opsional)</span>
          </Label>
          <Textarea
            id="order-desc"
            placeholder="Keterangan tambahan tentang PO ini"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="min-h-[100px] rounded-xl border-slate-200 focus-visible:border-[#1B2CC1] focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 dark:border-slate-800"
          />
        </div>

        {/* Custom Item Checkbox */}
        <div className="flex items-start space-x-3 rounded-xl border border-slate-200/80 bg-slate-50/70 p-4 dark:border-slate-800 dark:bg-slate-800/40">
          <Checkbox
            id="allowCustom"
            checked={allowCustom}
            onCheckedChange={(c) => setAllowCustom(c as boolean)}
            className="mt-0.5 rounded-lg data-[state=checked]:border-[#1B2CC1] data-[state=checked]:bg-[#1B2CC1]"
          />
          <div className="grid gap-0.5">
            <Label
              htmlFor="allowCustom"
              className="cursor-pointer text-xs font-bold text-slate-800 dark:text-slate-200"
            >
              Izinkan Item Custom / Kustom
            </Label>
            <p className="text-[11px] text-slate-500">
              Teman bisa menambahkan nama pesanan lain di luar daftar menu yang Anda buat.
            </p>
          </div>
        </div>

        {/* Dynamic Items List */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
              Daftar Menu Pilihan
            </Label>
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={addItem}
              className="h-8 gap-1.5 rounded-lg border-dashed border-[#1B2CC1]/50 text-xs font-bold text-[#1B2CC1] hover:bg-[#1B2CC1]/10"
            >
              <PlusCircle className="h-3.5 w-3.5" /> Tambah Baris
            </Button>
          </div>

          <div className="space-y-2.5">
            {items.map((item: { id: string; name: string }, index: number) => (
              <div
                key={item.id}
                className="flex items-center gap-2 rounded-xl border border-slate-200/90 bg-slate-50/50 p-2 dark:border-slate-800 dark:bg-slate-800/30"
              >
                <span className="w-5 text-center text-xs font-bold text-slate-400">
                  {index + 1}.
                </span>
                <Input
                  placeholder="Nama menu (mis: Es Kopi Susu Tetangga)"
                  value={item.name}
                  onChange={(e) => updateItem(item.id, e.target.value)}
                  className="h-9 flex-1 rounded-lg bg-white text-xs font-medium dark:bg-slate-900"
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  onClick={() => removeItem(item.id)}
                  disabled={items.length === 1 && !allowCustom}
                  className="h-8 w-8 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-950/30"
                >
                  <MinusCircle className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </div>

        {error && (
          <div className="rounded-xl border border-red-200 bg-red-50 p-3 text-xs font-semibold text-red-600 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400">
            {error}
          </div>
        )}

        <Button
          type="submit"
          disabled={loading}
          className="h-11 w-full rounded-xl bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/25 hover:bg-[#15229E]"
        >
          {loading ? 'Menyimpan PO...' : 'Simpan & Buat PO (Otomatis DRAFT)'}
        </Button>
      </form>
    </DialogContent>
  )
}

function EditOrderModal({
  order,
  onClose,
  onSuccess,
}: {
  order: any
  onClose: () => void
  onSuccess: () => void
}) {
  const [title, setTitle] = useState(order.title || '')
  const [description, setDescription] = useState(order.description || '')
  const [allowCustom, setAllowCustom] = useState(order.allow_custom || false)
  const [items, setItems] = useState<Array<{ id: string; name: string; is_sold_out: boolean }>>(
    order.available_items?.length > 0
      ? order.available_items.map((ai: any) => ({
          id: ai.id,
          name: ai.name,
          is_sold_out: ai.is_sold_out || false,
        }))
      : [{ id: '1', name: '', is_sold_out: false }]
  )
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const addItem = () =>
    setItems([...items, { id: Math.random().toString(), name: '', is_sold_out: false }])
  const removeItem = (id: string) => setItems(items.filter((i) => i.id !== id))
  const updateItem = (id: string, name: string) =>
    setItems(items.map((i) => (i.id === id ? { ...i, name } : i)))
  const toggleSoldOut = (id: string, is_sold_out: boolean) =>
    setItems(items.map((i) => (i.id === id ? { ...i, is_sold_out } : i)))

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!title.trim()) return setError('Judul PO wajib diisi.')

    const validItems = items
      .filter((i) => i.name.trim())
      .map((i) => ({ name: i.name.trim(), is_sold_out: i.is_sold_out }))
    if (!allowCustom && validItems.length === 0) {
      return setError(
        'Wajib menambahkan minimal 1 menu pilihan jika tidak mengizinkan custom item.'
      )
    }

    setLoading(true)

    const res = await updateOrder(order.id, {
      title: title.trim(),
      description: description.trim(),
      allow_custom: allowCustom,
      available_items: validItems,
    })

    if (res.success) {
      onSuccess()
    } else {
      setError(res.error || 'Gagal memperbarui order.')
    }
    setLoading(false)
  }

  return (
    <DialogContent
      closeClassName="text-white/80 hover:text-slate-900 hover:bg-white/90"
      className="flex max-h-[90vh] flex-col overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-2xl sm:max-w-[540px] dark:border-slate-800"
    >
      <div className="bg-gradient-to-br from-[#1B2CC1] to-[#121E85] p-6 text-white">
        <span className="text-[11px] font-bold tracking-wider text-blue-200 uppercase">
          Edit Jasa PO
        </span>
        <DialogTitle className="mt-1 text-2xl font-black tracking-tight text-white">
          Edit Informasi PO
        </DialogTitle>
        <p className="mt-1 text-xs text-blue-100">
          Perbarui judul pesanan atau daftar menu yang dapat dipilih pemesan.
        </p>
      </div>

      <form
        onSubmit={handleSubmit}
        className="flex-1 space-y-6 overflow-y-auto bg-white p-6 dark:bg-slate-900"
      >
        <div className="space-y-1.5">
          <Label
            htmlFor="edit-order-title"
            className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
          >
            Judul PO <span className="text-red-500">*</span>
          </Label>
          <Input
            id="edit-order-title"
            placeholder="Contoh: Titip Kopi Tuku Lebak Bulus"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            className="h-11 rounded-xl border-slate-200 focus-visible:border-[#1B2CC1] focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 dark:border-slate-800"
          />
        </div>

        <div className="space-y-1.5">
          <Label
            htmlFor="edit-order-desc"
            className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
          >
            Deskripsi <span className="font-normal text-slate-400 lowercase">(opsional)</span>
          </Label>
          <Textarea
            id="edit-order-desc"
            placeholder="Keterangan tambahan tentang PO ini"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            className="min-h-[100px] rounded-xl border-slate-200 focus-visible:border-[#1B2CC1] focus-visible:ring-4 focus-visible:ring-[#1B2CC1]/15 dark:border-slate-800"
          />
        </div>

        {/* Custom Item Checkbox */}
        <div className="flex items-start space-x-3 rounded-xl border border-slate-200/80 bg-slate-50/70 p-4 dark:border-slate-800 dark:bg-slate-800/40">
          <Checkbox
            id="edit-allowCustom"
            checked={allowCustom}
            onCheckedChange={(c) => setAllowCustom(c as boolean)}
            className="mt-0.5 rounded-lg data-[state=checked]:border-[#1B2CC1] data-[state=checked]:bg-[#1B2CC1]"
          />
          <div className="grid gap-0.5">
            <Label
              htmlFor="edit-allowCustom"
              className="cursor-pointer text-xs font-bold text-slate-800 dark:text-slate-200"
            >
              Izinkan Item Custom / Kustom
            </Label>
            <p className="text-[11px] text-slate-500">
              Teman bisa menambahkan nama pesanan lain di luar daftar menu yang Anda buat.
            </p>
          </div>
        </div>

        {/* Dynamic Items List */}
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
              Daftar Menu Pilihan
            </Label>
            <Button
              type="button"
              variant="outline"
              size="sm"
              onClick={addItem}
              className="h-8 gap-1.5 rounded-lg border-dashed border-[#1B2CC1]/50 text-xs font-bold text-[#1B2CC1] hover:bg-[#1B2CC1]/10"
            >
              <PlusCircle className="h-3.5 w-3.5" /> Tambah Baris
            </Button>
          </div>

          <div className="space-y-2.5">
            {items.map((item, index) => (
              <div
                key={item.id}
                className="flex items-center gap-2 rounded-xl border border-slate-200/90 bg-slate-50/50 p-2 dark:border-slate-800 dark:bg-slate-800/30"
              >
                <span className="w-5 text-center text-xs font-bold text-slate-400">
                  {index + 1}.
                </span>
                <Input
                  placeholder="Nama menu (mis: Es Kopi Susu Tetangga)"
                  value={item.name}
                  disabled={item.is_sold_out}
                  onChange={(e) => updateItem(item.id, e.target.value)}
                  className={cn(
                    'h-9 flex-1 rounded-lg bg-white text-xs font-medium transition-all dark:bg-slate-900',
                    item.is_sold_out &&
                      'cursor-not-allowed line-through decoration-rose-500/50 opacity-60'
                  )}
                />
                <Button
                  type="button"
                  variant={item.is_sold_out ? 'default' : 'outline'}
                  size="sm"
                  onClick={() => toggleSoldOut(item.id, !item.is_sold_out)}
                  className={cn(
                    'h-9 rounded-lg px-3 text-xs font-bold whitespace-nowrap transition-all',
                    item.is_sold_out
                      ? 'border-rose-600 bg-rose-600 text-white hover:bg-rose-700'
                      : 'text-slate-500 hover:border-rose-300 hover:text-rose-600'
                  )}
                >
                  Sold Out
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  onClick={() => removeItem(item.id)}
                  disabled={items.length === 1 && !allowCustom}
                  className="h-8 w-8 shrink-0 rounded-lg text-red-500 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-950/30"
                >
                  <MinusCircle className="h-4 w-4" />
                </Button>
              </div>
            ))}
          </div>
        </div>

        {error && (
          <div className="rounded-xl border border-red-200 bg-red-50 p-3 text-xs font-semibold text-red-600 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400">
            {error}
          </div>
        )}

        <div className="flex gap-2 pt-2">
          <Button
            type="button"
            variant="outline"
            onClick={onClose}
            className="h-11 w-1/3 rounded-xl font-bold"
          >
            Batal
          </Button>
          <Button
            type="submit"
            disabled={loading}
            className="h-11 flex-1 rounded-xl bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/25 hover:bg-[#15229E]"
          >
            {loading ? 'Menyimpan Perubahan...' : 'Simpan Perubahan PO'}
          </Button>
        </div>
      </form>
    </DialogContent>
  )
}