"use client";

import { useState } from "react";
import ExpensesList from "./ExpensesList";
import ExpenseReport from "./ExpenseReport";
import CategoryManager from "./CategoryManager";

const t = {
  en: {
    expenses: "Expenses",
    report: "Report",
    categories: "Categories",
    upgradeTitle: "Expense Tracker",
    upgradeMessage:
      "Track and manage your business expenses with detailed reports and category breakdowns.",
    upgradeCta: "Upgrade to access",
  },
  ar: {
    expenses: "المصروفات",
    report: "التقرير",
    categories: "الفئات",
    upgradeTitle: "تتبع المصروفات",
    upgradeMessage: "تتبع وإدارة مصروفات عملك مع تقارير مفصلة وتصنيفات.",
    upgradeCta: "ترقية للوصول",
  },
};

interface ExpensesPanelProps {
  lang: string;
  hasAccess: boolean;
}

type SubTab = "list" | "report" | "categories";

export default function ExpensesPanel({ lang, hasAccess }: ExpensesPanelProps) {
  const isAr = lang === "ar";
  const labels = isAr ? t.ar : t.en;
  const [activeSubTab, setActiveSubTab] = useState<SubTab>("list");

  if (!hasAccess) {
    return (
      <div
        dir={isAr ? "rtl" : "ltr"}
        className="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 p-12 text-center dark:border-gray-600"
      >
        <div className="mb-4 text-4xl">💰</div>
        <h3 className="mb-2 text-xl font-semibold text-gray-900 dark:text-white">
          {labels.upgradeTitle}
        </h3>
        <p className="mb-4 max-w-md text-gray-500 dark:text-gray-400">
          {labels.upgradeMessage}
        </p>
        <a
          href={`/${lang}/pricing`}
          className="rounded-lg bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-indigo-700"
        >
          {labels.upgradeCta}
        </a>
      </div>
    );
  }

  const subTabs: { key: SubTab; label: string }[] = [
    { key: "list", label: labels.expenses },
    { key: "report", label: labels.report },
    { key: "categories", label: labels.categories },
  ];

  return (
    <div dir={isAr ? "rtl" : "ltr"}>
      {/* Sub-tab navigation */}
      <div className="mb-6 flex gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800">
        {subTabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveSubTab(tab.key)}
            className={`flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
              activeSubTab === tab.key
                ? "bg-white text-indigo-600 shadow-sm dark:bg-gray-700 dark:text-indigo-400"
                : "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Content */}
      {activeSubTab === "list" && <ExpensesList lang={lang} />}
      {activeSubTab === "report" && <ExpenseReport lang={lang} />}
      {activeSubTab === "categories" && <CategoryManager lang={lang} />}
    </div>
  );
}