/**
 * Creatividades multi-tenant — lista vía /api/creatives (RLS).
 */
'use client';

import React, { FormEvent, useEffect, useState } from 'react';
import { Image as ImageIcon, Plus } from 'lucide-react';

type Creative = {
  id: string;
  title: string;
  status: string;
  created_at?: string;
};

export default function CreativesPage() {
  const [creatives, setCreatives] = useState<Creative[]>([]);
  const [title, setTitle] = useState('');
  const [warning, setWarning] = useState<string | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  async function load() {
    setLoading(true);
    const res = await fetch('/api/creatives');
    const data = await res.json();
    setCreatives(data.creatives ?? []);
    setWarning(data.warning ?? null);
    setLoading(false);
  }

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

  async function create(e: FormEvent) {
    e.preventDefault();
    setErr(null);
    const res = await fetch('/api/creatives', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title }),
    });
    const data = await res.json();
    if (!res.ok) {
      setErr(data.error ?? 'Error al crear');
      return;
    }
    setTitle('');
    await load();
  }

  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold tracking-tight text-white">
          Creatividades
        </h2>
        <p className="text-sm text-gray-400 mt-1">
          Borradores del cliente en contexto (selector arriba). Con superadmin
          activo, ves/creas en ese tenant.
        </p>
      </div>

      {warning && (
        <p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">
          {warning}
        </p>
      )}
      {err && <p className="text-xs text-red-400">{err}</p>}

      <form onSubmit={create} className="flex gap-3 items-end">
        <div className="flex-1">
          <label className="text-[11px] uppercase text-gray-500">Título</label>
          <input
            className="mt-1 w-full rounded-lg bg-gray-900 border border-gray-700 px-3 py-2 text-sm text-white"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Video Meta · testimonial"
            required
          />
        </div>
        <button
          type="submit"
          className="inline-flex items-center gap-2 rounded-lg bg-brand-500/90 hover:bg-brand-500 px-4 py-2 text-sm font-medium text-white"
        >
          <Plus className="w-4 h-4" /> Crear borrador
        </button>
      </form>

      {loading ? (
        <p className="text-sm text-gray-500">Cargando…</p>
      ) : creatives.length === 0 ? (
        <div className="bg-[#111827] border border-dashed border-gray-700 rounded-xl p-12 text-center">
          <ImageIcon className="w-10 h-10 text-gray-600 mx-auto mb-3" />
          <p className="text-gray-300 font-medium">Sin creatividades aún</p>
        </div>
      ) : (
        <ul className="space-y-2">
          {creatives.map((c) => (
            <li
              key={c.id}
              className="flex justify-between items-center bg-[#111827] border border-gray-800 rounded-lg px-4 py-3"
            >
              <span className="text-sm text-white">{c.title}</span>
              <span className="text-[10px] uppercase tracking-wider text-gray-400">
                {c.status}
              </span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}