"use client";

import { useState } from "react";
import {
  RefreshCw,
  Hourglass,
  CircleCheck,
  Ban,
  DollarSignIcon,
} from "lucide-react";
import StatusCard from "@/src/components/shared/StatusCard";

/* -------------------- Types -------------------- */
type TabType = "HI" | "FTHB" | "TMR";

interface DashboardData {
  hiStats: Record<string, number>;
  fthbStats: Record<string, number>;
  tmrStats: Record<string, number>;
  totalFundRaise: number;
  hiFundRaise: number;
  fthbFundRaise: number;
  tmrFundRaise: number;
}

interface Props {
  data?: DashboardData;
}

/* -------------------- Main Component -------------------- */
export default function ApplicationDashboardTabs({ data }: Props) {
  const [activeTab, setActiveTab] = useState<TabType>("HI");

  const tabClass = (tab: TabType) => `
  relative
  px-4 py-2
  text-sm font-medium
  rounded-t-lg
  transition-all duration-200
  cursor-pointer
  ${
    activeTab === tab
      ? "bg-teal-600 text-white shadow-sm"
      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
  }
`;

  /* -------- Dynamic Application Data -------- */
  const dashboardData = {
    HI: {
      label: "Home Improvement Application",
      stats: {
        pending: data?.hiStats?.pending || 0,
        inprogress: data?.hiStats?.['in progress'] || data?.hiStats?.inprogress || 0,
        completed: data?.hiStats?.completed || 0,
        rejected: data?.hiStats?.rejected || 0,
      },
    },
    FTHB: {
      label: "First Time Home Buyer Application",
      stats: {
        pending: data?.fthbStats?.pending || 0,
        inprogress: data?.fthbStats?.['in progress'] || data?.fthbStats?.inprogress || 0,
        completed: data?.fthbStats?.completed || 0,
        rejected: data?.fthbStats?.rejected || 0,
      },
    },
    TMR: {
      label: "Tenant Maintenance Request Application",
      stats: {
        pending: data?.tmrStats?.pending || 0,
        inprogress: data?.tmrStats?.['in progress'] || data?.tmrStats?.inprogress || 0,
        completed: data?.tmrStats?.completed || 0,
        rejected: data?.tmrStats?.rejected || 0,
      },
    },
  };

  const current = dashboardData[activeTab];

  /* -------- Market Raise Data -------- */
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('en-US').format(amount);
  };

  const marketData = {
    total: formatCurrency(data?.totalFundRaise || 0),
    fthb: formatCurrency(data?.fthbFundRaise || 0),
    hi: formatCurrency(data?.hiFundRaise || 0),
    tmr: formatCurrency(data?.tmrFundRaise || 0),
  };

  return (
    <div className="space-y-6">
      {/* -------------------- Tabs Header -------------------- */}
      <div className="border-b border-gray-200">
        <div className="flex gap-6">
          {(Object.keys(dashboardData) as TabType[]).map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={tabClass(tab)}
            >
              {dashboardData[tab].label}
            </button>
          ))}
        </div>
      </div>

      {/* -------------------- Status Cards (Dynamic) -------------------- */}
      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        <StatusCard
          title={`${current.label}s Pending`}
          value={current.stats.pending}
          icon={Hourglass}
          bgColor="bg-yellow-200"
          textColor="text-yellow-800"
        />

        <StatusCard
          title={`${current.label}s In Progress`}
          value={current.stats.inprogress}
          icon={RefreshCw}
          bgColor="bg-blue-200"
          textColor="text-blue-800"
        />

        <StatusCard
          title={`${current.label}s Completed`}
          value={current.stats.completed}
          icon={CircleCheck}
          bgColor="bg-green-200"
          textColor="text-green-800"
        />

        <StatusCard
          title={`${current.label}s Rejected`}
          value={current.stats.rejected}
          icon={Ban}
          bgColor="bg-red-200"
          textColor="text-red-800"
        />
      </div>

      {/* -------------------- Market Raise (Dynamic) -------------------- */}
      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4 mt-8">
        <StatusCard
          title="Total Market Raise Amount"
          value={marketData.total}
          icon={DollarSignIcon}
          bgColor="bg-teal-700"
          textColor="text-white"
        />
        <StatusCard
          title="FTHB Market Raise Amount"
          value={marketData.fthb}
          icon={DollarSignIcon}
          bgColor="bg-teal-600"
          textColor="text-white"
        />
        <StatusCard
          title="HI Market Raise Amount"
          value={marketData.hi}
          icon={DollarSignIcon}
          bgColor="bg-teal-700"
          textColor="text-white"
        />
        <StatusCard
          title="TMR Market Raise Amount"
          value={marketData.tmr}
          icon={DollarSignIcon}
          bgColor="bg-teal-600"
          textColor="text-white"
        />
      </div>
    </div>
  );
}