import Link from "next/link";
import Image from "next/image";
import {getTranslations} from "next-intl/server";
import {prisma} from "@/lib/db/prisma";
import {Card, CardContent} from "@/components/ui/card";
import {Building2, MapPin, Car, GitBranch} from "lucide-react";

export default async function CompaniesPage() {
  const t = await getTranslations("companies");

  const companies = await prisma.tenant.findMany({
    where: {status: "ACTIVE", isPublicListingEnabled: true},
    include: {
      _count: {
        select: {
          vehicles: {where: {isPublic: true, status: "AVAILABLE"}},
          branches: {where: {isActive: true}}
        }
      }
    },
    orderBy: {name: "asc"}
  });

  return (
    <div className="mx-auto max-w-7xl px-6 py-10">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-slate-900">{t("title")}</h1>
        <p className="mt-2 text-slate-600">{t("subtitle")}</p>
      </div>

      {companies.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-slate-300 py-24 text-center">
          <Building2 className="mx-auto h-12 w-12 text-slate-300" />
          <p className="mt-3 text-slate-500">No companies available yet</p>
        </div>
      ) : (
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {companies.map((company) => (
            <Link key={company.id} href={`/companies/${company.slug}`}>
              <Card className="group overflow-hidden border-slate-200 transition hover:-translate-y-1 hover:shadow-lg">
                <div className="flex h-32 items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
                  {company.logoUrl ? (
                    <Image
                      src={company.logoUrl}
                      alt={company.name}
                      width={120}
                      height={80}
                      className="object-contain"
                      unoptimized
                    />
                  ) : (
                    <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-white shadow-sm border border-slate-200">
                      <Building2 className="h-10 w-10 text-slate-400" />
                    </div>
                  )}
                </div>
                <CardContent className="p-5">
                  <h2 className="font-bold text-slate-900 text-lg">{company.name}</h2>
                  {company.city && (
                    <div className="mt-1 flex items-center gap-1 text-sm text-slate-500">
                      <MapPin className="h-4 w-4" />
                      {company.city}
                    </div>
                  )}
                  <div className="mt-4 flex gap-4">
                    <div className="flex items-center gap-2 text-sm text-slate-600">
                      <Car className="h-4 w-4 text-blue-600" />
                      <span><strong>{company._count.vehicles}</strong> {t("vehicles")}</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-slate-600">
                      <GitBranch className="h-4 w-4 text-green-600" />
                      <span><strong>{company._count.branches}</strong> {t("branches")}</span>
                    </div>
                  </div>
                  <div className="mt-4 rounded-lg bg-blue-50 px-4 py-2 text-center text-sm font-medium text-blue-700 transition group-hover:bg-blue-600 group-hover:text-white">
                    {t("viewFleet")}
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}