"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { buttonVariants } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

interface TrendReport {
  id: string;
  name: string;
  filePath: string;
  summary?: string | null;
  createdAt: string;
}

export default function TrendsPage() {
  const [reports, setReports] = useState<TrendReport[]>([]);
  const [selectedReport, setSelectedReport] = useState<TrendReport | null>(null);

  useEffect(() => {
    fetch("/api/stats")
      .then((r) => r.json())
      .then((data) => {
        if (data.trendReports) setReports(data.trendReports);
      })
      .catch(() => {});
  }, []);

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

      {reports.length === 0 ? (
        <Card>
          <CardContent className="py-12 text-center">
            <p className="text-muted-foreground">
              No trend reports yet. Run the Trend Scout agent to generate
              reports.
            </p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid gap-4 md:grid-cols-2">
          {reports.map((report) => (
            <Card
              key={report.id}
              className="cursor-pointer hover:bg-muted/50 transition-colors"
              onClick={() => setSelectedReport(report)}
            >
              <CardHeader>
                <CardTitle className="text-lg">{report.name}</CardTitle>
                <CardDescription>
                  {new Date(report.createdAt).toLocaleDateString()}
                </CardDescription>
              </CardHeader>
              {report.summary && (
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    {report.summary}
                  </p>
                </CardContent>
              )}
              <CardContent>
                <Link
                  href={`/campaigns/new?trendReport=${report.id}`}
                  className={buttonVariants({ variant: "outline", size: "sm" })}
                >
                  Create Campaign from This
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Report Viewer */}
      {selectedReport && (
        <Card>
          <CardHeader>
            <div className="flex items-center justify-between">
              <CardTitle>{selectedReport.name}</CardTitle>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setSelectedReport(null)}
              >
                Close
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <iframe
              src={`/api/files/${selectedReport.filePath}`}
              className="w-full h-[600px] border rounded-md"
              title={selectedReport.name}
            />
          </CardContent>
        </Card>
      )}
    </div>
  );
}