import Link from 'next/link'
import { redirect } from 'next/navigation'
import { getCurrentUser } from '@/lib/current-user'
import { getListingsByOwner } from '@/lib/listings'
import { ListingCard } from '@/components/terrano/ListingCard'
import { ListingActions } from '@/components/dashboard/ListingActions'
import { SectionHeader } from '@/components/terrano/SectionHeader'
import { Icon } from '@/components/terrano/Icon'

export const dynamic = 'force-dynamic'

export default async function DashboardPage() {
  const user = await getCurrentUser()
  if (!user) redirect('/login?next=/dashboard')

  const listings = await getListingsByOwner(user.id)
  const published = listings.filter((l) => l.status === 'PUBLISHED').length

  return (
    <div className="bleed" style={{ paddingTop: 36, paddingBottom: 48 }}>
      <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em' }}>
        <span style={{ color: 'var(--accent)' }}>▣</span> Mi panel
      </div>
      <h1 className="display" style={{ fontSize: 34, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 4 }}>
        Hola, {user.name.split(' ')[0]}
      </h1>
      <p style={{ color: 'var(--muted)', marginTop: 4 }}>
        {user.company ? `${user.company} · ` : ''}Gestiona tus publicaciones en Portal Minería.
      </p>

      {/* Stats + CTA */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 14, marginTop: 24 }}>
        {[
          [String(listings.length), 'Publicaciones'],
          [String(published), 'Activas'],
          [String(listings.filter((l) => l.verified).length), 'Verificadas'],
        ].map(([n, l]) => (
          <div key={l} className="card" style={{ padding: 18 }}>
            <div className="display" style={{ fontSize: 28, fontWeight: 600 }}>{n}</div>
            <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', marginTop: 4 }}>{l}</div>
          </div>
        ))}
        <Link href="/dashboard/publicar-activo" className="card" style={{ padding: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderColor: 'var(--accent)' }}>
          <Icon name="plus" size={20} color="var(--accent)" />
          <div>
            <div className="display" style={{ fontSize: 16, fontWeight: 600, marginTop: 8 }}>Publicar activo</div>
            <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--accent)', marginTop: 4 }}>Asistente de 7 pasos →</div>
          </div>
        </Link>
      </div>

      {/* Mis publicaciones */}
      <div style={{ marginTop: 48 }}>
        <SectionHeader kicker="Mis publicaciones" title={`${listings.length} activo${listings.length === 1 ? '' : 's'} publicado${listings.length === 1 ? '' : 's'}`} />
        {listings.length === 0 ? (
          <div style={{ padding: 48, textAlign: 'center', border: '1px dashed var(--line-soft)' }}>
            <div className="display" style={{ fontSize: 18, fontWeight: 600 }}>Aún no has publicado activos</div>
            <p style={{ color: 'var(--muted)', marginTop: 6, fontSize: 13 }}>Crea tu primera publicación con el asistente.</p>
            <Link href="/dashboard/publicar-activo" className="btn accent" style={{ marginTop: 16 }}>
              Publicar activo <Icon name="arrow-right" size={12} />
            </Link>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 18 }}>
            {listings.map((l) => (
              <div key={l.id} style={{ position: 'relative' }}>
                <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 2 }}>
                  <span
                    className="mono uppercase-wide"
                    style={{
                      fontSize: 9.5,
                      padding: '3px 7px',
                      background: l.status === 'PUBLISHED' ? 'var(--accent-3)' : 'var(--muted)',
                      color: '#fff',
                      letterSpacing: '0.06em',
                    }}
                  >
                    {l.status === 'PUBLISHED' ? '● Activa' : '○ Borrador'}
                  </span>
                </div>
                <ListingCard listing={l} />
                <ListingActions slug={l.slug} listingId={l.id} />
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}