/**
 * Billing Management Client Component
 * Client-side wrapper for all billing components
 * Handles state management and component coordination
 */

"use client";

import { useState } from "react";
import Link from "next/link";
import type { Lang } from "@/lib/config";
import CurrentPlanCard from "../components/CurrentPlanCard";
import PlanOptionsCard from "../components/PlanOptionsCard";
import InvoicesCard from "../components/InvoicesCard";

interface BillingManagementClientProps {
  lang: Lang;
}

export default function BillingManagementClient({
  lang,
}: BillingManagementClientProps) {
  const [refreshKey, setRefreshKey] = useState(0);
  const [showPlanOptions, setShowPlanOptions] = useState(false);

  const isAr = lang === "ar";

  // Refresh all components after plan change
  const handlePlanChanged = () => {
    setRefreshKey((prev) => prev + 1);
    setShowPlanOptions(false);

    // Show success notification
    if (typeof window !== "undefined") {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  const handleUpgradeClick = () => {
    setShowPlanOptions(true);
    // Scroll to plan options
    setTimeout(() => {
      document
        .getElementById("plan-options")
        ?.scrollIntoView({ behavior: "smooth" });
    }, 100);
  };

  return (
    <div className="space-y-8" key={refreshKey}>
      {/* Current Plan Section */}
      <section>
        <div className="mb-4">
          <h2 className="text-2xl font-bold text-slate-900">
            {isAr ? "📦 خطتك الحالية" : "📦 Your Current Plan"}
          </h2>
          <p className="text-sm text-slate-600 mt-1">
            {isAr
              ? "عرض تفاصيل اشتراكك الحالي والمميزات"
              : "View your current subscription details and features"}
          </p>
        </div>
        <CurrentPlanCard lang={lang} onUpgradeClick={handleUpgradeClick} />
      </section>

      {/* Plan Options Section */}
      <section id="plan-options">
        <div className="mb-4">
          <h2 className="text-2xl font-bold text-slate-900">
            {isAr ? "🔄 خيارات تغيير الخطة" : "🔄 Change Your Plan"}
          </h2>
          <p className="text-sm text-slate-600 mt-1">
            {isAr
              ? "ترقية للحصول على المزيد من المميزات أو تخفيض لتوفير المال"
              : "Upgrade for more features or downgrade to save money"}
          </p>
        </div>

        {showPlanOptions || true ? (
          <PlanOptionsCard lang={lang} onPlanChanged={handlePlanChanged} />
        ) : (
          <div className="rounded-xl bg-white p-6 shadow-sm border border-slate-200">
            <div className="text-center py-6">
              <button
                onClick={() => setShowPlanOptions(true)}
                className="rounded-lg bg-brand-green px-6 py-3 text-sm font-semibold text-white hover:bg-brand-greenHover transition-colors"
              >
                {isAr ? "🔍 عرض خيارات الخطط" : "🔍 Show Plan Options"}
              </button>
            </div>
          </div>
        )}
      </section>

      {/* Invoices Section */}
      <section>
        <div className="mb-4">
          <h2 className="text-2xl font-bold text-slate-900">
            {isAr ? "📄 الفواتير وسجل الدفع" : "📄 Invoices & Payment History"}
          </h2>
          <p className="text-sm text-slate-600 mt-1">
            {isAr
              ? "عرض جميع فواتيرك، تنزيل ملفات PDF، ومراجعة سجل الدفع"
              : "View all your invoices, download PDFs, and review payment history"}
          </p>
        </div>
        <InvoicesCard lang={lang} limit={10} />
      </section>

      {/* Quick Actions */}
      <section className="rounded-xl border-2 border-dashed border-slate-300 p-6 bg-white/50">
        <h3 className="text-sm font-semibold text-slate-900 mb-4">
          {isAr ? "⚡ إجراءات سريعة" : "⚡ Quick Actions"}
        </h3>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
          <button
            onClick={handleUpgradeClick}
            className="rounded-lg border border-slate-200 bg-white p-4 text-left hover:border-brand-green hover:bg-emerald-50 transition-colors group"
          >
            <div className="text-2xl mb-2 group-hover:scale-110 transition-transform">
              ⬆️
            </div>
            <p className="text-sm font-semibold text-slate-900">
              {isAr ? "ترقية الخطة" : "Upgrade Plan"}
            </p>
            <p className="text-xs text-slate-500 mt-1">
              {isAr ? "احصل على المزيد من المميزات" : "Get more features"}
            </p>
          </button>

          <a
            href={`/${lang}/pricing`}
            className="rounded-lg border border-slate-200 bg-white p-4 text-left hover:border-brand-green hover:bg-emerald-50 transition-colors group"
          >
            <div className="text-2xl mb-2 group-hover:scale-110 transition-transform">
              📊
            </div>
            <p className="text-sm font-semibold text-slate-900">
              {isAr ? "مقارنة الخطط" : "Compare Plans"}
            </p>
            <p className="text-xs text-slate-500 mt-1">
              {isAr ? "اختر الخطة المناسبة" : "Find the right plan"}
            </p>
          </a>

          <button
            onClick={() => window.print()}
            className="rounded-lg border border-slate-200 bg-white p-4 text-left hover:border-slate-300 transition-colors group"
          >
            <div className="text-2xl mb-2 group-hover:scale-110 transition-transform">
              🖨️
            </div>
            <p className="text-sm font-semibold text-slate-900">
              {isAr ? "طباعة الملخص" : "Print Summary"}
            </p>
            <p className="text-xs text-slate-500 mt-1">
              {isAr ? "طباعة تفاصيل الفوترة" : "Print billing details"}
            </p>
          </button>

          <Link
            href={`/${lang}/contact`}
            className="rounded-lg border border-slate-200 bg-white p-4 text-left hover:border-slate-300 transition-colors group"
          >
            <div className="text-2xl mb-2 group-hover:scale-110 transition-transform">
              💬
            </div>
            <p className="text-sm font-semibold text-slate-900">
              {isAr ? "اتصل بالدعم" : "Contact Support"}
            </p>
            <p className="text-xs text-slate-500 mt-1">
              {isAr ? "نحن هنا للمساعدة" : "We are here to help"}
            </p>
          </Link>
        </div>
      </section>
    </div>
  );
}