import Link from "next/link";
import { ChartPanel, MultiBarChart, SimpleLineChart, SingleBarChart } from "@/components/Charts";
import { EmptyState } from "@/components/EmptyState";
import { PageHeader } from "@/components/PageHeader";
import { StatCard } from "@/components/StatCard";
import { SummaryCard } from "@/components/SummaryCard";
import { AppShell } from "@/components/AppShell";
import { expenseByCategory, expenseByMonth, partnerBalanceChart } from "@/lib/chartData";
import { expenseExportParams, filterExpenses, parseExpenseFilters, summarizeExpenses } from "@/lib/expenseFilters";
import { financialPhaseLabels, recordTypeLabels } from "@/lib/finance";
import { currency } from "@/lib/format";
import { buildProjectMetrics } from "@/lib/metrics";
import { getSelectedProject } from "@/lib/projects";

export default async function ReportsPage({
  searchParams
}: {
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
}) {
  const params = (await searchParams) ?? {};
  const filters = parseExpenseFilters(params);
  const { user, projects, project, permissions, projectRole } = await getSelectedProject(filters.projectId, "reports.view");
  const canExport = Boolean(permissions?.["reports.export"] || permissions?.["expenses.export"]);

  if (!project) {
    return (
      <AppShell projects={projects} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
        <EmptyState title="Create a project before viewing reports." href="/projects" actionLabel="Create project" />
      </AppShell>
    );
  }

  const filteredExpenses = filterExpenses(project.expenses, filters);
  const filteredProject = { ...project, expenses: filteredExpenses };
  const metrics = buildProjectMetrics(filteredProject);
  const summary = summarizeExpenses(filteredExpenses);
  const byCategory = expenseByCategory(filteredExpenses);
  const byMonth = expenseByMonth(filteredExpenses);
  const partnerChart = partnerBalanceChart(metrics.balances);
  const expenseCategories = project.categories.filter((category) =>
    ["PURCHASE_COST", "RENOVATION_EXPENSE", "OPERATING_EXPENSE"].includes(category.type)
  );
  const exportParams = expenseExportParams(project.id, filters);

  const outstandingRent = project.rentPayments.filter((payment) => {
    const month = payment.month.toISOString().slice(0, 7);
    const year = payment.month.toISOString().slice(0, 4);
    return Number(payment.balanceDue) > 0 && (!filters.month || month === filters.month) && (!filters.year || year === filters.year);
  });

  return (
    <AppShell projects={projects} selectedProjectId={project.id} username={user.name ?? user.username ?? user.email} role={projectRole ?? user.role} permissions={permissions}>
      <PageHeader
        title="Reports"
        description="Filtered project cost, partner balance, tenant rent, outstanding rent, and profit/loss summaries."
        actions={
          <>
            {canExport ? <Link className="btn-secondary" href={`/api/exports/expenses?${exportParams.toString()}&format=csv`}>Expense CSV</Link> : null}
            {canExport ? <Link className="btn-secondary" href={`/api/exports/expenses?${exportParams.toString()}&format=xlsx`}>Expense Excel</Link> : null}
          </>
        }
      />

      <form className="panel mb-6 grid gap-3 p-4 md:grid-cols-4" action="/reports">
        <select className="field" name="projectId" defaultValue={project.id}>
          {projects.map((item) => (
            <option key={item.id} value={item.id}>{item.name}</option>
          ))}
        </select>
        <select className="field" name="partner" defaultValue={filters.partner}>
          <option value="">All partners</option>
          {project.partners.map((partner) => (
            <option key={partner.id} value={partner.id}>{partner.partner.name}</option>
          ))}
        </select>
        <select className="field" name="category" defaultValue={filters.category}>
          <option value="">All categories</option>
          {expenseCategories.map((category) => (
            <option key={category.id} value={category.id}>{category.name}</option>
          ))}
        </select>
        <select className="field" name="phase" defaultValue={filters.phase}>
          <option value="">All phases</option>
          {Object.entries(financialPhaseLabels).map(([phase, label]) => (
            <option key={phase} value={phase}>{label}</option>
          ))}
        </select>
        <select className="field" name="recordType" defaultValue={filters.recordType}>
          <option value="">All record types</option>
          {Object.entries(recordTypeLabels).map(([recordType, label]) => (
            <option key={recordType} value={recordType}>{label}</option>
          ))}
        </select>
        <input className="field" name="search" placeholder="Description or notes" defaultValue={filters.search} />
        <input className="field" name="from" type="date" defaultValue={filters.from} />
        <input className="field" name="to" type="date" defaultValue={filters.to} />
        <input className="field" name="month" type="month" defaultValue={filters.month} />
        <input className="field" name="year" type="number" min="1900" max="2200" placeholder="Year" defaultValue={filters.year} />
        <button className="btn-secondary md:col-span-4">Apply report filters</button>
      </form>

      <section className="mb-6 flex flex-wrap gap-2">
        <Link className="btn-secondary" href={`/purchase-costs?projectId=${project.id}`}>Purchase cost report</Link>
        <Link className="btn-secondary" href={`/renovation-costs?projectId=${project.id}`}>Renovation cost report</Link>
        <Link className="btn-secondary" href={`/operating-expenses?projectId=${project.id}`}>Operating expense report</Link>
        <Link className="btn-secondary" href={`/contributions?projectId=${project.id}`}>Contributions report</Link>
        <Link className="btn-secondary" href={`/rent?projectId=${project.id}`}>Rent income report</Link>
        <Link className="btn-secondary" href={`/security-deposits?projectId=${project.id}`}>Security deposit report</Link>
        <Link className="btn-secondary" href={`/documents?projectId=${project.id}`}>Document report</Link>
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Filtered final cost" value={summary.totalFinalCost} />
        <StatCard label="Initial investment" value={metrics.initialInvestment} tone="warning" />
        <StatCard label="Operating profit/loss" value={metrics.profitLoss.netProfitLoss} tone={metrics.profitLoss.netProfitLoss >= 0 ? "positive" : "negative"} />
        <StatCard label="Security deposits held" value={metrics.totalDepositsHeld} />
      </section>

      <section className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <SummaryCard label="Total documents" value={String(metrics.totalDocuments)} />
        <SummaryCard label="Needs review" value={String(metrics.documentsNeedingReview)} />
        <SummaryCard label="Expiring soon" value={String(metrics.expiringSoonDocuments)} />
        <SummaryCard label="Expired documents" value={String(metrics.expiredDocuments)} />
      </section>

      <section className="mt-6 grid gap-6 xl:grid-cols-3">
        <ChartPanel title="Expense Report by Month">
          <SimpleLineChart data={byMonth} dataKey="expenses" />
        </ChartPanel>
        <ChartPanel title="Expense Report by Category">
          <SingleBarChart data={byCategory} dataKey="expenses" color="#7c3aed" />
        </ChartPanel>
        <ChartPanel title="Partner Credit vs Share">
          <MultiBarChart data={partnerChart} keys={["paid", "share", "net"]} />
        </ChartPanel>
      </section>

      <section className="mt-6 grid gap-6 xl:grid-cols-2">
        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Expense by Category</h3>
          </div>
          <table className="w-full">
            <thead className="table-head">
              <tr>
                <th className="px-3 py-2">Category</th>
                <th className="px-3 py-2">Total</th>
              </tr>
            </thead>
            <tbody>
              {byCategory.map((item) => (
                <tr key={item.label}>
                  <td className="table-cell font-medium text-ink">{item.label}</td>
                  <td className="table-cell">{currency(Number(item.expenses))}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Expense by Month</h3>
          </div>
          <table className="w-full">
            <thead className="table-head">
              <tr>
                <th className="px-3 py-2">Month</th>
                <th className="px-3 py-2">Total</th>
              </tr>
            </thead>
            <tbody>
              {byMonth.map((item) => (
                <tr key={item.label}>
                  <td className="table-cell font-medium text-ink">{item.label}</td>
                  <td className="table-cell">{currency(Number(item.expenses))}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="mt-6 grid gap-6 xl:grid-cols-2">
        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Partner Balance Report</h3>
          </div>
          <table className="w-full min-w-[920px]">
            <thead className="table-head">
              <tr>
                <th className="px-3 py-2">Partner</th>
                <th className="px-3 py-2">Capital</th>
                <th className="px-3 py-2">Out-of-Pocket</th>
                <th className="px-3 py-2">Fund Handled</th>
                <th className="px-3 py-2">Total Credit</th>
                <th className="px-3 py-2">Share</th>
                <th className="px-3 py-2">Net</th>
              </tr>
            </thead>
            <tbody>
              {metrics.balances.map((balance) => (
                <tr key={balance.partnerId}>
                  <td className="table-cell font-medium text-ink">{balance.name}</td>
                  <td className="table-cell">{currency(balance.capitalContributed)}</td>
                  <td className="table-cell">{currency(balance.outOfPocketPaid)}</td>
                  <td className="table-cell">{currency(balance.projectFundPaymentsHandled)}</td>
                  <td className="table-cell">{currency(balance.totalPaid)}</td>
                  <td className="table-cell">{currency(balance.totalResponsibleShare)}</td>
                  <td className={`table-cell font-semibold ${balance.netBalance >= 0 ? "text-emerald-700" : "text-red-700"}`}>
                    {currency(balance.netBalance)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="panel overflow-hidden">
          <div className="border-b border-line px-4 py-3">
            <h3 className="font-semibold text-ink">Outstanding Rent Report</h3>
          </div>
          <table className="w-full">
            <thead className="table-head">
              <tr>
                <th className="px-3 py-2">Tenant</th>
                <th className="px-3 py-2">Month</th>
                <th className="px-3 py-2">Balance</th>
                <th className="px-3 py-2">Status</th>
              </tr>
            </thead>
            <tbody>
              {outstandingRent.map((payment) => (
                <tr key={payment.id}>
                  <td className="table-cell font-medium text-ink">{payment.tenant.name}</td>
                  <td className="table-cell">{payment.month.toISOString().slice(0, 7)}</td>
                  <td className="table-cell text-red-700">{currency(Number(payment.balanceDue))}</td>
                  <td className="table-cell">{payment.status.toLowerCase()}</td>
                </tr>
              ))}
            </tbody>
          </table>
          {outstandingRent.length === 0 ? <div className="p-6 text-sm text-slate-600">No outstanding rent for this filter.</div> : null}
        </div>
      </section>
    </AppShell>
  );
}