'use client'

import { MapPin, Phone, Eye, Building2, Star } from 'lucide-react'
import Link from 'next/link'

interface Posyandu {
    id: string
    nama_posyandu: string
    alamat: string
    kontak: string | null
    latitude: number | null
    longitude: number | null
    link_google_maps: string | null
    petugas?: {
        nama_petugas: string
        nomor_hp: string | null
        jabatan: string | null
    }[]
    reviews?: {
        rating: number
        ulasan: string
        nama_pengulas: string
    }[]
}

interface Props {
    data: Posyandu
}

export default function PosyanduCard({ data }: Props) {
    return (
        <div className="group bg-white rounded-3xl border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all overflow-hidden flex flex-col h-full">
            <div className="p-6 bg-purple-600 border-b-2 border-black flex justify-between items-center">
                <div className="p-2 bg-white rounded-xl border-2 border-black">
                    <Building2 className="w-6 h-6 text-purple-600" />
                </div>
                {data.reviews && data.reviews.length > 0 && (
                    <div className="flex items-center gap-1.5 px-3 py-1 bg-white border-2 border-black rounded-full shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                        <Star className="w-3.5 h-3.5 text-yellow-400 fill-current" />
                        <span className="text-xs font-black">
                            {(data.reviews.reduce((acc, r) => acc + r.rating, 0) / data.reviews.length).toFixed(1)}
                        </span>
                        <span className="text-[10px] text-gray-400 font-bold">({data.reviews.length})</span>
                    </div>
                )}
            </div>

            <div className="p-6 flex-1 flex flex-col gap-4">
                <div className="flex flex-col gap-1">
                    <h3 className="text-xl font-black text-gray-900 group-hover:text-purple-600 transition-colors uppercase">
                        {data.nama_posyandu}
                    </h3>
                    <div className="flex items-center gap-1.5 text-gray-500 text-xs font-semibold">
                        <MapPin className="w-3 h-3 flex-shrink-0" />
                        <span className="line-clamp-1">{data.alamat}</span>
                    </div>
                </div>

                <div className="flex flex-wrap gap-2 mt-auto">
                    <div className="px-3 py-1 bg-gray-50 border border-gray-100 rounded-lg text-[10px] font-bold text-gray-500 flex items-center gap-1.5">
                        <span className="text-purple-600">{data.petugas?.length || 0}</span> Petugas
                    </div>
                    {data.kontak && (
                        <div className="px-3 py-1 bg-gray-50 border border-gray-100 rounded-lg text-[10px] font-bold text-gray-500 flex items-center gap-1.5">
                            <Phone className="w-3 h-3 text-emerald-500" />
                            {data.kontak}
                        </div>
                    )}
                </div>
            </div>

            <div className="p-6 pt-0">
                <Link
                    href={`/user-dashboard/lokasi-posyandu/${data.id}`}
                    className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-black text-white font-black rounded-2xl hover:bg-gray-900 transition-all shadow-[4px_4px_0px_0px_rgba(147,51,234,0.5)] hover:shadow-none hover:translate-x-[1px] hover:translate-y-[1px]"
                >
                    <Eye className="w-4 h-4" />
                    LIHAT DETAIL & REVIEW
                </Link>
            </div>
        </div>
    )
}