"use client";

import { use, useState } from "react";
import Link from "next/link";
import { ReportView } from "@/components/report-view";
import { useReport, useReportMarkdown } from "@/hooks/use-reports";

export default function ReportPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const { data: report, isLoading } = useReport(id);
  const [showMarkdown, setShowMarkdown] = useState(false);
  const { data: markdown, isLoading: markdownLoading } = useReportMarkdown(
    showMarkdown ? id : undefined,
  );

  if (isLoading) {
    return <p className="text-sm text-slate-500">Loading…</p>;
  }
  if (!report) {
    return <p className="text-sm text-slate-500">Report not found.</p>;
  }

  return (
    <div>
      <div className="flex items-center justify-between print:hidden">
        <Link
          href={`/companies/${report.company_id}`}
          className="text-sm text-slate-500 hover:text-slate-700"
        >
          ← Back to company
        </Link>
        <button
          onClick={() => setShowMarkdown((v) => !v)}
          className="focus-ring rounded-md border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50"
        >
          {showMarkdown ? "Show structured view" : "Show Markdown (with sources)"}
        </button>
      </div>

      {showMarkdown ? (
        <div className="mt-6 rounded-lg border border-slate-200 bg-white p-6">
          {markdownLoading ? (
            <p className="text-sm text-slate-500">Loading…</p>
          ) : (
            <pre className="whitespace-pre-wrap break-words font-mono text-xs text-slate-800">
              {markdown}
            </pre>
          )}
        </div>
      ) : (
        <ReportView report={report} />
      )}
    </div>
  );
}