import { getOrderDetail, getSessionUser } from '@/app/actions'
import { redirect, notFound } from 'next/navigation'
import { Store, User, Users, CheckCircle2, ChevronLeft, MapPin, Sparkles } from 'lucide-react'
import Link from 'next/link'
import { PublicOrderActions } from './PublicOrderActions'
import { SummaryGenerator } from '@/components/SummaryGenerator'
import { format } from 'date-fns'
import { id as idLocale } from 'date-fns/locale'
import { cn } from '@/lib/utils'

export const dynamic = 'force-dynamic'

export default async function PublicOrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const session = await getSessionUser()
  
  if (!session) {
    redirect(`/login?callbackUrl=/order/${id}`)
  }

  const order = await getOrderDetail(id)

  if (!order) {
    notFound()
  }

  return (
    <div className="space-y-6 max-w-4xl mx-auto pb-20 animate-in fade-in duration-500">
      <div className="flex items-center gap-3">
        <Link href="/" className="p-2 -ml-2 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500 transition-colors">
          <ChevronLeft className="w-5 h-5" />
        </Link>
        <h1 className="text-xl font-black text-slate-900 dark:text-white tracking-tight">Detail PO</h1>
      </div>

      {/* Hero Card */}
      <div className="relative overflow-hidden rounded-3xl bg-white dark:bg-slate-900 shadow-sm border border-slate-200/60 dark:border-slate-800">
        <div className="absolute top-0 left-0 w-full h-24 bg-gradient-to-r from-[#1B2CC1] to-[#121E85]" />
        
        <div className="relative pt-10 px-5 pb-5 sm:px-6 sm:pb-6 flex flex-col items-center text-center">
          <div className="w-20 h-20 rounded-2xl bg-white dark:bg-slate-900 shadow-md border-4 border-white dark:border-slate-900 flex items-center justify-center mb-3">
            {order.creator.photo ? (
              <img src={order.creator.photo} alt={order.creator.name} className="w-full h-full object-cover rounded-xl" />
            ) : (
              <Store className="w-8 h-8 text-[#1B2CC1]" />
            )}
          </div>
          
          <h2 className="text-xl sm:text-2xl font-black text-slate-900 dark:text-white mb-2 leading-tight">
            {order.title}
          </h2>
          
          <div className="flex flex-wrap justify-center items-center gap-3 text-sm font-semibold text-slate-600 dark:text-slate-400">
            <span className="flex items-center gap-1.5 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full">
              <User className="w-4 h-4 text-[#1B2CC1]" />
              {order.creator.name}
            </span>
            <span className={cn(
              "flex items-center gap-1.5 px-3 py-1 rounded-full border",
              order.status === 'OPEN'
                ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 border-emerald-100 dark:border-emerald-900/50"
                : "bg-rose-50 text-rose-700 dark:bg-rose-950/30 dark:text-rose-400 border-rose-100 dark:border-rose-900/50"
            )}>
              <CheckCircle2 className="w-4 h-4" />
              {order.status}
            </span>
            {order.allow_custom && (
              <span className="flex items-center gap-1.5 bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400 px-3 py-1 rounded-full border border-blue-100 dark:border-blue-900/50">
                <Sparkles className="w-4 h-4" />
                Custom Item
              </span>
            )}
          </div>

          <PublicOrderActions order={order} />
        </div>
        
        <div className="bg-slate-50 dark:bg-slate-800/50 border-t border-slate-100 dark:border-slate-800 p-4 sm:p-5 flex flex-col sm:flex-row divide-y sm:divide-y-0 sm:divide-x divide-slate-200 dark:divide-slate-700">
          <div className="flex-1 py-3 sm:py-0 sm:px-4 text-center">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Tanggal PO</p>
            <p className="text-base font-black text-slate-800 dark:text-slate-200">
              {format(new Date(order.date), 'dd MMM yyyy', { locale: idLocale })}
            </p>
          </div>
          <div className="flex-1 py-3 sm:py-0 sm:px-4 text-center">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Total Orang</p>
            <p className="text-base font-black text-slate-800 dark:text-slate-200">
              {order.submissions.length} <span className="text-xs font-semibold text-slate-500">menitip</span>
            </p>
          </div>
          <div className="flex-1 py-3 sm:py-0 sm:px-4 text-center">
            <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Menu Tersedia</p>
            <p className="text-base font-black text-slate-800 dark:text-slate-200">
              {order.available_items.length} <span className="text-xs font-semibold text-slate-500">item</span>
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        {/* Left 2 Cols: Daftar Penitip & Description */}
        <div className="lg:col-span-2 space-y-6">
          {order.description && (
            <div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden p-5 sm:p-6">
              <h3 className="font-bold text-slate-900 dark:text-white mb-3">Deskripsi</h3>
              <div className="text-slate-600 dark:text-slate-300 text-sm leading-relaxed whitespace-pre-wrap">
                {order.description}
              </div>
            </div>
          )}

          <div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden">
            <div className="p-5 sm:p-6 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center">
                  <Users className="w-4 h-4" />
                </div>
                <h3 className="font-bold text-slate-900 dark:text-white">Daftar Penitip</h3>
              </div>
            </div>

            <div className="divide-y divide-slate-100 dark:divide-slate-800">
              {order.submissions.length > 0 ? (
                order.submissions.map((sub: any) => (
                  <div key={sub.id} className="p-4 sm:p-6 flex items-start gap-4 hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors">
                    {sub.user.photo ? (
                      <img src={sub.user.photo} alt={sub.user.name} className="w-10 h-10 rounded-full object-cover shrink-0" />
                    ) : (
                      <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center font-bold text-sm shrink-0">
                        {sub.user.name.charAt(0).toUpperCase()}
                      </div>
                    )}
                    
                    <div className="flex-1 min-w-0">
                      <h4 className="font-bold text-slate-800 dark:text-slate-200 text-sm mb-2">{sub.user.name}</h4>
                      <div className="flex flex-wrap gap-1.5">
                        {sub.items.map((item: any) => (
                          <span 
                            key={item.id} 
                            className={`inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-medium border ${
                              item.is_custom 
                                ? 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800' 
                                : 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700'
                            }`}
                          >
                            {item.qty}x {item.name}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                ))
              ) : (
                <div className="p-12 text-center">
                  <p className="text-slate-500 font-medium">Belum ada yang menitip.</p>
                  <p className="text-xs text-slate-400 mt-1">Jadilah yang pertama untuk menitip pesanan!</p>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Right 1 Col: Summary Generators */}
        <SummaryGenerator order={order} />
      </div>
    </div>
  )
}