"use client";

import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  FileText,
  Users,
  Banknote,
  Receipt,
  CalendarDays,
  Loader2,
  ExternalLink,
  Check,
  AlertCircle,
  RefreshCw,
} from "lucide-react";
import {
  createCheckoutSession,
  createCustomerPortalSession,
  getSubscription,
} from "@/lib/supabase/stripe-actions";
import { METERS, type MeterId } from "@/lib/stripe-config";

const MODULE_ICONS: Record<MeterId, typeof FileText> = {
  invoices: FileText,
  employees: Users,
  "payroll-runs": Banknote,
  expenses: Receipt,
  "leave-requests": CalendarDays,
};

const USAGE_DISCLOSURE: Record<MeterId, string> = {
  invoices: "One use is counted each time you create a new invoice. Draft, sent, paid, or overdue invoices all count equally. Editing an existing invoice doesn't add another charge.",
  employees: "One use is counted each time you create a new active employee record. Duplicates count once. Deleting an employee doesn't remove the charge for that month.",
  "payroll-runs": "One use is counted each time you execute a payroll run (click 'Confirm Payroll'). The number of employees in the run doesn't affect the count — one run, one charge.",
  expenses: "One use is counted each time you create a new expense record. Draft and submitted expenses count equally. Editing doesn't add another charge.",
  "leave-requests": "One use is counted each time you submit a new leave request. Editing, approving, or rejecting a request doesn't add additional charges.",
};

