'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useI18n } from '../../components/I18nProvider';

type MyListing = {
  id: string;
  status: string;
  translations: { title: string; slug: string; locale: string }[];
};

export default function MyListingsPage() {
  const { t } = useI18n();
  const [listings, setListings] = useState<MyListing[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState<string | null>(null);
  const [actionId, setActionId] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/listings/mine', { cache: 'no-store' })
      .then((res) => res.json())
      .then((data) => {
        if (data.error) {
          setError(data.error);
        } else {
          setListings(data.listings ?? []);
        }
      })
      .catch(() => setError('Failed to load'))
      .finally(() => setLoading(false));
  }, []);

  async function removeListing(listingId: string) {
    if (!window.confirm(t('removeConfirm'))) return;
    setActionId(listingId);
    setError(null);
    setMessage(null);
    try {
      const res = await fetch('/api/listings/remove', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ listingId }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || 'Failed to remove listing');
      } else {
        setMessage(t('removed'));
        setListings((prev) => prev.map((l) => (l.id === listingId ? { ...l, status: 'REMOVED' } : l)));
      }
    } catch (e) {
      setError('Failed to remove listing');
    } finally {
      setActionId(null);
    }
  }

  if (loading) {
    return (
      <main className="panel" style={{ maxWidth: 720, margin: '40px auto' }}>
        <h1>{t('myListingsTitle')}</h1>
        <p>{t('loading')}</p>
      </main>
    );
  }

  if (error) {
    return (
      <main className="panel" style={{ maxWidth: 720, margin: '40px auto' }}>
        <h1>{t('myListingsTitle')}</h1>
        <p style={{ color: 'red' }}>{error}</p>
      </main>
    );
  }

  return (
    <main className="panel" style={{ maxWidth: 720, margin: '40px auto' }}>
      <h1>{t('myListingsTitle')}</h1>
      {message ? <p style={{ color: 'green' }}>{message}</p> : null}
      <div style={{ marginBottom: 12 }}>
        <Link href="/listings/new" className="button secondary">
          {t('createNewListing')}
        </Link>
      </div>
      {listings.length === 0 ? (
        <p>
          {t('noListings')}{' '}
          <Link href="/listings/new">
            {t('createOne')}
          </Link>
          .
        </p>
      ) : (
        <ul style={{ listStyle: 'none', padding: 0, display: 'grid', gap: 10 }}>
          {listings.map((l) => (
            <li key={l.id} style={{ border: '1px solid #ddd', borderRadius: 8, padding: 12 }}>
              <div>
                <strong>{l.translations[0]?.title ?? 'Listing'}</strong> — {t('statusLabel')}: {l.status}
              </div>
              <div style={{ fontSize: 12, color: '#666' }}>
                {t('slugsLabel')}: {l.translations.map((t) => `${t.slug} (${t.locale})`).join(', ')}
              </div>
              <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
                <Link href={`/listings/edit/${l.id}`} className="button secondary">
                  {t('edit')}
                </Link>
                {l.status !== 'DRAFT' ? (
                  <Link href={`/listings/${l.translations[0]?.slug ?? ''}`} className="button secondary">
                    {t('view')}
                  </Link>
                ) : null}
                <button className="button secondary" onClick={() => removeListing(l.id)} disabled={actionId === l.id}>
                  {actionId === l.id ? t('removing') : t('remove')}
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}