'use client';

import React, { useEffect, useMemo, useState } from 'react';
import {
  ImagePlus,
  Plus,
  Trash2,
  Upload,
  Instagram,
  ExternalLink,
  X,
  Eye,
  Layers,
  ChevronLeft,
  ChevronRight,
  Filter,
} from 'lucide-react';
import { PageHeader, Surface } from '@/components/ui';

type PipelineItem = {
  id: string;
  external_ref: string | null;
  title: string;
  format: 'post' | 'story' | 'reel' | 'carrusel';
  month: string | null;
  status: string;
  cover_path: string | null;
  cover_mime: string | null;
  slide_paths: string[];
  caption: string | null;
  notes: string | null;
  approved_at: string | null;
  created_at: string;
  updated_at: string;
};

const STATUS_LABEL: Record<string, string> = {
  propuesta: 'Propuesta',
  en_diseno: 'En diseño',
  revision_interna: 'Revisión interna',
  aprobado: 'Aprobado',
  rechazado: 'Rechazado',
  publicado: 'Publicado',
};

const STATUS_COLOR: Record<string, string> = {
  propuesta: 'bg-gray-100 text-gray-700 border-gray-200',
  en_diseno: 'bg-blue-100 text-blue-700 border-blue-200',
  revision_interna: 'bg-amber-100 text-amber-800 border-amber-200',
  aprobado: 'bg-emerald-100 text-emerald-700 border-emerald-200',
  rechazado: 'bg-red-100 text-red-700 border-red-200',
  publicado: 'bg-purple-100 text-purple-700 border-purple-200',
};

const FORMAT_CONFIG: Record<string, { label: string; badgeCls: string }> = {
  post: { label: 'Post', badgeCls: 'bg-blue-50 text-blue-700 border-blue-200' },
  carrusel: { label: 'Carrusel', badgeCls: 'bg-indigo-50 text-indigo-700 border-indigo-200' },
  reel: { label: 'Reel', badgeCls: 'bg-pink-50 text-pink-700 border-pink-200' },
  story: { label: 'Story', badgeCls: 'bg-amber-50 text-amber-700 border-amber-200' },
};

const AGENCY_STATUS_ORDER = [
  'propuesta',
  'en_diseno',
  'revision_interna',
  'aprobado',
  'rechazado',
  'publicado',
];

function mediaUrl(path: string | null) {
  if (!path) return null;
  return `/api/creative-pipeline/media?path=${encodeURIComponent(path)}`;
}

function monthLabel(m: string | null) {
  if (!m) return 'Sin mes';
  const [y, mm] = m.split('-');
  const d = new Date(Number(y), Number(mm) - 1, 1);
  return d.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });
}

function monthShortLabel(m: string | null) {
  if (!m) return 'Sin mes';
  const [y, mm] = m.split('-');
  const d = new Date(Number(y), Number(mm) - 1, 1);
  const name = d.toLocaleDateString('es-ES', { month: 'short' });
  return `${name} ${y.slice(2)}`;
}

function getInstagramUrl(notes: string | null): string | null {
  if (!notes) return null;
  const match = notes.match(/https?:\/\/(?:www\.)?instagram\.com\S+/i);
  return match ? match[0] : null;
}

