KanzlAI-mGMT/frontend/src/components/reports/BillingTab.tsx

"use client";

import type { BillingReport } from "@/lib/types";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Legend,
  LineChart,
  Line,
} from "recharts";
import { Receipt, TrendingUp, FolderOpen } from "lucide-react";

function formatMonth(period: string): string {
  const [year, month] = period.split("-");
  const months = [
    "Jan",
    "Feb",
    "Mär",
    "Apr",
    "Mai",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Okt",
    "Nov",
    "Dez",
  ];
  return `${months[parseInt(month, 10) - 1]} ${year.slice(2)}`;
}

export function BillingTab({ data }: { data: BillingReport }) {
  const chartData = data.monthly.map((m) => ({
    ...m,
    name: formatMonth(m.period),
  }));

  const totalNew = data.monthly.reduce((sum, m) => sum + m.cases_new, 0);
  const totalClosed = data.monthly.reduce((sum, m) => sum + m.cases_closed, 0);
  const totalByType = data.by_type.reduce((sum, t) => sum + t.total, 0);

  return (
    <div className="space-y-6">
      {/* Summary cards */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
        <div className="rounded-xl border border-neutral-200 bg-white p-5">
          <div className="flex items-center gap-2 text-sm text-neutral-500">
            <FolderOpen className="h-4 w-4" />
            Neue Mandate
          </div>
          <p className="mt-2 text-2xl font-semibold text-neutral-900">
            {totalNew}
          </p>
          <p className="mt-1 text-xs text-neutral-500">im Zeitraum</p>
        </div>
        <div className="rounded-xl border border-neutral-200 bg-white p-5">
          <div className="flex items-center gap-2 text-sm text-neutral-500">
            <Receipt className="h-4 w-4" />
            Abgeschlossen
          </div>
          <p className="mt-2 text-2xl font-semibold text-neutral-900">
            {totalClosed}
          </p>
          <p className="mt-1 text-xs text-neutral-500">abrechenbar</p>
        </div>
        <div className="rounded-xl border border-neutral-200 bg-white p-5">
          <div className="flex items-center gap-2 text-sm text-neutral-500">
            <TrendingUp className="h-4 w-4" />
            Verfahrensarten
          </div>
          <p className="mt-2 text-2xl font-semibold text-neutral-900">
            {data.by_type.length}
          </p>
          <p className="mt-1 text-xs text-neutral-500">
            {totalByType} Akten gesamt
          </p>
        </div>
      </div>

      {/* New cases trend */}
      <div className="rounded-xl border border-neutral-200 bg-white p-5">
        <h3 className="mb-4 text-sm font-medium text-neutral-900">
          Umsatzentwicklung (Mandate)
        </h3>
        {chartData.length === 0 ? (
          <p className="py-8 text-center text-sm text-neutral-400">
            Keine Daten im gewählten Zeitraum
          </p>
        ) : (
          <ResponsiveContainer width="100%" height={300}>
            <LineChart data={chartData}>
              <CartesianGrid strokeDasharray="3 3" stroke="#e5e5e5" />
              <XAxis dataKey="name" tick={{ fontSize: 12 }} stroke="#a3a3a3" />
              <YAxis
                allowDecimals={false}
                tick={{ fontSize: 12 }}
                stroke="#a3a3a3"
              />
              <Tooltip
                contentStyle={{
                  border: "1px solid #e5e5e5",
                  borderRadius: 8,
                  fontSize: 13,
                }}
              />
              <Legend wrapperStyle={{ fontSize: 13 }} />
              <Line
                type="monotone"
                dataKey="cases_new"
                name="Neue Mandate"
                stroke="#171717"
                strokeWidth={2}
                dot={{ fill: "#171717", r: 4 }}
              />
              <Line
                type="monotone"
                dataKey="cases_closed"
                name="Abgeschlossen"
                stroke="#a3a3a3"
                strokeWidth={2}
                dot={{ fill: "#a3a3a3", r: 4 }}
              />
            </LineChart>
          </ResponsiveContainer>
        )}
      </div>

      {/* By type breakdown */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div className="rounded-xl border border-neutral-200 bg-white p-5">
          <h3 className="mb-4 text-sm font-medium text-neutral-900">
            Mandate nach Verfahrensart
          </h3>
          {data.by_type.length === 0 ? (
            <p className="py-8 text-center text-sm text-neutral-400">
              Keine Daten
            </p>
          ) : (
            <ResponsiveContainer width="100%" height={250}>
              <BarChart data={data.by_type} layout="vertical">
                <CartesianGrid strokeDasharray="3 3" stroke="#e5e5e5" />
                <XAxis
                  type="number"
                  allowDecimals={false}
                  tick={{ fontSize: 12 }}
                  stroke="#a3a3a3"
                />
                <YAxis
                  type="category"
                  dataKey="case_type"
                  tick={{ fontSize: 12 }}
                  stroke="#a3a3a3"
                  width={100}
                />
                <Tooltip
                  contentStyle={{
                    border: "1px solid #e5e5e5",
                    borderRadius: 8,
                    fontSize: 13,
                  }}
                />
                <Legend wrapperStyle={{ fontSize: 13 }} />
                <Bar
                  dataKey="active"
                  name="Aktiv"
                  stackId="a"
                  fill="#171717"
                />
                <Bar
                  dataKey="closed"
                  name="Geschlossen"
                  stackId="a"
                  fill="#a3a3a3"
                  radius={[0, 4, 4, 0]}
                />
              </BarChart>
            </ResponsiveContainer>
          )}
        </div>

        {/* Summary table */}
        <div className="rounded-xl border border-neutral-200 bg-white">
          <div className="border-b border-neutral-100 px-5 py-4">
            <h3 className="text-sm font-medium text-neutral-900">
              Zusammenfassung
            </h3>
          </div>
          {data.by_type.length === 0 ? (
            <p className="px-5 py-8 text-center text-sm text-neutral-400">
              Keine Daten
            </p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-neutral-100 text-left text-neutral-500">
                    <th className="px-5 py-3 font-medium">Verfahrensart</th>
                    <th className="px-5 py-3 font-medium text-right">Aktiv</th>
                    <th className="px-5 py-3 font-medium text-right">
                      Geschlossen
                    </th>
                    <th className="px-5 py-3 font-medium text-right">
                      Gesamt
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {data.by_type.map((t) => (
                    <tr
                      key={t.case_type}
                      className="border-b border-neutral-50 last:border-b-0"
                    >
                      <td className="px-5 py-3 text-neutral-900">
                        {t.case_type}
                      </td>
                      <td className="px-5 py-3 text-right text-neutral-600">
                        {t.active}
                      </td>
                      <td className="px-5 py-3 text-right text-neutral-600">
                        {t.closed}
                      </td>
                      <td className="px-5 py-3 text-right font-medium text-neutral-900">
                        {t.total}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}