edr-platform/apps/edr-freight-web/portal/src/pages/ProfilePage.tsx

import { User, Building2, Phone, Mail, MapPin, ShieldCheck, Briefcase, UserCheck, Fingerprint, FileCheck, Globe, Building } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { api } from "@/services/api";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, Badge, Separator } from "@edr/ui-common";

function InfoItem({ icon, label, value }: { icon?: React.ReactNode; label: string; value?: string | null }) {
  return (
    <div className="flex items-start gap-3">
      {icon && <div className="mt-1 text-muted-foreground [&_svg]:size-4">{icon}</div>}
      <div className="flex flex-col gap-0.5">
        <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground">{label}</p>
        <p className="text-sm font-bold text-foreground">{value || "—"}</p>
      </div>
    </div>
  );
}

export default function ProfilePage() {
  const { data: profile, isPending } = useQuery(
    api.companies.getProfile.queryOptions(),
  );

  if (isPending) {
    return (
      <div className="flex h-full items-center justify-center">
        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
      </div>
    );
  }

  if (!profile) {
    return (
      <div className="flex h-full items-center justify-center">
        <p className="text-muted-foreground">No company profile found.</p>
      </div>
    );
  }

  return (
    <div className="px-4 py-8">
      <div className="mx-auto max-w-7xl">
        <div className="flex flex-col gap-8">
          {/* Header */}
          <div className="flex items-center gap-6">
            <div className="flex size-24 items-center justify-center rounded-2xl bg-primary/10 text-primary shadow-inner">
              <User className="size-12" />
            </div>
            <div className="flex flex-col gap-1">
              <div className="flex items-center gap-3">
                <h1 className="text-3xl font-black tracking-tight text-foreground">
                  {profile.companyName}
                </h1>
                <Badge variant="secondary" className="font-bold uppercase tracking-wider">
                  Verified
                </Badge>
              </div>
              <p className="flex items-center gap-2 font-medium text-muted-foreground">
                <Building className="size-4" />
                {profile.companyName}
              </p>
            </div>
          </div>

          <Separator />

          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
            {/* Left Column */}
            <div className="flex flex-col gap-8 lg:col-span-2">
              <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
                {/* Company Details */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Building2 className="size-5 text-primary" />
                      Company Details
                    </CardTitle>
                    <CardDescription>Business registration information</CardDescription>
                  </CardHeader>
                  <CardContent className="flex flex-col gap-4">
                    <InfoItem icon={<Globe />} label="Location" value={profile.companyLocation} />
                    <InfoItem icon={<MapPin />} label="Address" value={profile.companyAddress} />
                    <InfoItem icon={<FileCheck />} label="TIN Number" value={profile.tinNumber} />
                    <InfoItem icon={<ShieldCheck />} label="FAN Number" value={profile.fanNumber} />
                    <InfoItem icon={<Mail />} label="Email" value={profile.companyEmail} />
                    <InfoItem icon={<Phone />} label="Phone" value={profile.companyPhone} />
                  </CardContent>
                </Card>

                {/* Personal Details (from ExternalProfile) */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Fingerprint className="size-5 text-primary" />
                      Profile Details
                    </CardTitle>
                    <CardDescription>Your linked user profile</CardDescription>
                  </CardHeader>
                  <CardContent className="flex flex-col gap-4">
                    <InfoItem icon={<User />} label="Profile" value="Primary Contact" />
                  </CardContent>
                </Card>
              </div>

              {/* Personnel Card */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Briefcase className="size-5 text-primary" />
                    Key Personnel
                  </CardTitle>
                  <CardDescription>Management and contact persons</CardDescription>
                </CardHeader>
                <CardContent className="grid grid-cols-1 gap-8 md:grid-cols-2">
                  <div className="flex flex-col gap-4">
                    <h3 className="border-l-4 border-primary pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
                      Contact Person
                    </h3>
                    <div className="flex flex-col gap-3 pl-4">
                      <InfoItem label="Name" value={profile.contactPersonName} />
                      <InfoItem label="Phone" value={profile.contactPersonPhone} />
                    </div>
                  </div>
                  <div className="flex flex-col gap-4">
                    <h3 className="border-l-4 border-accent pl-3 text-sm font-bold uppercase tracking-wide text-foreground">
                      General Manager
                    </h3>
                    <div className="flex flex-col gap-3 pl-4">
                      <InfoItem label="Name" value={profile.generalManagerName} />
                      <InfoItem label="Email" value={profile.generalManagerEmail} />
                      <InfoItem label="Phone" value={profile.generalManagerPhone} />
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Power of Attorney */}
              {profile.poaName && (
                <Card className="border-dashed">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <UserCheck className="size-5 text-accent" />
                      Power of Attorney
                    </CardTitle>
                    <CardDescription>Authorized representative details</CardDescription>
                  </CardHeader>
                  <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <InfoItem label="PoA Name" value={profile.poaName} />
                    <InfoItem label="PoA Email" value={profile.poaEmail} />
                    <InfoItem label="PoA Phone" value={profile.poaPhone} />
                    <InfoItem label="PoA Location" value={profile.poaLocation} />
                  </CardContent>
                </Card>
              )}
            </div>

            {/* Right Column */}
            <div className="flex flex-col gap-8">
              <Card className="relative overflow-hidden border-none bg-foreground text-background shadow-xl">
                <div className="absolute right-0 top-0 p-4 opacity-10">
                  <ShieldCheck className="size-32" />
                </div>
                <CardContent className="relative z-10 flex flex-col gap-4 px-6 py-8">
                  <h3 className="text-xl font-black">Secure Account</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground/80">
                    Your information is protected by enterprise-grade security.
                    Contact support for verified information updates.
                  </p>
                  <div className="pt-2">
                    <a
                      href="/settings"
                      className="inline-flex h-9 items-center justify-center rounded-md bg-background px-4 text-sm font-medium text-foreground hover:bg-background/90"
                    >
                      Edit Settings
                    </a>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}