export default function CreativePipelineBoard() {
  const [items, setItems] = useState<PipelineItem[]>([]);
  const [isAgency, setIsAgency] = useState(false);
  const [loading, setLoading] = useState(true);
  const [warning, setWarning] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [busyId, setBusyId] = useState<string | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [newTitle, setNewTitle] = useState('');
  const [newFormat, setNewFormat] = useState<PipelineItem['format']>('post');
  const [newMonth, setNewMonth] = useState('');
  const [selectedMonth, setSelectedMonth] = useState<string>('all');
  const [selectedFormat, setSelectedFormat] = useState<string>('all');
  const [previewItem, setPreviewItem] = useState<PipelineItem | null>(null);

  async function load() {
    setLoading(true);
    try {
      const res = await fetch('/api/creative-pipeline');
      const data = await res.json();
      setItems(data.items ?? []);
      setIsAgency(Boolean(data.isAgency));
      setWarning(data.warning ?? null);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    void load();
  }, []);

  const monthCounts = useMemo(() => {
    const map = new Map<string, number>();
    for (const it of items) {
      const key = it.month || 'sin-mes';
      map.set(key, (map.get(key) || 0) + 1);
    }
    return map;
  }, [items]);

  const months = useMemo(() => {
    const set = new Set<string>();
    for (const it of items) {
      if (it.month) set.add(it.month);
    }
    return Array.from(set).sort();
  }, [items]);

  const filteredItems = useMemo(() => {
    return items.filter((it) => {
      if (selectedMonth !== 'all' && (it.month || 'sin-mes') !== selectedMonth) return false;
      if (selectedFormat !== 'all' && it.format !== selectedFormat) return false;
      return true;
    });
  }, [items, selectedMonth, selectedFormat]);

  const grouped = useMemo(() => {
    const map = new Map<string, PipelineItem[]>();
    for (const it of filteredItems) {
      const key = it.month || 'sin-mes';
      if (!map.has(key)) map.set(key, []);
      map.get(key)!.push(it);
    }
    return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
  }, [filteredItems]);

  async function createItem(e: React.FormEvent) {
    e.preventDefault();
    if (!newTitle.trim()) return;
    setErr(null);
    const res = await fetch('/api/creative-pipeline', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title: newTitle, format: newFormat, month: newMonth || null }),
    });
    const data = await res.json();
    if (!res.ok) {
      setErr(data.error || 'Error al crear');
      return;
    }
    setNewTitle('');
    setNewMonth('');
    setShowForm(false);
    await load();
  }

  async function setStatus(id: string, status: string) {
    setBusyId(id);
    setErr(null);
    try {
      const res = await fetch('/api/creative-pipeline', {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, status }),
      });
      const data = await res.json();
      if (!res.ok) {
        setErr(data.error || 'Error al cambiar estado');
        return;
      }
      if (previewItem && previewItem.id === id) {
        setPreviewItem({ ...previewItem, status });
      }
      await load();
    } finally {
      setBusyId(null);
    }
  }

  async function removeItem(id: string) {
    setBusyId(id);
    try {
      await fetch(`/api/creative-pipeline?id=${encodeURIComponent(id)}`, { method: 'DELETE' });
      if (previewItem?.id === id) setPreviewItem(null);
      await load();
    } finally {
      setBusyId(null);
    }
  }

  async function uploadImage(
    itemId: string,
    file: File,
    slot: 'cover' | 'slide',
    index = 0
  ) {
    setBusyId(itemId);
    setErr(null);
    try {
      const fd = new FormData();
      fd.append('file', file);
      fd.append('itemId', itemId);
      fd.append('slot', slot);
      fd.append('index', String(index));
      const res = await fetch('/api/creative-pipeline/upload', { method: 'POST', body: fd });
      const data = await res.json();
      if (!res.ok) {
        setErr(data.error || 'Error al subir imagen');
        return;
      }
      await load();
    } finally {
      setBusyId(null);
    }
  }

  return (
    <div>
      <PageHeader
        eyebrow="Producción editorial"
        title="Panel de Creatividades"
        description="Planificación, diseño y archivo histórico sincronizado con Instagram."
        actions={
          isAgency ? (
            <button
              onClick={() => setShowForm((v) => !v)}
              className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white hover:bg-brand-700"
            >
              <Plus className="h-4 w-4" /> Nueva pieza
            </button>
          ) : null
        }
      />

      {warning ? (
        <div className="mb-4 rounded-lg bg-amber-50 border border-amber-200 px-3 py-2 text-sm text-amber-800">
          {warning}
        </div>
      ) : null}
      {err ? (
        <div className="mb-4 rounded-lg bg-red-50 border border-red-200 px-3 py-2 text-sm text-red-800">
          {err}
        </div>
      ) : null}

      {/* Barra de Filtros por Mes y Formato */}
      <div className="mb-6 space-y-3">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold uppercase tracking-wider text-gray-500">
              Meses ({items.length} piezas):
            </span>
          </div>
          <div className="flex items-center gap-1.5 text-xs text-gray-500">
            <Filter className="h-3.5 w-3.5" />
            Mostrando <strong>{filteredItems.length}</strong> de {items.length}
          </div>
        </div>

        {/* Meses pills */}
        <div className="flex flex-wrap gap-1.5">
          <button
            onClick={() => setSelectedMonth('all')}
            className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
              selectedMonth === 'all'
                ? 'bg-gray-900 text-white shadow-sm'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            Todos ({items.length})
          </button>
          {months.map((m) => {
            const count = monthCounts.get(m) || 0;
            const active = selectedMonth === m;
            return (
              <button
                key={m}
                onClick={() => setSelectedMonth(m)}
                className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
                  active
                    ? 'bg-brand-600 text-white shadow-sm'
                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                }`}
              >
                {monthShortLabel(m)} ({count})
              </button>
            );
          })}
        </div>

        {/* Formatos pills */}
        <div className="flex flex-wrap items-center gap-1.5 pt-1">
          <span className="text-xs text-gray-400 mr-1">Formato:</span>
          {['all', 'carrusel', 'reel', 'post', 'story'].map((f) => {
            const active = selectedFormat === f;
            const label =
              f === 'all'
                ? 'Todos los formatos'
                : FORMAT_CONFIG[f]?.label || f;
            return (
              <button
                key={f}
                onClick={() => setSelectedFormat(f)}
                className={`rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors ${
                  active
                    ? 'bg-gray-800 text-white'
                    : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
                }`}
              >
                {label}
              </button>
            );
          })}
        </div>
      </div>

      {showForm && isAgency ? (
        <Surface className="mb-6">
          <form onSubmit={createItem} className="flex flex-wrap items-end gap-3">
            <div>
              <label className="block text-xs font-medium text-gray-600">Título</label>
              <input
                value={newTitle}
                onChange={(e) => setNewTitle(e.target.value)}
                className="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm"
                placeholder="Certifica tu nivel"
              />
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600">Formato</label>
              <select
                value={newFormat}
                onChange={(e) => setNewFormat(e.target.value as PipelineItem['format'])}
                className="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm"
              >
                <option value="post">Post</option>
                <option value="story">Story</option>
                <option value="reel">Reel</option>
                <option value="carrusel">Carrusel</option>
              </select>
            </div>
            <div>
              <label className="block text-xs font-medium text-gray-600">Mes</label>
              <input
                type="month"
                value={newMonth}
                onChange={(e) => setNewMonth(e.target.value)}
                className="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm"
              />
            </div>
            <button
              type="submit"
              className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800"
            >
              Crear
            </button>
          </form>
        </Surface>
      ) : null}

      {loading ? (
        <p className="text-sm text-gray-500">Cargando creatividades…</p>
      ) : items.length === 0 ? (
        <Surface>
          <p className="text-sm text-gray-500">Todavía no hay piezas en el pipeline.</p>
        </Surface>
      ) : filteredItems.length === 0 ? (
        <Surface>
          <p className="text-sm text-gray-500">
            No hay piezas con los filtros seleccionados (Mes: {selectedMonth}, Formato: {selectedFormat}).
          </p>
        </Surface>
      ) : (
        <div className="space-y-8">
          {grouped.map(([month, monthItems]) => (
            <div key={month}>
              <div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-2">
                <h2 className="text-sm font-bold uppercase tracking-wider text-gray-700">
                  {monthLabel(month === 'sin-mes' ? null : month)}
                </h2>
                <span className="text-xs text-gray-500 font-medium">
                  {monthItems.length} {monthItems.length === 1 ? 'pieza' : 'piezas'}
                </span>
              </div>
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
                {monthItems.map((it) => (
                  <PieceCard
                    key={it.id}
                    item={it}
                    isAgency={isAgency}
                    busy={busyId === it.id}
                    onStatus={(s) => setStatus(it.id, s)}
                    onDelete={() => removeItem(it.id)}
                    onUpload={(file, slot, index) => uploadImage(it.id, file, slot, index)}
                    onPreview={() => setPreviewItem(it)}
                  />
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Modal de Detalle / Preview */}
      {previewItem && (
        <DetailModal
          item={previewItem}
          isAgency={isAgency}
          busy={busyId === previewItem.id}
          onClose={() => setPreviewItem(null)}
          onStatus={(s) => setStatus(previewItem.id, s)}
        />
      )}
    </div>
  );
}

function PieceCard({
  item,
  isAgency,
  busy,
  onStatus,
  onDelete,
  onUpload,
  onPreview,
}: {
  item: PipelineItem;
  isAgency: boolean;
  busy: boolean;
  onStatus: (status: string) => void;
  onDelete: () => void;
  onUpload: (file: File, slot: 'cover' | 'slide', index: number) => void;
  onPreview: () => void;
}) {
  const cover = mediaUrl(item.cover_path);
  const slides = item.slide_paths || [];
  const isCarrusel = item.format === 'carrusel';
  const formatInfo = FORMAT_CONFIG[item.format] || {
    label: item.format,
    badgeCls: 'bg-gray-100 text-gray-700 border-gray-200',
  };
  const igUrl = getInstagramUrl(item.notes);

  const clientCanDecide = !isAgency && item.status === 'revision_interna';

  return (
    <Surface padded={false} className="overflow-hidden flex flex-col group transition-shadow hover:shadow-md">
      {/* Portada / Imagen */}
      <div className="relative aspect-[4/5] bg-gray-100 overflow-hidden cursor-pointer" onClick={onPreview}>
        {cover ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={cover}
            alt={item.title}
            className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
          />
        ) : (
          <div className="flex h-full items-center justify-center text-gray-300">
            <ImagePlus className="h-10 w-10" />
          </div>
        )}

        {/* Badges superiores */}
        <div className="absolute top-2 left-2 flex items-center gap-1.5 pointer-events-none">
          <span
            className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider border shadow-sm ${formatInfo.badgeCls}`}
          >
            {isCarrusel && <Layers className="h-2.5 w-2.5" />}
            {formatInfo.label}
          </span>
          {isCarrusel && slides.length > 0 && (
            <span className="rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm">
              {slides.length} slides
            </span>
          )}
        </div>

        {/* Botón de vista rápida */}
        <button
          type="button"
          onClick={(e) => {
            e.stopPropagation();
            onPreview();
          }}
          className="absolute top-2 right-2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/75 transition-opacity"
          title="Ver detalle"
        >
          <Eye className="h-3.5 w-3.5" />
        </button>

        {/* Botón subir imagen agencia */}
        {isAgency ? (
          <label
            onClick={(e) => e.stopPropagation()}
            className="absolute bottom-2 right-2 cursor-pointer rounded-full bg-black/60 p-2 text-white hover:bg-black/80"
          >
            <Upload className="h-3.5 w-3.5" />
            <input
              type="file"
              accept="image/*"
              className="hidden"
              onChange={(e) => {
                const f = e.target.files?.[0];
                if (f) onUpload(f, 'cover', 0);
              }}
            />
          </label>
        ) : null}
      </div>

      {/* Tira de slides para carruseles */}
      {isCarrusel ? (
        <div className="flex gap-1 overflow-x-auto p-2 bg-gray-50 border-t border-gray-100">
          {Array.from({ length: Math.min(Math.max(slides.length, 1), 4) }).map((_, i) => {
            const url = mediaUrl(slides[i] || null);
            return (
              <div
                key={i}
                onClick={onPreview}
                className="relative h-14 w-11 shrink-0 overflow-hidden rounded bg-gray-200 cursor-pointer border border-gray-200"
              >
                {url ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={url} alt={`slide ${i + 1}`} className="h-full w-full object-cover" />
                ) : null}
                {isAgency ? (
                  <label
                    onClick={(e) => e.stopPropagation()}
                    className="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/0 hover:bg-black/40 text-transparent hover:text-white text-[10px]"
                  >
                    +
                    <input
                      type="file"
                      accept="image/*"
                      className="hidden"
                      onChange={(e) => {
                        const f = e.target.files?.[0];
                        if (f) onUpload(f, 'slide', i);
                      }}
                    />
                  </label>
                ) : null}
              </div>
            );
          })}
        </div>
      ) : null}

      {/* Contenido de la tarjeta */}
      <div className="flex flex-1 flex-col gap-2 p-3">
        <div className="flex items-start justify-between gap-2">
          <p
            onClick={onPreview}
            className="text-sm font-semibold text-gray-900 line-clamp-2 cursor-pointer hover:text-brand-600"
          >
            {item.title}
          </p>
          {isAgency ? (
            <button
              onClick={onDelete}
              disabled={busy}
              className="shrink-0 text-gray-400 hover:text-red-500"
              title="Eliminar"
            >
              <Trash2 className="h-4 w-4" />
            </button>
          ) : null}
        </div>

        <div className="flex flex-wrap items-center gap-1.5">
          <span
            className={`inline-flex w-fit rounded-full px-2 py-0.5 text-xs font-semibold border ${
              STATUS_COLOR[item.status] || 'bg-gray-100 text-gray-700 border-gray-200'
            }`}
          >
            {STATUS_LABEL[item.status] || item.status}
          </span>

          {igUrl && (
            <a
              href={igUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm hover:opacity-90"
              title="Abrir publicación original en Instagram"
            >
              <Instagram className="h-2.5 w-2.5" /> IG
              <ExternalLink className="h-2 w-2" />
            </a>
          )}
        </div>

        <div className="mt-auto pt-2">
          {isAgency ? (
            <select
              value={item.status}
              disabled={busy}
              onChange={(e) => onStatus(e.target.value)}
              className="w-full rounded-lg border border-gray-200 px-2 py-1.5 text-xs font-medium"
            >
              {AGENCY_STATUS_ORDER.map((s) => (
                <option key={s} value={s}>
                  {STATUS_LABEL[s]}
                </option>
              ))}
            </select>
          ) : clientCanDecide ? (
            <div className="flex gap-2">
              <button
                disabled={busy}
                onClick={() => onStatus('aprobado')}
                className="flex-1 rounded-lg bg-emerald-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-emerald-700"
              >
                Aprobar
              </button>
              <button
                disabled={busy}
                onClick={() => onStatus('rechazado')}
                className="flex-1 rounded-lg bg-red-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-red-700"
              >
                Rechazar
              </button>
            </div>
          ) : (
            <p className="text-xs text-gray-400">
              {item.status === 'aprobado'
                ? 'Aprobada por ti'
                : item.status === 'publicado'
                  ? 'Publicado en redes'
                  : 'Pendiente del equipo de 4Ventures'}
            </p>
          )}
        </div>
      </div>
    </Surface>
  );
}

function DetailModal({
  item,
  isAgency,
  busy,
  onClose,
  onStatus,
}: {
  item: PipelineItem;
  isAgency: boolean;
  busy: boolean;
  onClose: () => void;
  onStatus: (status: string) => void;
}) {
  const slides = item.slide_paths || [];
  const allImages = [item.cover_path, ...slides].filter(Boolean) as string[];
  const [activeIdx, setActiveIdx] = useState(0);

  const activePath = allImages[activeIdx] || item.cover_path;
  const currentUrl = mediaUrl(activePath);
  const igUrl = getInstagramUrl(item.notes);
  const formatInfo = FORMAT_CONFIG[item.format] || {
    label: item.format,
    badgeCls: 'bg-gray-100 text-gray-700 border-gray-200',
  };

  const clientCanDecide = !isAgency && item.status === 'revision_interna';

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
      onClick={onClose}
    >
      <div
        className="flex max-h-[92vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl md:flex-row"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Lado izquierdo: visor de imagen / slider */}
        <div className="flex flex-1 flex-col bg-gray-900 p-4">
          <div className="relative flex flex-1 items-center justify-center overflow-hidden rounded-lg bg-black/40 min-h-[300px]">
            {currentUrl ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={currentUrl}
                alt={item.title}
                className="max-h-[60vh] max-w-full object-contain"
              />
            ) : (
              <div className="flex flex-col items-center gap-2 text-gray-500">
                <ImagePlus className="h-12 w-12" />
                <span className="text-xs">Sin imagen cargada</span>
              </div>
            )}

            {allImages.length > 1 && (
              <>
                <button
                  type="button"
                  onClick={() => setActiveIdx((prev) => (prev > 0 ? prev - 1 : allImages.length - 1))}
                  className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/60 p-1.5 text-white hover:bg-black/90"
                >
                  <ChevronLeft className="h-5 w-5" />
                </button>
                <button
                  type="button"
                  onClick={() => setActiveIdx((prev) => (prev < allImages.length - 1 ? prev + 1 : 0))}
                  className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/60 p-1.5 text-white hover:bg-black/90"
                >
                  <ChevronRight className="h-5 w-5" />
                </button>
                <div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/60 px-2 py-0.5 text-xs text-white">
                  {activeIdx + 1} / {allImages.length}
                </div>
              </>
            )}
          </div>

          {/* Miniaturas de slides */}
          {allImages.length > 1 && (
            <div className="mt-3 flex gap-2 overflow-x-auto py-1">
              {allImages.map((path, idx) => {
                const url = mediaUrl(path);
                const isSelected = idx === activeIdx;
                return (
                  <button
                    key={idx}
                    type="button"
                    onClick={() => setActiveIdx(idx)}
                    className={`relative h-16 w-12 shrink-0 overflow-hidden rounded border-2 transition-all ${
                      isSelected ? 'border-brand-500 scale-105' : 'border-transparent opacity-60 hover:opacity-100'
                    }`}
                  >
                    {url && (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img src={url} alt={`Slide ${idx + 1}`} className="h-full w-full object-cover" />
                    )}
                  </button>
                );
              })}
            </div>
          )}
        </div>

        {/* Lado derecho: información, caption y acciones */}
        <div className="flex w-full flex-col justify-between p-6 md:w-96 border-t md:border-t-0 md:border-l border-gray-100 overflow-y-auto">
          <div className="space-y-4">
            <div className="flex items-start justify-between gap-2">
              <div className="flex flex-wrap items-center gap-2">
                <span
                  className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-bold uppercase tracking-wider border ${formatInfo.badgeCls}`}
                >
                  {formatInfo.label}
                </span>
                <span
                  className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold border ${
                    STATUS_COLOR[item.status] || 'bg-gray-100 text-gray-700'
                  }`}
                >
                  {STATUS_LABEL[item.status] || item.status}
                </span>
              </div>
              <button
                type="button"
                onClick={onClose}
                className="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <div>
              <h3 className="text-base font-bold text-gray-900 leading-snug">{item.title}</h3>
              <p className="mt-1 text-xs text-gray-500">
                {monthLabel(item.month)} {item.external_ref ? `· Ref: ${item.external_ref}` : ''}
              </p>
            </div>

            {igUrl && (
              <a
                href={igUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 px-3 py-2 text-xs font-bold text-white shadow-sm hover:opacity-95"
              >
                <Instagram className="h-4 w-4" />
                <span>Ver publicación original en Instagram</span>
                <ExternalLink className="h-3 w-3 ml-auto" />
              </a>
            )}

            {item.caption && (
              <div className="space-y-1">
                <p className="text-xs font-semibold text-gray-700 uppercase tracking-wider">Texto / Copy</p>
                <div className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-xs text-gray-800 whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto">
                  {item.caption}
                </div>
              </div>
            )}
          </div>

          <div className="mt-6 border-t border-gray-100 pt-4">
            {isAgency ? (
              <div className="space-y-2">
                <label className="block text-xs font-semibold text-gray-600">Cambiar estado (Agencia):</label>
                <select
                  value={item.status}
                  disabled={busy}
                  onChange={(e) => onStatus(e.target.value)}
                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-xs font-medium"
                >
                  {AGENCY_STATUS_ORDER.map((s) => (
                    <option key={s} value={s}>
                      {STATUS_LABEL[s]}
                    </option>
                  ))}
                </select>
              </div>
            ) : clientCanDecide ? (
              <div className="space-y-2">
                <p className="text-xs font-semibold text-gray-600">Tu decisión como cliente:</p>
                <div className="flex gap-2">
                  <button
                    disabled={busy}
                    onClick={() => onStatus('aprobado')}
                    className="flex-1 rounded-lg bg-emerald-600 px-3 py-2 text-xs font-bold text-white hover:bg-emerald-700"
                  >
                    Aprobar pieza
                  </button>
                  <button
                    disabled={busy}
                    onClick={() => onStatus('rechazado')}
                    className="flex-1 rounded-lg bg-red-600 px-3 py-2 text-xs font-bold text-white hover:bg-red-700"
                  >
                    Solicitar cambios
                  </button>
                </div>
              </div>
            ) : (
              <p className="text-center text-xs text-gray-500">
                {item.status === 'aprobado'
                  ? '✓ Esta pieza fue aprobada por el cliente.'
                  : item.status === 'publicado'
                    ? '✓ Esta pieza está publicada y archivada.'
                    : 'En proceso con el equipo de 4Ventures.'}
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}