"use client";

import { useEffect, useState } from "react";
import { Clock3 } from "lucide-react";
import { TopBar } from "@/components/ui/TopBar";
import { GlassCard } from "@/components/ui/GlassCard";
import { Skeleton } from "@/components/ui/Skeleton";
import { ContactOptions } from "@/components/ContactOptions";
import { SocialLinks } from "@/components/SocialLinks";
import { fetchCmsPage, ContactContent } from "@/lib/data/cms";
import { useSettings } from "@/lib/data/settings-provider";
import { useTranslation } from "@/lib/i18n/LanguageProvider";

export default function ContactPage() {
  const { t, language } = useTranslation();
  const { settings } = useSettings();
  const [content, setContent] = useState<ContactContent | null>(null);

  useEffect(() => {
    let active = true;
    setContent(null);
    fetchCmsPage<ContactContent>("contact", language).then(
      (result) => active && setContent(result)
    );
    return () => {
      active = false;
    };
  }, [language]);

  return (
    <div className="flex flex-1 flex-col">
      <TopBar title={t("contact.title")} />

      <div className="flex flex-1 flex-col gap-6 px-4 pb-8 pt-4">
        {content ? (
          <p className="text-sm leading-relaxed text-muted">{content.body}</p>
        ) : (
          <Skeleton className="h-12 w-full" />
        )}

        <ContactOptions />

        <GlassCard className="flex items-center gap-3">
          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-black/5 dark:bg-white/5">
            <Clock3 size={18} strokeWidth={2} className="text-muted" />
          </span>
          <div>
            <p className="text-xs text-muted">{t("contact.hours")}</p>
            <p className="text-sm font-semibold">{settings.supportHours}</p>
          </div>
        </GlassCard>

        <SocialLinks />
      </div>
    </div>
  );
}