'use client';

import { format } from 'date-fns';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import { Offer } from '@/network/apis/dashboard/marketplace/type';
import { StatusPill } from './StatusPill';

function formatDate(value: string | null | undefined): string {
  if (!value) return '—';
  try {
    return format(new Date(value), 'PPP, p');
  } catch {
    return value;
  }
}

function formatPrice(o: Offer): string {
  if (o.lowest_price == null) return '—';
  try {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: o.base_currency || 'SAR',
    }).format(Number(o.lowest_price));
  } catch {
    return `${o.lowest_price} ${o.base_currency ?? ''}`;
  }
}

export function OfferDetailSheet({
  offer,
  onClose,
}: {
  offer: Offer | null;
  onClose: () => void;
}) {
  return (
    <Sheet open={!!offer} onOpenChange={(o) => !o && onClose()}>
      <SheetContent className="w-full sm:max-w-xl overflow-y-auto">
        {offer ? (
          <>
            <SheetHeader>
              <SheetTitle className="flex items-center gap-3">
                <span className="font-mono text-sm text-muted-foreground">
                  #{offer.id}
                </span>
                <span>{offer.title}</span>
              </SheetTitle>
              <SheetDescription asChild>
                <div className="flex items-center gap-2 pt-1">
                  <StatusPill status={offer.status} />
                  {offer.is_featured ? (
                    <span className="text-xs px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-700">
                      Featured
                    </span>
                  ) : null}
                </div>
              </SheetDescription>
            </SheetHeader>

            <div className="px-4 pb-6 space-y-6">
              {offer.description ? (
                <section>
                  <h4 className="text-xs uppercase tracking-wider text-muted-foreground mb-2">
                    Description
                  </h4>
                  <p className="text-sm whitespace-pre-wrap">
                    {offer.description}
                  </p>
                </section>
              ) : null}

              <section className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Creator
                  </div>
                  <div>{offer.creator?.name ?? '—'}</div>
                </div>
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Category
                  </div>
                  <div>{offer.category?.name ?? '—'}</div>
                </div>
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Platform
                  </div>
                  <div>{offer.platform ?? '—'}</div>
                </div>
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Starting from
                  </div>
                  <div>{formatPrice(offer)}</div>
                </div>
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Country
                  </div>
                  <div>{offer.creator_location_country ?? '—'}</div>
                </div>
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Languages
                  </div>
                  <div>
                    {offer.language_codes && offer.language_codes.length > 0
                      ? offer.language_codes.join(', ').toUpperCase()
                      : '—'}
                  </div>
                </div>
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Instant booking
                  </div>
                  <div>{offer.instant_booking_enabled ? 'Yes' : 'No'}</div>
                </div>
                <div>
                  <div className="text-xs uppercase tracking-wider text-muted-foreground mb-1">
                    Custom requests
                  </div>
                  <div>{offer.custom_requests_enabled ? 'Yes' : 'No'}</div>
                </div>
              </section>

              {offer.rejection_reason ? (
                <section>
                  <h4 className="text-xs uppercase tracking-wider text-muted-foreground mb-2">
                    Rejection reason
                  </h4>
                  <p className="text-sm whitespace-pre-wrap rounded-md bg-red-50 text-red-700 p-3">
                    {offer.rejection_reason}
                  </p>
                </section>
              ) : null}

              <section>
                <h4 className="text-xs uppercase tracking-wider text-muted-foreground mb-2">
                  Timeline
                </h4>
                <ul className="text-sm space-y-1.5">
                  <li className="flex justify-between gap-4">
                    <span className="text-muted-foreground">Created</span>
                    <span>{formatDate(offer.created_at)}</span>
                  </li>
                  {offer.published_at ? (
                    <li className="flex justify-between gap-4">
                      <span className="text-muted-foreground">Published</span>
                      <span>{formatDate(offer.published_at)}</span>
                    </li>
                  ) : null}
                  {offer.updated_at ? (
                    <li className="flex justify-between gap-4">
                      <span className="text-muted-foreground">Updated</span>
                      <span>{formatDate(offer.updated_at)}</span>
                    </li>
                  ) : null}
                </ul>
              </section>
            </div>
          </>
        ) : null}
      </SheetContent>
    </Sheet>
  );
}