"use client";

import Link from "next/link";
import { Building2, MapPin, Globe, TrendingUp } from "lucide-react";
import { EntityQuickActions } from "@/components/market/entity-quick-actions";
import { Badge } from "@/components/ui/badge";
import { PriorityBadge } from "@/lib/status-badges";
import { useLocale } from "@/components/providers/locale-provider";

export function CompanyProfileHero({
  id,
  company,
}: {
  id: string;
  company: Record<string, unknown>;
}) {
  const { locale } = useLocale();
  const nameAr = String(company.nameAr ?? "");
  const nameEn = company.nameEn ? String(company.nameEn) : null;

  return (
    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-[var(--shadow)]">
      <div className="h-28 sm:h-36" style={{ background: "var(--gradient-brand)" }} />
      <div className="relative px-4 pb-6 sm:px-8">
        <div className="-mt-12 flex flex-col gap-4 sm:-mt-14 sm:flex-row sm:items-end sm:justify-between">
          <div className="flex gap-4">
            <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl border-4 border-card bg-muted shadow-lg sm:h-24 sm:w-24">
              <Building2 className="h-10 w-10 text-primary" />
            </div>
            <div className="min-w-0 pt-2 sm:pt-4">
              <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">{nameAr}</h1>
              {nameEn ? (
                <p className="text-muted-foreground">{nameEn}</p>
              ) : null}
              <div className="mt-2 flex flex-wrap gap-2">
                {company.sector ? (
                  <Badge variant="secondary">{String(company.sector)}</Badge>
                ) : null}
                {company.city ? (
                  <Badge variant="secondary" className="gap-1">
                    <MapPin className="h-3 w-3" />
                    {String(company.city)}
                  </Badge>
                ) : null}
                <PriorityBadge value={String(company.priority ?? "unknown")} />
                <Badge variant="default" className="gap-1">
                  <TrendingUp className="h-3 w-3" />
                  {locale === "ar" ? "نقاط" : "Score"}: {String(company.leadScore ?? 0)}
                </Badge>
              </div>
            </div>
          </div>
          <EntityQuickActions
            entityType="company"
            entityId={id}
            entityLabel={nameAr}
            segmentTargetType="companies"
          />
        </div>
        {(Boolean(company.website) || Boolean(company.linkedinUrl)) ? (
          <div className="mt-4 flex flex-wrap gap-3 text-sm">
            {company.website ? (
              <a
                href={String(company.website).startsWith("http") ? String(company.website) : `https://${company.website}`}
                target="_blank"
                rel="noreferrer"
                className="inline-flex items-center gap-1 text-primary hover:underline"
              >
                <Globe className="h-4 w-4" />
                {String(company.website)}
              </a>
            ) : null}
          </div>
        ) : null}
        <Link
          href="/market/companies"
          className="mt-4 inline-block text-sm text-muted-foreground hover:text-primary"
        >
          {locale === "ar" ? "← العودة للشركات" : "← Back to companies"}
        </Link>
      </div>
    </div>
  );
}