"use client";

import { useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

interface QueueAsset {
  id: string;
  fileName: string;
  platform?: string | null;
  status: string;
  postizPostId?: string | null;
  metadata?: string | null;
  createdAt: string;
  campaign?: { name: string };
}

export default function QueuePage() {
  const [assets, setAssets] = useState<QueueAsset[]>([]);

  useEffect(() => {
    fetch("/api/assets?status=published")
      .then((r) => r.json())
      .then(setAssets)
      .catch(() => {});
  }, []);

  return (
    <div className="space-y-6">
      <h1 className="text-3xl font-bold">Publishing Queue</h1>

      <Card>
        <CardHeader>
          <CardTitle>Scheduled & Published</CardTitle>
          <CardDescription>
            Assets pushed to Postiz for publishing
          </CardDescription>
        </CardHeader>
        <CardContent>
          {assets.length === 0 ? (
            <p className="text-center text-muted-foreground py-8">
              No published assets yet. Approve assets and push them to Postiz.
            </p>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Asset</TableHead>
                  <TableHead>Campaign</TableHead>
                  <TableHead>Platform</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Post ID</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {assets.map((asset) => {
                  const metadata = asset.metadata
                    ? JSON.parse(asset.metadata)
                    : {};
                  return (
                    <TableRow key={asset.id}>
                      <TableCell className="font-medium">
                        {asset.fileName}
                        {metadata.caption && (
                          <p className="text-xs text-muted-foreground line-clamp-1 mt-1">
                            {metadata.caption}
                          </p>
                        )}
                      </TableCell>
                      <TableCell>{asset.campaign?.name || "—"}</TableCell>
                      <TableCell>
                        {asset.platform && (
                          <Badge variant="outline">{asset.platform}</Badge>
                        )}
                      </TableCell>
                      <TableCell>
                        <Badge variant="default">{asset.status}</Badge>
                      </TableCell>
                      <TableCell className="text-xs text-muted-foreground">
                        {asset.postizPostId || "—"}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>
    </div>
  );
}