import { ExternalLink } from "lucide-react";
import { createClient } from "@/lib/supabase/server";
import { canDo } from "@/lib/auth/permissions";
import { PageHeader } from "@/components/layout/page-header";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import type { SocialMediaPost } from "@/lib/types";
import { AddPostDialog, PostRowActions } from "./social-client";

const STATUS_VARIANT: Record<string, "default" | "secondary" | "outline"> = {
  posted: "default",
  scheduled: "secondary",
  draft: "outline",
};

function fmtDateTime(value: string | null) {
  if (!value) return "—";
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return "—";
  return d.toLocaleString();
}

function fmtDate(value: string | null) {
  if (!value) return "—";
  const d = new Date(value);
  if (Number.isNaN(d.getTime())) return "—";
  return d.toLocaleDateString();
}

export default async function SocialMediaPage() {
  const supabase = await createClient();
  const { data } = await supabase
    .from("social_media_posts")
    .select("*")
    .order("created_at", { ascending: false });
  const posts = (data as SocialMediaPost[]) ?? [];
  const canManage = await canDo("promotional", "update");

  return (
    <div>
      <PageHeader
        title="Social Media Promotions"
        breadcrumb="Home / Social Media"
        action={canManage ? <AddPostDialog /> : undefined}
      />
      <Card className="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">No</TableHead>
              <TableHead>Platform</TableHead>
              <TableHead>Content</TableHead>
              <TableHead>Link</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Scheduled</TableHead>
              <TableHead>Created</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {posts.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={8}
                  className="py-10 text-center text-muted-foreground"
                >
                  No posts logged yet. Add your first social media post.
                </TableCell>
              </TableRow>
            ) : (
              posts.map((p, i) => (
                <TableRow key={p.id}>
                  <TableCell className="text-muted-foreground">{i + 1}</TableCell>
                  <TableCell>
                    <Badge variant="secondary">{p.platform}</Badge>
                  </TableCell>
                  <TableCell className="max-w-xs truncate" title={p.content ?? ""}>
                    {p.content ?? "—"}
                  </TableCell>
                  <TableCell>
                    {p.link_url ? (
                      <a
                        href={p.link_url}
                        target="_blank"
                        rel="noreferrer"
                        className="inline-flex items-center gap-1 text-brand-blue hover:underline"
                      >
                        Open <ExternalLink className="size-3" />
                      </a>
                    ) : (
                      "—"
                    )}
                  </TableCell>
                  <TableCell>
                    <Badge variant={STATUS_VARIANT[p.status] ?? "outline"}>
                      {p.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{fmtDateTime(p.scheduled_at)}</TableCell>
                  <TableCell>{fmtDate(p.created_at)}</TableCell>
                  <TableCell className="text-right">
                    <PostRowActions
                      id={p.id}
                      status={p.status}
                      canManage={canManage}
                    />
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}