carmanagement/apps/marketplace/src/app/renter/saved-companies/page.tsx

'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { RenterAuthError, loadRenterProfile, type SavedCompany } from '@/lib/renter'
import { useMarketplacePreferences } from '@/components/MarketplaceShell'

export default function RenterSavedCompaniesPage() {
  const router = useRouter()
  const { language } = useMarketplacePreferences()
  const dict = {
    en: {
      load: 'Could not load saved companies.',
      renter: 'Renter',
      title: 'Saved companies',
      back: 'Back to dashboard',
      loading: 'Loading saved companies…',
      empty: 'You have not saved any companies yet.',
      browse: 'Browse the marketplace',
      rentalCompany: 'Rental company',
    },
    fr: {
      load: 'Impossible de charger les entreprises sauvegardées.',
      renter: 'Client',
      title: 'Entreprises sauvegardées',
      back: 'Retour au dashboard',
      loading: 'Chargement des entreprises sauvegardées…',
      empty: 'Vous n’avez encore enregistré aucune entreprise.',
      browse: 'Parcourir la marketplace',
      rentalCompany: 'Société de location',
    },
    ar: {
      load: 'تعذر تحميل الشركات المحفوظة.',
      renter: 'المستأجر',
      title: 'الشركات المحفوظة',
      back: 'العودة إلى اللوحة',
      loading: 'جارٍ تحميل الشركات المحفوظة…',
      empty: 'لم تقم بحفظ أي شركة بعد.',
      browse: 'تصفح السوق',
      rentalCompany: 'شركة تأجير',
    },
  }[language]
  const [companies, setCompanies] = useState<SavedCompany[]>([])
  const [errorMsg, setErrorMsg] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    loadRenterProfile()
      .then((profile) => setCompanies(profile.savedCompanies ?? []))
      .catch((err) => {
        if (err instanceof RenterAuthError) {
          router.replace('/renter/sign-in')
          return
        }
        setErrorMsg(err instanceof Error ? err.message : dict.load)
      })
      .finally(() => setLoading(false))
  }, [router])

  return (
    <main className="min-h-screen bg-stone-50 py-10">
      <div className="shell space-y-6">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700">{dict.renter}</p>
            <h1 className="mt-1 text-3xl font-black tracking-tight text-stone-900">{dict.title}</h1>
          </div>
          <Link href="/renter/dashboard" className="rounded-full border border-stone-200 bg-white px-5 py-2.5 text-sm font-semibold text-stone-700">
            {dict.back}
          </Link>
        </div>

        {loading ? <div className="card p-8 text-sm text-stone-500">{dict.loading}</div> : null}
        {!loading && errorMsg ? <div className="card p-8 text-sm text-rose-600">{errorMsg}</div> : null}

        {!loading && !errorMsg && companies.length === 0 ? (
          <div className="card p-10 text-center">
            <p className="text-sm text-stone-500">{dict.empty}</p>
            <Link href="/explore" className="mt-5 inline-flex rounded-full bg-stone-900 px-6 py-2.5 text-sm font-semibold text-white">
              {dict.browse}
            </Link>
          </div>
        ) : null}

        {!loading && !errorMsg && companies.length > 0 ? (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {companies.map((company) => (
              <Link
                key={company.id}
                href={`/explore/${company.brand?.subdomain ?? company.id}`}
                className="card flex items-center gap-4 p-5 hover:border-amber-300 transition-colors"
              >
                {company.brand?.logoUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={company.brand.logoUrl} alt={company.brand.displayName} className="h-11 w-11 rounded-xl object-contain" />
                ) : (
                  <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-100 text-sm font-bold text-amber-700">
                    {company.brand?.displayName?.charAt(0) ?? '?'}
                  </div>
                )}
                <div className="min-w-0">
                  <p className="truncate text-sm font-semibold text-stone-900">{company.brand?.displayName ?? dict.rentalCompany}</p>
                  <p className="mt-1 truncate text-xs text-stone-400">{company.brand?.subdomain ?? company.id}</p>
                </div>
              </Link>
            ))}
          </div>
        ) : null}
      </div>
    </main>
  )
}