import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import { ImageWithFallback } from '@/components/ImageWithFallback';
import { useTranslation } from '@/contexts/language';
import { sanitizeUrl } from '@/lib/sanitizeUrl';
import {
  parseLabExtras,
  labOptionLabel,
  PAYMENT_METHODS,
  AVAILABILITY_OPTIONS,
  RATE_CURRENCIES,
  ALL_RATE_UNITS,
} from '@/lib/labExtras';
import { Banknote, Eye, Languages as LanguagesIcon, MapPin } from 'lucide-react';

export interface LabPreviewSkill {
  label: string;
  description?: string;
}

export interface LabPreviewDraft {
  title: string;
  bio: string;
  image?: string | null;
  location?: string;
  experience?: string;
  rate?: string;
  skills?: LabPreviewSkill[];
  contact?: {
    phone?: string;
    email?: string;
    website?: string;
    instagram?: string;
    portfolio?: string;
    social?: string;
    noffer?: string;
  };
  /** The form's shared enrichment tags (languages/availability/rate/payments/photo). */
  extraTags?: string[][];
}

interface LabProfilePreviewProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  draft: LabPreviewDraft;
  heading: string;
  noun: string;
  accentText: string;
  accentChip: string;
  icon: React.ComponentType<{ className?: string }>;
}

/**
 * A "how it will look" preview of a Lab provider profile, built from the form's
 * current draft — the create flow is long and otherwise blind until publish.
 * Deliberately a faithful *card*, not the full detail page (which fetches the
 * published event).
 */