export default function PricingContent({ showLayout = true }: { showLayout?: boolean }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [stripeError, setStripeError] = useState(false);
  const [subscription, setSubscription] = useState<{
    status: string;
    cancelAtPeriodEnd: boolean;
  } | null>(null);
  const [usage, setUsage] = useState<{
    invoices: number;
    employees: number;
    payrollRuns: number;
    estimatedCost: number;
  } | null>(null);

  useEffect(() => {
    // Fetch subscription status
    getSubscription()
      .then((s) => { if (s) setSubscription({ status: s.status, cancelAtPeriodEnd: s.cancelAtPeriodEnd }); })
      .catch(() => {});

    // Fetch usage counts from Supabase
    Promise.all([
      fetch("/api/usage").then((r) => r.ok ? r.json() : null).catch(() => null),
    ]).then(([usageData]) => {
      if (usageData) setUsage(usageData);
    }).catch(() => {});
  }, []);

  const isSubscribed = subscription?.status === "active" || subscription?.status === "trialing";

  const handleActivate = async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await createCheckoutSession();
      if (result.error === "already_subscribed") {
        const portal = await createCustomerPortalSession();
        if (portal.error) { setError(portal.error); return; }
        window.location.href = portal.url;
        return;
      }
      if (result.error) { setError(result.error); return; }
      window.location.href = result.url;
    } catch (e: any) {
      // Stripe init failure — silent, disable button
      setStripeError(true);
    } finally {
      setLoading(false);
    }
  };

  const handleManageBilling = async () => {
    setLoading(true);
    setError(null);
    try {
      const result = await createCustomerPortalSession();
      if (result.error) { setError(result.error); return; }
      window.location.href = result.url;
    } catch {
      setError("Failed to open billing portal");
    } finally {
      setLoading(false);
    }
  };

  const modules = Object.values(METERS);

  return (
    <div className={`w-full ${showLayout ? "py-12" : ""}`}>
      {/* Hero */}
      <section className="text-center mb-16">
        <h1 className={`${showLayout ? "text-4xl md:text-5xl" : "text-3xl"} font-serif font-bold text-gray-900 mb-3 leading-tight`}>
          Simple, honest pricing.
        </h1>
        <p className={`font-sans text-base text-gray-400 max-w-lg mx-auto leading-relaxed`}>
          You only pay when you use a feature. No subscriptions, no surprises.
        </p>
      </section>

      {/* Subscription Status */}
      {isSubscribed && (
        <div className="max-w-3xl mx-auto mb-8 bg-emerald-50 border border-emerald-200 rounded-xl p-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Check className="w-5 h-5 text-emerald-600 flex-shrink-0" />
            <div>
              <p className="text-sm font-medium text-emerald-900">Billing active</p>
              <p className="text-xs text-emerald-600">
                {subscription?.cancelAtPeriodEnd ? "Cancels at end of period" : "Your usage is being metered"}
              </p>
            </div>
          </div>
          <Button variant="outline" size="sm" onClick={handleManageBilling} disabled={loading} className="gap-2 cursor-pointer">
            <ExternalLink className="w-3.5 h-3.5" />
            Manage billing
          </Button>
        </div>
      )}

      {/* Error */}
      {error && (
        <div className="max-w-3xl mx-auto mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      {/* Usage Summary Card */}
      {usage && (
        <div className="max-w-3xl mx-auto mb-12 bg-[#E1F5EE] border border-teal-100 rounded-xl p-6">
          <div className="flex items-center justify-between mb-5">
            <h2 className="text-lg font-bold text-gray-900">Current usage</h2>
            <span className="text-xs text-gray-400 flex items-center gap-1">
              <RefreshCw className="w-3 h-3" /> Resets on the 1st
            </span>
          </div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
            <div>
              <p className="text-xs text-gray-500 mb-1">Invoices</p>
              <p className="text-2xl font-bold text-gray-900">{usage.invoices}</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">Employees</p>
              <p className="text-2xl font-bold text-gray-900">{usage.employees}</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">Payroll runs</p>
              <p className="text-2xl font-bold text-gray-900">{usage.payrollRuns}</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">Est. bill</p>
              <p className="text-2xl font-bold text-[#1D9E75]">${(usage.estimatedCost / 100).toFixed(2)}</p>
            </div>
          </div>
        </div>
      )}

      {/* Module Cards */}
      <section className="max-w-5xl mx-auto mb-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
          {modules.map((meter) => {
            const Icon = MODULE_ICONS[meter.id];
            return (
              <div
                key={meter.id}
                className="bg-white border border-gray-100 border-l-4 border-l-[#1D9E75] rounded-r-xl shadow-sm hover:shadow-md transition-all duration-200 p-6"
              >
                <div className="flex items-start gap-3 mb-3">
                  <Icon className="w-5 h-5 text-[#1D9E75] flex-shrink-0 mt-0.5" />
                  <div>
                    <h3 className="text-sm font-semibold text-gray-900">{meter.name}</h3>
                    <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">{meter.description}</p>
                  </div>
                </div>

                <div className="flex items-baseline gap-1.5 mt-4 mb-1">
                  <span className="text-2xl font-bold text-[#1D9E75]">
                    ${(meter.pricePerUnit / 100).toFixed(meter.pricePerUnit < 100 ? 2 : 0)}
                  </span>
                  <span className="text-xs text-gray-400">per use</span>
                </div>

                {/* Expandable disclosure */}
                <Accordion type="single" collapsible className="mt-3 -mx-6">
                  <AccordionItem value="disclosure" className="border-t-0">
                    <AccordionTrigger className="px-6 py-2.5 text-xs text-gray-400 hover:text-gray-600 hover:no-underline">
                      What counts as a use?
                    </AccordionTrigger>
                    <AccordionContent className="px-6 pb-3">
                      <p className="text-xs text-gray-500 leading-relaxed">{USAGE_DISCLOSURE[meter.id]}</p>
                    </AccordionContent>
                  </AccordionItem>
                </Accordion>
              </div>
            );
          })}
        </div>
      </section>

      {/* Activate Billing — Bottom CTA */}
      {showLayout && (
        <section className="mt-24 py-24 bg-[#1D9E75] rounded-[3rem] text-center px-8 relative overflow-hidden shadow-2xl shadow-teal-900/20">
          <div className="absolute top-0 left-0 w-64 h-64 bg-white/5 rounded-full -translate-x-1/2 -translate-y-1/2 blur-3xl" />
          <div className="absolute bottom-0 right-0 w-96 h-96 bg-black/5 rounded-full translate-x-1/3 translate-y-1/3 blur-3xl" />

          <div className="max-w-3xl mx-auto relative z-10">
            <h2 className="text-4xl font-serif text-white mb-4 leading-tight">
              Ready to simplify your business?
            </h2>
            <p className="text-white/80 mb-10 text-lg max-w-lg mx-auto leading-relaxed">
              Start free. Pay only when you use a feature.
            </p>

            {/* Activate Billing Button */}
            <div className="flex flex-col items-center gap-4">
              <button
                onClick={isSubscribed ? handleManageBilling : handleActivate}
                disabled={loading || stripeError}
                className="bg-white text-[#1D9E75] hover:bg-gray-100 disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed cursor-pointer shadow-xl hover:scale-105 active:scale-95 disabled:hover:scale-100 transition-all duration-300 font-bold px-10 py-3 rounded-lg text-sm flex items-center gap-2"
                title={stripeError ? "Billing temporarily unavailable" : undefined}
              >
                {loading ? (
                  <Loader2 className="w-4 h-4 animate-spin" />
                ) : stripeError ? (
                  <AlertCircle className="w-4 h-4" />
                ) : isSubscribed ? (
                  <ExternalLink className="w-4 h-4" />
                ) : (
                  <Check className="w-4 h-4" />
                )}
                {loading
                  ? "Redirecting to Stripe..."
                  : stripeError
                    ? "Billing temporarily unavailable"
                    : isSubscribed
                      ? "Manage billing"
                      : "Enable billing — start for free"}
              </button>
              <p className="text-white/40 text-xs max-w-sm leading-relaxed">
                You won't be charged until you exceed the free tier. Cancel anytime from settings.
              </p>
            </div>
          </div>
        </section>
      )}
    </div>
  );
}