"use client";

import { useState } from "react";
import { QuotationsList } from "./QuotationsList";
import { RecurringQuotationsList } from "./RecurringQuotationsList";
import { QuotationSettingsPanel } from "./QuotationSettingsPanel";
import { TrashQuotationsList } from "./TrashQuotationsList";

// Inline translations
const t = {
  en: {
    quotations: "Quotations",
    recurring: "Recurring",
    settings: "Settings",
    trash: "Trash",
    upgradeTitle: "Upgrade to Access Quotations & Deals",
    upgradeDesc:
      "Create professional quotations, track deals through your sales pipeline, and close more business.",
    upgradeBtn: "Upgrade Now",
  },
  ar: {
    quotations: "عروض الأسعار",
    recurring: "المتكررة",
    settings: "الإعدادات",
    trash: "المحذوفات",
    upgradeTitle: "قم بالترقية للوصول إلى عروض الأسعار والصفقات",
    upgradeDesc:
      "أنشئ عروض أسعار احترافية، وتتبع الصفقات عبر خط أنابيب المبيعات، وأغلق المزيد من الأعمال.",
    upgradeBtn: "ترقية الآن",
  },
};

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

type TabKey = "quotations" | "recurring" | "settings" | "trash";

export default function QuotationsPanel({
  lang,
  hasAccess,
}: QuotationsPanelProps) {
  const isAr = lang === "ar";
  const labels = isAr ? t.ar : t.en;
  const [activeTab, setActiveTab] = useState<TabKey>("quotations");

  if (!hasAccess) {
    return (
      <div
        dir={isAr ? "rtl" : "ltr"}
        className="flex flex-col items-center justify-center py-20 text-center"
      >
        <div className="rounded-full bg-blue-50 p-4 mb-4">
          <svg
            className="w-12 h-12 text-blue-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
            />
          </svg>
        </div>
        <h3 className="text-xl font-semibold text-gray-900 mb-2">
          {labels.upgradeTitle}
        </h3>
        <p className="text-gray-500 max-w-md mb-6">{labels.upgradeDesc}</p>
        <a
          href={`/${lang}/pricing`}
          className="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
        >
          {labels.upgradeBtn}
        </a>
      </div>
    );
  }

  const tabs: { key: TabKey; label: string }[] = [
    { key: "quotations", label: labels.quotations },
    { key: "recurring", label: labels.recurring },
    { key: "settings", label: labels.settings },
    { key: "trash", label: labels.trash },
  ];

  return (
    <div dir={isAr ? "rtl" : "ltr"} className="space-y-6">
      {/* Tab Navigation */}
      <div className="border-b border-gray-200">
        <nav className="flex gap-6" aria-label="Tabs">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`py-3 px-1 border-b-2 font-medium text-sm transition-colors ${
                activeTab === tab.key
                  ? "border-blue-500 text-blue-600"
                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === "quotations" && <QuotationsList lang={lang} />}
      {activeTab === "recurring" && <RecurringQuotationsList lang={lang} />}
      {activeTab === "settings" && <QuotationSettingsPanel lang={lang} />}
      {activeTab === "trash" && <TrashQuotationsList lang={lang} />}
    </div>
  );
}