"use client";

import { useFeatureBenefits } from "@/lib/hooks/use-subscription";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";

export function FeatureComparison() {
  const { data: features, isLoading } = useFeatureBenefits();

  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Plan Comparison</CardTitle>
          <CardDescription>See what each plan includes.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="flex items-center justify-between">
                <Skeleton className="h-4 w-40" />
                <div className="flex gap-8">
                  <Skeleton className="size-5 rounded-full" />
                  <Skeleton className="size-5 rounded-full" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!features || features.length === 0) return null;

  const sortedFeatures = [...features].sort((a, b) => a.display_order - b.display_order);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Plan Comparison</CardTitle>
        <CardDescription>See what each plan includes.</CardDescription>
      </CardHeader>
      <CardContent>
        {/* Table header */}
        <div className="flex items-center justify-between border-b pb-3 mb-3">
          <span className="text-sm font-medium text-muted-foreground">Feature</span>
          <div className="flex gap-8 text-sm font-medium text-muted-foreground">
            <span className="w-24 text-center">Free</span>
            <span className="w-24 text-center">Pro</span>
          </div>
        </div>

        {/* Feature rows */}
        <div className="space-y-3">
          {sortedFeatures.map((feature, index) => (
            <div key={feature.feature_name || index} className="flex items-center justify-between py-1">
              <p className="text-sm font-medium">{feature.feature_name}</p>
              <div className="flex gap-8 shrink-0">
                <span className="w-24 text-center text-sm text-muted-foreground">
                  {feature.free_tier_text}
                </span>
                <span className="w-24 text-center text-sm font-medium">
                  {feature.pro_tier_text}
                </span>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
