'use client'

import { getAllContacts } from '@/actions/contact.action'
import { ContactProps } from '@/types'
import React, { useEffect, useState } from 'react'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from './ui/card'
import { Locale } from '@/i18n.config'
import Link from 'next/link'
import Image from 'next/image'
import { Skeleton } from './ui/skeleton'

export default function Contacts({ lang }: { lang: Locale }) {
  const [contacts, setContacts] = useState<ContactProps[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchContacts() {
      setLoading(true)
      try {
        const fetchedContacts = await getAllContacts(lang)
        setContacts(fetchedContacts)
      } catch (error) {
        console.error('Error fetching:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchContacts()
  }, [lang])

  const visibleContacts = contacts
    .filter((contact) => contact.isVisible)
    .sort((a, b) => b.priority - a.priority)

  return (
    <>
      <h2 className="mb-4 text-3xl font-extrabold sm:text-4xl">Kontakty</h2>

      {loading && (
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6">
          <ContactSkeleton />
          <ContactSkeleton />
          <ContactSkeleton />
          <ContactSkeleton />
          <ContactSkeleton />
          <ContactSkeleton />
          <ContactSkeleton />
          <ContactSkeleton />
          <ContactSkeleton />
        </div>
      )}

      {visibleContacts.length === 0 && !loading && (
        <p className="text-xl font-semibold">Žádné kontakty</p>
      )}

      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6">
        {visibleContacts.map((contact, i) => (
          <Contact {...contact} key={i} />
        ))}
      </div>
    </>
  )
}

function Contact({
  position,
  description,
  email,
  phone,
  isDrylock,
}: ContactProps) {
  return (
    <Card className="relative col-span-2 sm:last:col-start-2 xl:last:col-start-auto">
      {isDrylock && (
        <div>
          <Image
            width={175}
            height={40}
            src={'/drylock.png'}
            alt="drylock"
            className="absolute right-[20px] top-[-12.5px] h-[25px] w-auto rounded-sm border bg-background px-1 py-0.5"
          />
        </div>
      )}
      <CardHeader className="pb-3">
        <CardTitle>{position}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          E-mail:{' '}
          <Link
            href={`mailto:${email}`}
            className="md:transition-colors md:duration-100 md:hover:text-primary"
          >
            {email}
          </Link>
        </p>
        <p>
          Telefon:{' '}
          <Link
            href={`tel:${phone}`}
            className="md:transition-colors md:duration-100 md:hover:text-primary"
          >
            {phone}
          </Link>
        </p>
      </CardContent>
    </Card>
  )
}

function ContactSkeleton() {
  return (
    <div className="relative col-span-2 rounded-md border p-6 shadow-sm sm:last:col-start-2 xl:last:col-start-auto">
      <Skeleton className="mb-2 h-4 w-1/2" />

      <Skeleton className="mb-4 h-4 w-1/4" />

      <Skeleton className="mb-2 h-4 w-5/6" />
      <Skeleton className="h-4 w-2/4" />
    </div>
  )
}