"use client"

import { useState } from "react"
import { formatCurrency } from "@/lib/utils"
import { TrendingUp, TrendingDown, Building2 } from "lucide-react"

interface MonthData { key: string; label: string; revenue: number; expense: number; net: number }
interface PropertyPnL { id: string; name: string; revenue: number; expense: number; net: number; margin: number }

export function ReportsClient({ monthlyData, propertyPnL }: { monthlyData: MonthData[]; propertyPnL: PropertyPnL[] }) {
  const [view, setView] = useState<"revenue" | "expense" | "net">("revenue")

  const maxVal = Math.max(...monthlyData.map(m =>
    view === "revenue" ? m.revenue : view === "expense" ? m.expense : Math.abs(m.net)
  ), 1)

  const barColor = view === "revenue" ? "bg-indigo-500" : view === "expense" ? "bg-rose-500" : "bg-emerald-500"
  const viewLabel = view === "revenue" ? "Revenue" : view === "expense" ? "Expenses" : "Net Income"

  return (
    <div className="space-y-6">
      {/* Monthly chart */}
      <div className="rounded-2xl border border-white/[0.06] bg-[#16161f] overflow-hidden">
        <div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
          <p className="text-sm font-semibold text-white">Monthly {viewLabel}</p>
          <div className="flex items-center gap-1 rounded-lg border border-white/[0.06] p-1">
            {(["revenue", "expense", "net"] as const).map((v) => (
              <button
                key={v}
                onClick={() => setView(v)}
                className={`px-3 py-1 rounded-md text-xs font-medium transition capitalize ${
                  view === v ? "bg-indigo-600 text-white" : "text-white/40 hover:text-white"
                }`}
              >
                {v === "net" ? "Net" : v === "revenue" ? "Revenue" : "Expenses"}
              </button>
            ))}
          </div>
        </div>

        <div className="px-5 py-5">
          <div className="flex items-end gap-2 h-40">
            {monthlyData.map((m) => {
              const val = view === "revenue" ? m.revenue : view === "expense" ? m.expense : m.net
              const height = maxVal > 0 ? Math.max((Math.abs(val) / maxVal) * 100, val !== 0 ? 4 : 0) : 0
              const isNegative = val < 0
              return (
                <div key={m.key} className="flex-1 flex flex-col items-center gap-1 group">
                  <div className="relative w-full flex items-end justify-center" style={{ height: "128px" }}>
                    <div
                      className={`w-full rounded-t-md transition-all duration-300 ${isNegative ? "bg-red-500" : barColor} opacity-70 group-hover:opacity-100`}
                      style={{ height: `${height}%` }}
                      title={formatCurrency(val)}
                    />
                    <div className="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block whitespace-nowrap rounded-lg bg-[#1d1d2a] border border-white/10 px-2 py-1 text-xs text-white shadow-xl z-10">
                      {formatCurrency(val)}
                    </div>
                  </div>
                  <span className="text-[10px] text-white/30">{m.label}</span>
                </div>
              )
            })}
          </div>
        </div>

        {/* Chart legend */}
        <div className="grid grid-cols-3 divide-x divide-white/[0.04] border-t border-white/[0.06]">
          {[
            { label: "Total Revenue", value: monthlyData.reduce((s, m) => s + m.revenue, 0), color: "text-emerald-400" },
            { label: "Total Expenses", value: monthlyData.reduce((s, m) => s + m.expense, 0), color: "text-rose-400" },
            { label: "Net Income", value: monthlyData.reduce((s, m) => s + m.net, 0), color: "text-indigo-400" },
          ].map((s) => (
            <div key={s.label} className="px-4 py-3 text-center">
              <p className={`text-base font-bold tabular-nums ${s.color}`}>{formatCurrency(s.value)}</p>
              <p className="text-[10px] text-white/30 mt-0.5">{s.label}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Per-property P&L */}
      <div className="rounded-2xl border border-white/[0.06] bg-[#16161f] overflow-hidden">
        <div className="px-5 py-4 border-b border-white/[0.06]">
          <p className="text-sm font-semibold text-white">Property P&amp;L</p>
          <p className="text-xs text-white/35 mt-0.5">Income vs expenses per property (last 6 months)</p>
        </div>

        {propertyPnL.length === 0 ? (
          <div className="py-12 text-center text-sm text-white/30">No property data available</div>
        ) : (
          <div className="divide-y divide-white/[0.04]">
            {propertyPnL.map((p) => (
              <div key={p.id} className="px-5 py-4">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-3">
                    <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-500/10">
                      <Building2 className="h-4 w-4 text-indigo-400" />
                    </div>
                    <div>
                      <p className="text-sm font-semibold text-white">{p.name}</p>
                      <p className="text-xs text-white/35">{p.margin}% profit margin</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className={`text-base font-bold tabular-nums ${p.net >= 0 ? "text-emerald-400" : "text-red-400"}`}>
                      {formatCurrency(p.net)}
                    </p>
                    <div className={`flex items-center gap-1 justify-end text-xs ${p.net >= 0 ? "text-emerald-400/60" : "text-red-400/60"}`}>
                      {p.net >= 0 ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
                      Net income
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-3">
                  <div className="rounded-xl bg-white/[0.03] border border-white/[0.04] px-3 py-2.5">
                    <p className="text-[10px] text-white/30 mb-1">Revenue</p>
                    <p className="text-sm font-bold text-emerald-400 tabular-nums">{formatCurrency(p.revenue)}</p>
                    <div className="mt-1.5 h-1 w-full rounded-full bg-white/[0.06]">
                      <div className="h-1 rounded-full bg-emerald-500" style={{ width: p.revenue > 0 ? "100%" : "0%" }} />
                    </div>
                  </div>
                  <div className="rounded-xl bg-white/[0.03] border border-white/[0.04] px-3 py-2.5">
                    <p className="text-[10px] text-white/30 mb-1">Expenses</p>
                    <p className="text-sm font-bold text-rose-400 tabular-nums">{formatCurrency(p.expense)}</p>
                    <div className="mt-1.5 h-1 w-full rounded-full bg-white/[0.06]">
                      <div className="h-1 rounded-full bg-rose-500" style={{ width: p.revenue > 0 ? `${Math.min((p.expense / p.revenue) * 100, 100)}%` : "0%" }} />
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}