import { useQuery } from "@tanstack/react-query";
import { useTenant } from "@/contexts/TenantContext";
import LocktelLayout from "@/components/locktel/LocktelLayout";
import { format } from "date-fns";

interface Post {
  id: string;
  title: string;
  slug: string;
  content: string;
  image_url: string | null;
  published_at: string;
}

const LocktelNewsPage = () => {
  const { branding } = useTenant();

  const { data: posts = [] } = useQuery<Post[]>({
    queryKey: ["locktel-posts", branding?.company_id],
    queryFn: async () => {
      if (!branding) return [];
      try {
        const res = await fetch(`/api/locktel/posts?company_id=${encodeURIComponent(branding.company_id)}`);
        if (!res.ok) return [];
        const data = await res.json();
        return Array.isArray(data) ? data : [];
      } catch {
        return [];
      }
    },
    enabled: !!branding,
  });

  return (
    <LocktelLayout>
      <div className="pt-24 pb-16">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl font-bold text-foreground mb-2">News & Updates</h1>
          <p className="text-muted-foreground mb-10">Stay up to date with our latest news and announcements.</p>

          {posts.length === 0 ? (
            <p className="text-muted-foreground">No news articles yet. Check back soon!</p>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {posts.map((post) => (
                <div key={post.id} className="bg-card border border-border rounded-xl overflow-hidden">
                  {post.image_url && (
                    <img src={post.image_url} alt={post.title} className="w-full h-48 object-cover" />
                  )}
                  <div className="p-5">
                    <p className="text-xs text-muted-foreground mb-2">
                      {format(new Date(post.published_at), "dd MMM yyyy")}
                    </p>
                    <h3 className="font-semibold text-card-foreground mb-2">{post.title}</h3>
                    <p className="text-sm text-card-foreground/70 line-clamp-3">{post.content}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </LocktelLayout>
  );
};

export default LocktelNewsPage;