import SecuritySection from '@/components/admin/user-management/user-details/profile/security-section';
import type { ProfileData } from '@/components/admin/user-management/user-details/profile/types';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import {
  CalendarBlankIcon,
  CityIcon,
  EnvelopeIcon,
  IdentificationCardIcon,
  LinkIcon,
  MapPinIcon,
  PencilSimpleIcon,
  PhoneIcon,
  UserIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

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

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({
  data,
  userId,
  onEdit,
}: {
  data: ProfileData;
  userId: number;
  onEdit: () => void;
}) {
  const { t } = useTranslation();

  return (
    <div className="space-y-4 py-4">
      <div className="flex flex-wrap items-center justify-between gap-2 px-1">
        <p className="text-sm text-black/40">{t('User profile information')}</p>
        <Button variant="outline" size="sm" 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-5 shadow-box">
          <SectionHeading title={t('Personal Information')} />
          <InfoRow
            icon={<UserIcon weight="bold" className="size-4" />}
            label={t('Full Name')}
            value={`${data.first_name} ${data.last_name}`}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<EnvelopeIcon weight="bold" className="size-4" />}
            label={t('Email Address')}
            value={
              <span className="flex flex-wrap items-center gap-2">
                {data.email}
                <Badge
                  variant={data.email_verified ? 'successSubtle' : 'warning'}
                  className="text-[10px]"
                >
                  {data.email_verified ? t('Verified') : t('Unverified')}
                </Badge>
              </span>
            }
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<PhoneIcon weight="bold" className="size-4" />}
            label={t('Phone Number')}
            value={data.phone || '-'}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<CalendarBlankIcon weight="bold" className="size-4" />}
            label={t('Date of Birth')}
            value={data.birth_date || '-'}
          />
          <Separator className="opacity-50" />
          <InfoRow
            icon={<IdentificationCardIcon weight="bold" className="size-4" />}
            label={t('KYC Status')}
            value={
              <Badge
                variant={data.kyc_verified ? 'successSubtle' : 'warning'}
                className="capitalize"
              >
                {data.kyc_verified ? t('Verified') : t('Unverified')}
              </Badge>
            }
          />
        </div>

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

      <div className="rounded-xl bg-white p-5 shadow-box">
        <SectionHeading title={t('Account Details')} />
        <div className="grid grid-cols-1 divide-y divide-black/5 md:grid-cols-3 md:divide-x md:divide-y-0">
          <div className="pb-3 md:pr-6 md:pb-0">
            <InfoRow
              icon={<CalendarBlankIcon weight="bold" className="size-4" />}
              label={t('Member Since')}
              value={data.member_since}
            />
          </div>
          <div className="py-3 md:px-6 md:py-0">
            <InfoRow
              icon={<LinkIcon weight="bold" className="size-4" />}
              label={t('Referral Code')}
              value={
                data.referral_code ? (
                  <code className="rounded bg-black/5 px-2 py-0.5 font-mono text-xs">
                    {data.referral_code}
                  </code>
                ) : (
                  '-'
                )
              }
            />
          </div>
          <div className="pt-3 md:pt-0 md:pl-6">
            <InfoRow
              icon={<UserIcon weight="bold" className="size-4" />}
              label={t('Referred By')}
              value={
                data.referred_by_name ? (
                  <span className="text-primary">{data.referred_by_name}</span>
                ) : (
                  '-'
                )
              }
            />
          </div>
        </div>
      </div>

      <SecuritySection userId={userId} />
    </div>
  );
}