'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import type { Session } from 'next-auth'
import AddBoatListingModal from '@/components/boats/AddBoatListingModal'
import LogoutButton from '@/components/auth/LogoutButton'
import type { UserListingSummary } from '@/lib/listings'

export default function ProfilShell({
  user,
  listings,
  editListingId,
}: {
  user: Session['user']
  listings: UserListingSummary[]
  editListingId: string | null
}) {
  const router = useRouter()

  if (!user) return null

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-100 to-slate-200 px-4 pb-16 pt-28">
      <div className="mx-auto max-w-2xl rounded-2xl border border-gray-200 bg-white p-8 shadow-lg">
        <h1 className="text-2xl font-bold text-gray-900">Moje konto</h1>
        <p className="mt-2 text-sm text-gray-600">
          Jesteś zalogowany jako <span className="font-medium text-gray-900">{user.email}</span>
        </p>
        {user.name ? (
          <p className="mt-1 text-sm text-gray-600">
            Nazwa: <span className="font-medium text-gray-900">{user.name}</span>
          </p>
        ) : null}

        <div className="mt-8 border-t border-gray-200 pt-6">
          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
            <h2 className="text-lg font-semibold text-gray-900">Moje ogłoszenia</h2>
            <AddBoatListingModal analyticsSource="profile" onPublished={() => router.refresh()} />
          </div>
          {listings.length === 0 ? (
            <p className="text-sm text-gray-600">
              Nie masz jeszcze ogłoszeń przypisanych do tego konta. Dodaj ogłoszenie ze strony głównej — zapisze się na
              zalogowanego użytkownika.
            </p>
          ) : (
            <ul className="space-y-3">
              {listings.map((l) => (
                <li
                  key={l.id}
                  className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-gray-100 bg-slate-50/80 px-3 py-2"
                >
                  <div className="min-w-0 flex-1">
                    <p className="truncate font-medium text-gray-900">{l.title || l.slug}</p>
                    <p className="text-xs text-gray-500">
                      {l.status}
                      {l.expiresAt ? ` · ważne do ${new Date(l.expiresAt).toLocaleDateString('pl-PL')}` : ''}
                    </p>
                  </div>
                  <div className="flex shrink-0 flex-wrap gap-2">
                    {l.status === 'active' ? (
                      <Link
                        href={`/sklep/${l.slug}`}
                        className="rounded-md border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-50"
                      >
                        Podgląd
                      </Link>
                    ) : null}
                    <Link
                      href={`/profil?edycja=${encodeURIComponent(l.id)}`}
                      className="rounded-md bg-blue-600 px-2 py-1 text-xs font-semibold text-white hover:bg-blue-700"
                    >
                      Edytuj
                    </Link>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="mt-8">
          <LogoutButton />
        </div>
      </div>

      <AddBoatListingModal
        showTriggerButton={false}
        autoEditListingId={editListingId}
        onAutoEditConsumed={() => router.replace('/profil')}
        onPublished={() => router.refresh()}
      />
    </div>
  )
}