"use client";

import Link from "next/link";
import { UserCircle, Building2, Mail, Phone, BadgeCheck } from "lucide-react";
import { EntityQuickActions } from "@/components/market/entity-quick-actions";
import { ProfileLink, resolvePopulatedCompany } from "@/components/market/profile-tables";
import { Badge } from "@/components/ui/badge";
import { useLocale } from "@/components/providers/locale-provider";

export function PersonProfileHero({
  id,
  person,
}: {
  id: string;
  person: Record<string, unknown>;
}) {
  const { locale } = useLocale();
  const fullName = String(person.fullName ?? "");
  const company = resolvePopulatedCompany(person.companyId);
  const isDM =
    person.isDecisionMaker === "yes" || person.isDecisionMaker === true;

  return (
    <div className="overflow-hidden rounded-2xl border border-border bg-card shadow-[var(--shadow)]">
      <div className="h-24 sm:h-32" style={{ background: "var(--gradient-brand)" }} />
      <div className="relative px-4 pb-6 sm:px-8">
        <div className="-mt-14 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div className="flex gap-4">
            <div className="flex h-24 w-24 shrink-0 items-center justify-center rounded-full border-4 border-card bg-gradient-to-br from-primary/20 to-accent/20 shadow-lg">
              <UserCircle className="h-14 w-14 text-primary" />
            </div>
            <div className="min-w-0 pt-6">
              <h1 className="text-2xl font-bold sm:text-3xl">{fullName}</h1>
              {person.jobTitle ? (
                <p className="text-lg text-muted-foreground">{String(person.jobTitle)}</p>
              ) : null}
              {company ? (
                <p className="mt-1 flex items-center gap-1 text-sm">
                  <Building2 className="h-4 w-4 text-muted-foreground" />
                  <ProfileLink href={`/market/companies/${company.id}`}>
                    {company.nameAr ?? company.nameEn}
                  </ProfileLink>
                </p>
              ) : null}
              <div className="mt-2 flex flex-wrap gap-2">
                {isDM ? (
                  <Badge variant="success" className="gap-1">
                    <BadgeCheck className="h-3 w-3" />
                    {locale === "ar" ? "صانع قرار" : "Decision maker"}
                  </Badge>
                ) : null}
                {person.dataConfidence ? (
                  <Badge variant="secondary">{String(person.dataConfidence)}</Badge>
                ) : null}
              </div>
            </div>
          </div>
          <div className="flex flex-wrap gap-2">
            {person.email ? (
              <a
                href={`mailto:${person.email}`}
                className="inline-flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2 text-sm hover:bg-muted"
              >
                <Mail className="h-4 w-4 text-primary" />
                {String(person.email)}
              </a>
            ) : null}
            {person.mobile ? (
              <span className="inline-flex items-center gap-2 rounded-lg border border-border bg-muted/50 px-3 py-2 text-sm">
                <Phone className="h-4 w-4 text-primary" />
                {String(person.mobile)}
              </span>
            ) : null}
            <EntityQuickActions
              entityType="person"
              entityId={id}
              entityLabel={fullName}
              segmentTargetType="people"
            />
          </div>
        </div>
        <Link
          href="/market/people"
          className="mt-4 inline-block text-sm text-muted-foreground hover:text-primary"
        >
          {locale === "ar" ? "← العودة للأشخاص" : "← Back to people"}
        </Link>
      </div>
    </div>
  );
}