"use client";

import Image from "next/image";
import { Check, Star, Clock } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn, formatCurrency, formatDate } from "@/utils";
import type { Plan } from "@/types";

interface PricingCardProps {
  plan: Plan;
  isCurrentPlan?: boolean;
  isNextPlan?: boolean;
  nextPlanStartDate?: string | null;
  onSelect: (planId: string) => void;
  isLoading?: boolean;
  isAuthenticated?: boolean;
}

function parseFeatures(features?: string): string[] {
  if (!features) return [];
  try {
    const parsed = JSON.parse(features);
    return Array.isArray(parsed) ? parsed : [];
  } catch {
    return features
      .split(",")
      .map((f) => f.trim())
      .filter(Boolean);
  }
}

export function PricingCard({
  plan,
  isCurrentPlan,
  isNextPlan,
  nextPlanStartDate,
  onSelect,
  isLoading,
  isAuthenticated,
}: PricingCardProps) {
  const isPopular = plan.sort_order === 1;
  const yearlyPrice = plan.interval === "year";
  const monthlyEquiv = yearlyPrice ? plan.price / 12 : null;
  const featuresList = parseFeatures(plan.features);

  return (
    <div
      className={cn(
        "relative rounded-2xl border p-8 flex flex-col transition-all duration-300 h-full",
        isPopular
          ? "border-brand-500/30 bg-brand-500/[0.03] dark:bg-brand-400/[0.06] shadow-lg shadow-brand-500/10"
          : "border-border bg-card hover:border-brand-500/15 shadow-card hover:shadow-card-hover",
        isCurrentPlan && "ring-2 ring-brand-500/50",
        isNextPlan && !isCurrentPlan && "ring-2 ring-blue-500/50",
      )}
    >
      {isPopular && (
        <div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
          <span className="inline-flex items-center gap-1.5 rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white">
            <Star className="h-3 w-3 fill-white" />
            Most Popular
          </span>
        </div>
      )}

      {isCurrentPlan && (
        <div className="absolute -top-3.5 right-4">
          <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500 px-3 py-1 text-xs font-semibold text-white">
            Current Plan
          </span>
        </div>
      )}

      {isNextPlan && !isCurrentPlan && (
        <div className="absolute -top-3.5 right-4">
          <span className="inline-flex items-center gap-1 rounded-full bg-blue-500 px-3 py-1 text-xs font-semibold text-white">
            <Clock className="h-3 w-3" />
            Scheduled
          </span>
        </div>
      )}

      <div className="space-y-1 mb-6">
        <h3 className="text-lg font-semibold">{plan.name}</h3>
        {plan.description && (
          <div
            className="text-sm text-muted-foreground max-h-40 overflow-y-auto"
            dangerouslySetInnerHTML={{ __html: plan.description }}
          />
        )}
      </div>

      <div className="mb-6">
        <div className="flex items-end gap-1">
          <span className="text-4xl font-bold">
            {formatCurrency(plan.price, plan.currency)}
          </span>
          <span className="text-muted-foreground text-sm mb-1.5">
            / {plan.interval}
          </span>
        </div>
        {monthlyEquiv && (
          <p className="text-sm text-muted-foreground mt-1">
            <span className="text-brand-500 dark:text-brand-300 font-medium">
              {formatCurrency(
                Math.round(monthlyEquiv * 100) / 100,
                plan.currency,
              )}
            </span>{" "}
            / month — billed annually
          </p>
        )}
      </div>

      {featuresList.length > 0 && (
        <ul className="space-y-3 mb-8 flex-1">
          {featuresList.map((feature) => (
            <li key={feature} className="flex items-start gap-3 text-sm">
              <Check className="h-4 w-4 text-brand-500 dark:text-brand-300 mt-0.5 shrink-0" />
              <span className="text-muted-foreground">{feature}</span>
            </li>
          ))}
        </ul>
      )}

      {isNextPlan && !isCurrentPlan && nextPlanStartDate && (
        <p className="text-xs text-blue-500 dark:text-blue-400 text-center mb-2">
          Starts {formatDate(nextPlanStartDate)}
        </p>
      )}

      <Button
        variant={isPopular ? "gold" : "gold-outline"}
        size="lg"
        className="w-full"
        onClick={() => onSelect(String(plan.id))}
        disabled={isCurrentPlan || isNextPlan || isLoading}
        loading={isLoading}
      >
        {isCurrentPlan ? (
          "Current Plan"
        ) : isNextPlan ? (
          "Scheduled"
        ) : (
          <>
            <Image src="/logo.png" alt="" width={16} height={16} className="object-contain" />
            {isAuthenticated ? "Get Started" : "Subscribe Now"}
          </>
        )}
      </Button>
    </div>
  );
}

// ─── Free Trial Card ──────────────────────────────────────────────────────────

interface FreeTrialCardProps {
  onStartTrial: () => void;
  isLoading?: boolean;
  hasTrialed?: boolean;
}

export function FreeTrialCard({
  onStartTrial,
  isLoading,
  hasTrialed,
}: FreeTrialCardProps) {
  return (
    <div className="rounded-2xl border border-border bg-card shadow-card p-8 flex flex-col hover:border-brand-500/15 hover:shadow-card-hover transition-all duration-300 h-full">
      <div className="space-y-1 mb-6">
        <h3 className="text-lg font-semibold">Free Trial</h3>
        <p className="text-sm text-muted-foreground">
          Try all premium features risk-free
        </p>
      </div>

      <div className="mb-6">
        <div className="flex items-end gap-1">
          <span className="text-4xl font-bold">Free</span>
          <span className="text-muted-foreground text-sm mb-1.5">/ 3 days</span>
        </div>
        <p className="text-sm text-muted-foreground mt-1">
          No credit card required
        </p>
      </div>

      <ul className="space-y-3 mb-8 flex-1">
        {[
          "Full premium access for 3 days",
          "Create & edit unlimited records",
          "All app features unlocked",
          "No payment required",
        ].map((feature) => (
          <li key={feature} className="flex items-start gap-3 text-sm">
            <Check className="h-4 w-4 text-brand-500 dark:text-brand-300 mt-0.5 shrink-0" />
            <span className="text-muted-foreground">{feature}</span>
          </li>
        ))}
      </ul>

      <Button
        variant="glass"
        size="lg"
        className="w-full"
        onClick={onStartTrial}
        disabled={hasTrialed || isLoading}
        loading={isLoading}
      >
        {hasTrialed ? "Trial Already Used" : "Try for Free"}
      </Button>
    </div>
  );
}