"use client"

import { useState } from "react"
import { formatDistanceToNow } from "date-fns"
import {
  DollarSign, UserPlus, Wrench, FileText, AlertTriangle,
  Building2, ClipboardCheck, Users, Receipt, Zap, Activity,
} from "lucide-react"

const typeConfig: Record<string, { icon: React.ElementType; color: string; bg: string }> = {
  rent_paid:             { icon: DollarSign,     color: "text-emerald-400", bg: "bg-emerald-500/10" },
  rent_overdue:          { icon: AlertTriangle,  color: "text-red-400",     bg: "bg-red-500/10"     },
  tenant_added:          { icon: UserPlus,       color: "text-blue-400",    bg: "bg-blue-500/10"    },
  tenant_removed:        { icon: Users,          color: "text-orange-400",  bg: "bg-orange-500/10"  },
  maintenance_opened:    { icon: Wrench,         color: "text-yellow-400",  bg: "bg-yellow-500/10"  },
  maintenance_resolved:  { icon: ClipboardCheck, color: "text-emerald-400", bg: "bg-emerald-500/10" },
  lease_created:         { icon: FileText,       color: "text-indigo-400",  bg: "bg-indigo-500/10"  },
  lease_expiring:        { icon: AlertTriangle,  color: "text-amber-400",   bg: "bg-amber-500/10"   },
  expense_added:         { icon: Receipt,        color: "text-purple-400",  bg: "bg-purple-500/10"  },
  property_added:        { icon: Building2,      color: "text-cyan-400",    bg: "bg-cyan-500/10"    },
  inspection_completed:  { icon: ClipboardCheck, color: "text-teal-400",    bg: "bg-teal-500/10"    },
  vendor_added:          { icon: Users,          color: "text-pink-400",    bg: "bg-pink-500/10"    },
  ai_action:             { icon: Zap,            color: "text-violet-400",  bg: "bg-violet-500/10"  },
}

const FILTER_OPTIONS = [
  { label: "All", value: "" },
  { label: "Rent", value: "rent" },
  { label: "Tenants", value: "tenant" },
  { label: "Maintenance", value: "maintenance" },
  { label: "Leases", value: "lease" },
  { label: "AI", value: "ai" },
]

export function ActivityFeed({ activities }: { activities: any[] }) {
  const [filter, setFilter] = useState("")

  const filtered = filter
    ? activities.filter((a) => a.type.startsWith(filter))
    : activities

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-end justify-between">
        <div>
          <h2 className="text-lg font-semibold text-white">Activity Feed</h2>
          <p className="text-sm text-white/40 mt-0.5">{filtered.length} events</p>
        </div>
        <Activity className="h-5 w-5 text-white/20" />
      </div>

      {/* Filters */}
      <div className="flex gap-2 flex-wrap">
        {FILTER_OPTIONS.map((f) => (
          <button
            key={f.value}
            onClick={() => setFilter(f.value)}
            className={`rounded-full px-3 py-1 text-xs font-medium transition ${
              filter === f.value
                ? "bg-indigo-600 text-white"
                : "border border-white/10 text-white/50 hover:text-white"
            }`}
          >
            {f.label}
          </button>
        ))}
      </div>

      {/* Feed */}
      {filtered.length === 0 ? (
        <div className="rounded-xl border border-white/[0.06] bg-[#16161f] py-16 text-center">
          <Activity className="h-8 w-8 text-white/10 mx-auto mb-3" />
          <p className="text-sm text-white/30">No activity yet</p>
          <p className="text-xs text-white/20 mt-1">Actions like adding tenants, recording payments, and maintenance requests will appear here</p>
        </div>
      ) : (
        <div className="rounded-xl border border-white/[0.06] bg-[#16161f] divide-y divide-white/[0.04] overflow-hidden">
          {filtered.map((activity) => {
            const cfg = typeConfig[activity.type] ?? { icon: Activity, color: "text-white/40", bg: "bg-white/5" }
            const Icon = cfg.icon
            return (
              <div key={activity.id} className="flex items-start gap-4 px-5 py-4 hover:bg-white/[0.02] transition">
                <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${cfg.bg}`}>
                  <Icon className={`h-3.5 w-3.5 ${cfg.color}`} />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-white">{activity.title}</p>
                  {activity.description && (
                    <p className="text-xs text-white/40 mt-0.5">{activity.description}</p>
                  )}
                </div>
                <p className="shrink-0 text-xs text-white/25 mt-0.5">
                  {formatDistanceToNow(new Date(activity.created_at), { addSuffix: true })}
                </p>
              </div>
            )
          })}
        </div>
      )}
    </div>
  )
}