"use client";

import { useState } from "react";
import ReportsPLPage from "./ReportsPLPage";
import ReportsBalanceSheetPage from "./ReportsBalanceSheetPage";
import { NaturalLanguageReports } from "@/components/ai/NaturalLanguageReports";
import PageSkeleton from "./PageSkeleton";

type ReportType = "pl" | "balance-sheet";

export default function ReportsShell() {
  const [report, setReport] = useState<ReportType>("pl");

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Report type selector */}
      <div className="flex items-center gap-3">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Reports</h1>
          <p className="text-gray-500 mt-1">Financial statements and analysis</p>
        </div>
      </div>

      <div className="flex gap-1 bg-gray-100 rounded-lg p-1 w-fit">
        {([
          { key: "pl" as ReportType, label: "Profit & Loss" },
          { key: "balance-sheet" as ReportType, label: "Balance Sheet" },
        ]).map((r) => (
          <button
            key={r.key}
            onClick={() => setReport(r.key)}
            className={`px-4 py-2 text-sm font-medium rounded-md transition-all cursor-pointer ${
              report === r.key
                ? "bg-white text-gray-900 shadow-sm"
                : "text-gray-500 hover:text-gray-700"
            }`}
          >
            {r.label}
          </button>
        ))}
      </div>

      {/* AI Natural Language Reports */}
      <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
        <h2 className="text-sm font-semibold text-gray-900 mb-4 flex items-center gap-2">
          <svg className="w-4 h-4 text-teal-600" viewBox="0 0 24 24" fill="none">
            <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="currentColor" />
          </svg>
          Ask AI About Your Data
        </h2>
        <NaturalLanguageReports />
      </div>

      {report === "pl" && <ReportsPLPage />}
      {report === "balance-sheet" && <ReportsBalanceSheetPage />}
    </div>
  );
}