import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import type { User } from '@/types';
import { getImageUrl } from '@/utils/getImageUrl';
import {
  CalendarBlankIcon,
  CityIcon,
  EnvelopeIcon,
  MapPinIcon,
  PencilSimpleIcon,
  PhoneIcon,
  UserIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

function SectionHeading({ title }: { title: string }) {
  return (
    <>
      <h4 className="mb-1 text-xs font-semibold tracking-widest text-black/30 uppercase">
        {title}
      </h4>
      <Separator className="mb-4" />
    </>
  );
}

function InfoRow({
  icon,
  label,
  value,
}: {
  icon: React.ReactNode;
  label: string;
  value: React.ReactNode;
}) {
  return (
    <div className="flex items-start gap-3 py-3">
      <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-black/5 text-black/50">
        {icon}
      </div>
      <div className="min-w-0 flex-1">
        <p className="mb-0.5 text-xs font-medium tracking-wide text-black/40 uppercase">
          {label}
        </p>
        <div className="text-sm font-medium text-black/80">{value || '-'}</div>
      </div>
    </div>
  );
}

export default function ProfileView({
  user,
  onEdit,
}: {
  user: User;
  onEdit: () => void;
}) {
  const { t } = useTranslation();

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-4 rounded-xl bg-white p-6 shadow-box">
        <Avatar className="size-16 rounded-full">
          <AvatarImage
            src={getImageUrl(user.profile?.profile_photo)}
            alt={user.name}
          />
          <AvatarFallback className="text-lg">
            {user.name?.charAt(0)}
          </AvatarFallback>
        </Avatar>
        <div className="flex-1">
          <p className="text-lg font-semibold">{user.name}</p>
          <p className="text-sm text-black/50">{user.email}</p>
        </div>
        <Button variant="outline" onClick={onEdit}>
          <PencilSimpleIcon weight="bold" className="size-4" />
          {t('Edit Profile')}
        </Button>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div className="rounded-xl bg-white p-6 shadow-box">
          <SectionHeading title={t('Personal Information')} />
          <InfoRow
            icon={<UserIcon weight="bold" className="size-4" />}
            label={t('First Name')}
            value={user.first_name}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<UserIcon weight="bold" className="size-4" />}
            label={t('Last Name')}
            value={user.last_name}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<EnvelopeIcon weight="bold" className="size-4" />}
            label={t('Email Address')}
            value={user.email}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<PhoneIcon weight="bold" className="size-4" />}
            label={t('Phone')}
            value={user.profile?.phone}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<CalendarBlankIcon weight="bold" className="size-4" />}
            label={t('Date of Birth')}
            value={user.profile?.birth_date}
          />
        </div>

        <div className="rounded-xl bg-white p-6 shadow-box">
          <SectionHeading title={t('Location')} />
          <InfoRow
            icon={<MapPinIcon weight="bold" className="size-4" />}
            label={t('Country')}
            value={user.profile?.country}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<CityIcon weight="bold" className="size-4" />}
            label={t('City')}
            value={user.profile?.city}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<MapPinIcon weight="bold" className="size-4" />}
            label={t('Zip Code')}
            value={user.profile?.zip_code}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<MapPinIcon weight="bold" className="size-4" />}
            label={t('Address')}
            value={user.profile?.address}
          />
        </div>
      </div>
    </div>
  );
}