export function LabProfilePreview({
  open,
  onOpenChange,
  draft,
  heading,
  noun,
  accentText,
  accentChip,
  icon: Icon,
}: LabProfilePreviewProps) {
  const { t } = useTranslation();
  const extras = parseLabExtras({ tags: draft.extraTags ?? [] });

  const rateAmount = extras.rateAmount;
  const rateDisplay = rateAmount
    ? `${rateAmount} ${labOptionLabel(RATE_CURRENCIES, extras.rateCurrency ?? 'sats', t)}`
    : draft.rate;
  const unitKey = extras.rateUnit ? ALL_RATE_UNITS.find((u) => u.value === extras.rateUnit)?.key : undefined;
  const contact = draft.contact ?? {};
  const skills = (draft.skills ?? []).slice(0, 8);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] w-[calc(100vw-2rem)] max-w-lg overflow-y-auto bg-black border-white/10">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 uppercase font-black">
            <Eye className={`h-5 w-5 ${accentText}`} /> {t('labUi.preview.title')}
          </DialogTitle>
          <DialogDescription className="text-gray-400">
            {t('labUi.preview.desc', { noun })}
          </DialogDescription>
        </DialogHeader>

        <div className="rounded-2xl border-2 border-white/10 bg-white/[0.03] p-4">
          {/* Header */}
          <div className="flex items-start gap-3">
            <div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-2xl bg-white/5">
              {draft.image ? (
                <ImageWithFallback src={draft.image} alt={draft.title} className="h-full w-full object-cover" />
              ) : (
                <div className="flex h-full w-full items-center justify-center">
                  <Icon className={`h-7 w-7 ${accentText}`} />
                </div>
              )}
            </div>
            <div className="min-w-0 flex-1">
              <div className="flex flex-wrap items-center gap-2">
                <h3 className={`text-xl font-black uppercase ${accentText}`} style={{ fontFamily: 'Impact, "Arial Black", sans-serif' }}>
                  {draft.title || t('labUi.preview.untitled')}
                </h3>
                <Badge variant="outline" className={`gap-1 ${accentText}`}>
                  <Icon className="h-3 w-3" /> {heading}
                </Badge>
              </div>
              {draft.location && (
                <p className="mt-1 flex items-center gap-1 text-sm text-gray-400">
                  <MapPin className="h-3.5 w-3.5" /> {draft.location}
                </p>
              )}
            </div>
          </div>

          {/* Bio */}
          <p className="mt-3 whitespace-pre-wrap text-sm text-gray-300">
            {draft.bio || <span className="text-gray-600">{t('labUi.preview.noBio')}</span>}
          </p>

          {/* Skills */}
          {skills.length > 0 && (
            <div className="mt-3 flex flex-wrap gap-1.5">
              {skills.map((s) => (
                <span key={s.label} className={`rounded-full border px-2.5 py-1 text-xs font-bold ${accentChip}`}>
                  {s.label}
                </span>
              ))}
            </div>
          )}

          {/* Rate + experience */}
          {(rateDisplay || draft.experience) && (
            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-sm">
              {rateDisplay && (
                <span className="font-bold text-orange-400">
                  💰 {rateDisplay}{unitKey ? ` · ${t(unitKey)}` : ''}
                </span>
              )}
              {draft.experience && (
                <span className="text-gray-400">{t('labUi.preview.years', { count: draft.experience })}</span>
              )}
            </div>
          )}

          {/* Languages / availability / payments */}
          {(extras.languages.length > 0 || extras.availability.length > 0 || extras.paymentMethods.length > 0 || extras.payWhatYouCan) && (
            <div className="mt-3 space-y-2">
              {extras.languages.length > 0 && (
                <p className="flex flex-wrap items-center gap-2 text-xs text-gray-400">
                  <LanguagesIcon className="h-3.5 w-3.5" /> {extras.languages.join(', ')}
                </p>
              )}
              {extras.availability.length > 0 && (
                <div className="flex flex-wrap gap-1.5">
                  {extras.availability.map((v) => (
                    <span key={v} className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[11px] text-gray-400">
                      {labOptionLabel(AVAILABILITY_OPTIONS, v, t)}
                    </span>
                  ))}
                </div>
              )}
              {(extras.paymentMethods.length > 0 || extras.payWhatYouCan) && (
                <div className="flex flex-wrap items-center gap-1.5 text-xs text-gray-400">
                  <Banknote className="h-3.5 w-3.5" />
                  {extras.paymentMethods.map((m) => (
                    <span key={m} className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5">{labOptionLabel(PAYMENT_METHODS, m, t)}</span>
                  ))}
                  {extras.payWhatYouCan && (
                    <span className="rounded-full border border-white/10 bg-white/5 px-2 py-0.5">{t('labUi.detail.payWhatYouCan')}</span>
                  )}
                </div>
              )}
            </div>
          )}

          {/* Gallery preview */}
          {extras.photos.length > 0 && (
            <div className="mt-3 grid grid-cols-4 gap-1.5">
              {extras.photos.slice(0, 8).map((url) => (
                <div key={url} className="aspect-square overflow-hidden rounded-lg bg-white/5">
                  <ImageWithFallback src={url} alt="" className="h-full w-full object-cover" />
                </div>
              ))}
            </div>
          )}

          {/* Contact */}
          {(sanitizeUrl(contact.website) || sanitizeUrl(contact.portfolio) || sanitizeUrl(contact.social) || contact.email || contact.phone || contact.instagram) && (
            <div className="mt-3 flex flex-wrap gap-2 text-xs text-gray-400">
              {contact.phone && <span>📞 {contact.phone}</span>}
              {contact.email && <span>✉️ {contact.email}</span>}
              {sanitizeUrl(contact.website) && <span>🔗 {t('labUi.become.website')}</span>}
              {contact.instagram && <span>📷 {contact.instagram}</span>}
              {sanitizeUrl(contact.portfolio) && <span>🎨 {t('labUi.preview.portfolio')}</span>}
            </div>
          )}

          <p className="mt-4 border-t border-white/10 pt-3 text-[11px] text-gray-500">{t('labUi.preview.note')}</p>
        </div>
      </DialogContent>
    </Dialog>
  );
}