'use client';

import { useState } from 'react';
import { BadgeCheck, Clock3, FileText, PackageCheck, ShieldCheck, Star } from 'lucide-react';

type Props = { product: { name: string; description?: string | null; deliveryMethod?: string | null; deliveryTime?: string | null; warranty?: string | null; seller?: { name?: string | null } | null; sellerRating?: { average?: number; count?: number; percentage?: number }; sellerReviews?: Array<{ id: string; rating: number; comment?: string | null; createdAt: string; buyerName?: string }> } };
const tabClass = (active: boolean) => `rounded-lg px-3 py-2 text-sm font-bold transition ${active ? 'bg-white/10 text-white shadow-sm' : 'text-gray-500 hover:text-gray-200'}`;

export default function ProductDescriptionPanel({ product }: Props) {
  const [tab, setTab] = useState<'description' | 'information' | 'delivery' | 'reviews'>('description');
  const automatic = ['AUTO', 'AUTO_ZIP', 'AUTO_TXT'].includes(product.deliveryMethod || '');
  const rating = product.sellerRating || {};
  const reviews = product.sellerReviews || [];
  return <section className="overflow-hidden rounded-2xl border border-white/10 bg-[#15171c] shadow-xl"><div className="flex flex-wrap gap-1 border-b border-white/10 bg-black/20 p-2"><button type="button" onClick={() => setTab('description')} className={tabClass(tab === 'description')}>Mô tả</button><button type="button" onClick={() => setTab('information')} className={tabClass(tab === 'information')}>Thông tin</button><button type="button" onClick={() => setTab('delivery')} className={tabClass(tab === 'delivery')}>Bàn giao & bảo hành</button><button type="button" onClick={() => setTab('reviews')} className={tabClass(tab === 'reviews')}>Đánh giá {rating.count ? `(${rating.count})` : ''}</button></div><div className="p-5 sm:p-6">{tab === 'description' && <div className="space-y-4"><div className="flex items-center gap-2"><FileText className="h-5 w-5 text-rose-400" /><h2 className="text-lg font-black text-white">Mô tả sản phẩm</h2></div><div className="whitespace-pre-wrap leading-7 text-gray-300">{product.description || 'Người bán chưa bổ sung mô tả chi tiết cho sản phẩm này.'}</div></div>}{tab === 'information' && <div className="space-y-4"><div className="flex items-center gap-2"><PackageCheck className="h-5 w-5 text-cyan-400" /><h2 className="text-lg font-black text-white">Thông tin mua hàng</h2></div><dl className="grid overflow-hidden rounded-xl border border-white/10 sm:grid-cols-2"><Info label="Tên sản phẩm" value={product.name} /><Info label="Người bán" value={product.seller?.name || 'SHOP MMO Seller'} /><Info label="Phương thức" value={automatic ? 'Giao tự động (ZIP)' : 'Giao thủ công'} /><Info label="Thời gian giao dự kiến" value={product.deliveryTime || '1 - 24 giờ'} /></dl></div>}{tab === 'delivery' && <div className="space-y-4"><div className="flex items-center gap-2"><ShieldCheck className="h-5 w-5 text-emerald-400" /><h2 className="text-lg font-black text-white">Bàn giao & bảo hành</h2></div><div className="grid gap-3 sm:grid-cols-2"><Policy icon={<Clock3 className="h-5 w-5 text-cyan-400" />} title="Bàn giao" description={automatic ? 'Đơn tự động được đóng ZIP riêng và hiển thị trong đơn hàng sau khi thanh toán thành công.' : `Người bán xử lý theo thời gian dự kiến: ${product.deliveryTime || '1 - 24 giờ'}.`} /><Policy icon={<BadgeCheck className="h-5 w-5 text-emerald-400" />} title="Bảo hành" description={product.warranty ? `Thời hạn bảo hành: ${product.warranty}. Vui lòng liên hệ qua đơn hàng khi cần hỗ trợ.` : 'Áp dụng theo mô tả sản phẩm của người bán.'} /></div><div className="rounded-xl border border-amber-400/20 bg-amber-400/5 p-4 text-sm leading-6 text-amber-100"><b>Quyền lợi người mua:</b> Tiền được giữ bởi Escrow cho đến khi bạn xác nhận đơn hàng. Không chia sẻ mật khẩu ví hoặc mã xác thực cho bất kỳ ai.</div></div>}{tab === 'reviews' && <div className="space-y-4"><div className="flex flex-wrap items-center justify-between gap-3"><div><h2 className="flex items-center gap-2 text-lg font-black text-white"><Star className="h-5 w-5 fill-amber-400 text-amber-400" /> Đánh giá người bán</h2><p className="mt-1 text-sm text-gray-400">Chỉ hiển thị đánh giá từ khách đã mua hàng.</p></div>{rating.count ? <div className="rounded-xl border border-amber-400/20 bg-amber-400/5 px-4 py-2 text-right"><p className="text-xl font-black text-amber-300">{Number(rating.average || 0).toFixed(1)}/5</p><p className="text-[11px] font-bold text-amber-100/70">{rating.percentage || 0}% hài lòng · {rating.count} đánh giá</p></div> : null}</div>{reviews.length ? <div className="space-y-3">{reviews.map((review) => <article key={review.id} className="rounded-xl border border-white/10 bg-black/20 p-4"><div className="flex flex-wrap items-center justify-between gap-2"><div><p className="font-bold text-white">{maskBuyerName(review.buyerName || 'Khách hàng')}</p><p className="mt-1 flex gap-0.5">{Array.from({ length: 5 }).map((_, index) => <Star key={index} className={`h-4 w-4 ${index < review.rating ? 'fill-amber-400 text-amber-400' : 'text-gray-700'}`} />)}</p></div><time className="text-xs text-gray-500">{new Date(review.createdAt).toLocaleDateString('vi-VN')}</time></div>{review.comment ? <p className="mt-3 whitespace-pre-wrap text-sm leading-6 text-gray-300">{review.comment}</p> : <p className="mt-3 text-sm italic text-gray-500">Khách hàng không để lại bình luận.</p>}</article>)}</div> : <div className="rounded-xl border border-dashed border-white/10 py-10 text-center text-sm text-gray-500">Seller này chưa có đánh giá từ khách hàng.</div>}</div>}</div></section>;
}
function Info({ label, value }: { label: string; value: string }) { return <div className="border-b border-white/10 p-4 odd:sm:border-r"><dt className="text-xs font-bold uppercase tracking-wide text-gray-500">{label}</dt><dd className="mt-1 text-sm font-semibold text-white">{value}</dd></div>; }
function Policy({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) { return <div className="rounded-xl border border-white/10 bg-black/20 p-4"><div className="flex items-center gap-2 font-bold text-white">{icon}{title}</div><p className="mt-2 text-sm leading-6 text-gray-400">{description}</p></div>; }
function maskBuyerName(name: string) { if (name.length <= 2) return `${name[0] || 'K'}*`; return `${name.slice(0, 2)}${'*'.repeat(Math.min(5, Math.max(2, name.length - 2)))}`; }