import { Users, Star, MessageCircle, Monitor, Facebook, Twitter, Youtube } from 'lucide-react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Program } from '@/types/models';
import { useTranslations } from 'next-intl';
import { URL_IMAGE } from '@/utils/url';
import { Link } from '@/i18n/navigation';

export function Instructor({ program }: { program: Program }) {
    const t = useTranslations();

    if (!program?.coaches || program.coaches.length === 0) {
        return (
            <div className="w-full">
                <h2 className="text-3xl font-bold mb-6">{t("programs.instructor")}</h2>
                <div className="border border-gray-200 rounded-lg p-8 bg-white text-center">
                    <p className="text-gray-600">{t("programs.no instructor")}</p>
                </div>
            </div>
        );
    }

    return (
        <div className="w-full space-y-8">
            <h2 className="text-3xl font-bold mb-6">{t("programs.instructor")}</h2>

            {program.coaches.map((coach, index) => (
                <div key={coach.id || index} className="border border-gray-200 rounded-lg p-8 bg-white shadow-sm">
                    <div className="flex flex-col md:flex-row gap-8">
                        <div className="flex flex-col items-start flex-1">
                            <div className="flex items-center gap-6 w-full">
                                <Link href={`/coaches/${coach.id}`}>
                                    <Avatar className='size-20 flex-shrink-0 cursor-pointer hover:opacity-80 transition'>
                                        <AvatarFallback className='uppercase font-semibold text-2xl bg-purple-100 text-purple-700'>
                                            {(coach?.my_full_name || coach?.name)?.[0]}
                                            {(coach?.my_full_name || coach?.name)?.split(' ').filter(Boolean).slice(-1)[0]?.[0]}
                                        </AvatarFallback>
                                        <AvatarImage
                                            src={coach?.avatar ? (coach.avatar.startsWith('http') ? coach.avatar : `${URL_IMAGE}/${coach.avatar}`) : (coach?.get_avatar || "")}
                                            alt={coach?.my_full_name || coach?.name || "Instructor"}
                                            className="rounded-full object-cover border-4 border-purple-50"
                                        />
                                    </Avatar>
                                </Link>

                                <div className="flex-1">
                                    <Link href={`/coaches/${coach.id}`}>
                                        <h3 className="font-bold mb-3 text-2xl text-gray-900 hover:text-primary-tw-600 cursor-pointer transition">
                                            {coach?.my_full_name || coach?.name}
                                        </h3>
                                    </Link>
                                    
                                    {coach.brief && (
                                        <p className="text-gray-600 leading-relaxed mb-6 line-clamp-3">
                                            {coach.brief}
                                        </p>
                                    )}

                                    {/* <div className="flex flex-wrap gap-4">
                                        <div className="flex items-center gap-2 px-4 py-2 bg-purple-50 rounded-full border border-purple-100">
                                            <Monitor className="size-4 text-purple-600" />
                                            <span className="font-semibold text-purple-900 text-sm">
                                                {coach?.groups?.length || 0} {t("routes.programs")}
                                            </span>
                                        </div>
                                    </div> */}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}