import React from 'react';
import { TooltipProvider } from '@/components/ui/tooltip';
import { OwnerProfileHero } from './owner-profile-hero';
import { OwnerStatsBar } from './owner-stats-bar';
import {
  OwnerAboutCard,
  OwnerAffiliationsCard,
  OwnerScheduleCard,
  OwnerStatusCard,
  OwnerTrophyCard,
} from './owner-sidebar-cards';
import { OwnerHighlights } from './owner-highlights';
import { OwnerAnimalsSection } from './owner-animals-section';

type Props = {
  profile?: any;
};

export default function OwnerProfileSingle({ profile }: Props) {
  // findWithOwner retorna un User con owner anidado
  const user = profile ?? {};
  const owner = user.owner ?? {};
  
  const name = user.name || 'Propietario';
  const role = 'Criador profesional';
  const location = [user.city, user.state, user.country].filter(Boolean).join(', ') || 'Sin ubicación';
  
  const bannerUrl = owner.banner ||
    'https://lh3.googleusercontent.com/aida-public/AB6AXuDvhsjp4LweoWeVFgEn9ipgo3h8x3BC7xvT3o48A3miMZz1Yj9yCd5cD7OHZNHyQOpf-hcG6N1QKKM22f6UVJRg26ny3qsp1eo5a9mi8hNrScJ8rWO_hVSxCa7od_np2HW9cxEv09N2Gi6TiK8Dm9xyRqdn23mIAJ5hdTR-4fiUp_LsS54nVnjoEmWvLXQJi86YDUi2kcraGHBiGpnJCOKnIH84Rn-bTKF8o2LUIDmbRdprrrTnQ8BlpnjX7u82IeNYkgj6GIjSNPkr';
  
  const avatarUrl = owner.photo ||
    'https://lh3.googleusercontent.com/aida-public/AB6AXuDe8HRtzgIzPQ-FbWxOjlm30gkiSpyUoTNTQtaDGCLovyL6zxdp0WpJBTjLxO1vawzp-LUCk88dQugD3E3_1a3e0TXYZ2Szf2OyykQsPGrXZmRwQIkkMikc_uQRe22eN78Iufe8LxS4QGYPpJz94POiBe1e80BM7Tf4DX3TxEnURlTKo3f5AWPJPbKY51K3F2rA-GpaeuoncEdBR3Ot4diwRzu6am57lh-Ceq7DEUvYLHPGvFBGfBskXiWnD0d_83rNSnqzTQR5VcI0';
  
  const about = owner.bio || 'Sin biografía disponible';
  const website = owner.website || '#';
  const joined = owner.created_at?.slice(0, 10) || '—';
  const animals = Array.isArray(user.animals) ? user.animals : [];
  const followers = 0;
  const following = 0;
  const dogsOwned = animals.length;
  const isVerified = Boolean(owner.verified);
  const isHomologated = Boolean(owner.homologated);

  const calculateAge = (birthDate: string) => {
    if (!birthDate) return 'Edad desconocida';
    
    try {
      const birth = new Date(birthDate);
      const today = new Date();
      const years = today.getFullYear() - birth.getFullYear();
      const months = today.getMonth() - birth.getMonth();
      
      if (years === 0) {
        const totalMonths = months < 0 ? 12 + months : months;
        return `${totalMonths} ${totalMonths === 1 ? 'mes' : 'meses'}`;
      }
      return `${years} ${years === 1 ? 'año' : 'años'}`;
    } catch (error) {
      return 'Edad desconocida';
    }
  };

  return (
    <TooltipProvider>
      <main className="layout-container flex h-full grow flex-col">
        <div className="px-4 md:px-10 lg:px-40 flex flex-1 justify-center py-5">
          <div className="layout-content-container flex flex-col max-w-[1200px] flex-1">
            <OwnerProfileHero
              name={name}
              role={role}
              location={location}
              bannerUrl={bannerUrl}
              avatarUrl={avatarUrl}
              isVerified={isVerified}
              isHomologated={isHomologated}
            />

            <OwnerStatsBar followers={followers} following={following} dogsOwned={dogsOwned} />

            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 py-8 px-4">
              <div className="lg:col-span-4 flex flex-col gap-6 order-2 lg:order-1">
                <OwnerStatusCard isVerified={isVerified} isHomologated={isHomologated} />

                <OwnerAboutCard about={about} location={location} website={website} joined={joined} />

                <OwnerTrophyCard />

                <OwnerScheduleCard />

                <OwnerAffiliationsCard
                  affiliations={[
                    { name: 'IDRB', logoUrl: '/landing/home/LOGO-IDRB.png', highlighted: true },
                  ]}
                />
              </div>

              <div className="lg:col-span-8 order-1 lg:order-2">
                <OwnerHighlights />

                <OwnerAnimalsSection animals={animals} calculateAge={calculateAge} />
              </div>
            </div>
          </div>
        </div>
      </main>
    </TooltipProvider>
  );
}