"use client";

import Link from "next/link";
import { Check, X } from "lucide-react";
import { GlassContainer } from "@/components/ui/GlassContainer";

interface PlanFeature {
  feature: string;
  free: string | boolean;
  pro: string | boolean;
  team: string | boolean;
}

const features: PlanFeature[] = [
  { feature: "Local inference", free: true, pro: true, team: true },
  { feature: "OpenAI + Anthropic proxy", free: true, pro: true, team: true },
  { feature: "Intelligent router", free: "Tier 1 only", pro: "All 3 tiers", team: "All 3 tiers" },
  { feature: "Verified semantic cache", free: true, pro: true, team: true },
  { feature: "Devices", free: "1", pro: "Up to 5", team: "Unlimited" },
  { feature: "Cloud fallback (BYOK)", free: false, pro: true, team: true },
  { feature: "Remote access (tunnel)", free: false, pro: true, team: true },
  { feature: "TUI dashboard", free: true, pro: true, team: true },
  { feature: "Web dashboard", free: false, pro: true, team: true },
  { feature: "Hive mode (GPU pooling)", free: false, pro: false, team: true },
  { feature: "Marketplace access", free: false, pro: false, team: true },
  { feature: "SSO / SAML", free: false, pro: false, team: true },
  { feature: "SLA guarantee", free: false, pro: false, team: "99.9%" },
  { feature: "Support", free: "Community", pro: "Priority email", team: "Dedicated Slack" },
  { feature: "Prometheus metrics", free: true, pro: true, team: true },
  { feature: "Audit logging", free: false, pro: true, team: true },
];

function FeatureCell({ value }: { value: string | boolean }) {
  if (typeof value === "boolean") {
    return value ? (
      <Check className="h-4 w-4 text-emerald-400" />
    ) : (
      <X className="h-4 w-4 text-gray-600" />
    );
  }
  return <span className="text-gray-300 text-sm">{value}</span>;
}

export default function PricingDocsContent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight text-white">
        Pricing
      </h1>
      <p className="mt-4 text-lg text-gray-400">
        LLMHosts is free for local inference on a single device. Upgrade for
        multi-device mesh, remote access, and enterprise features.
      </p>

      {/* Plan cards */}
      <div className="mt-12 grid gap-6 sm:grid-cols-3">
        {/* Free */}
        <GlassContainer intensity="subtle" className="p-6">
          <h2 className="text-lg font-semibold text-white">Free</h2>
          <div className="mt-2">
            <span className="text-3xl font-bold text-white">$0</span>
            <span className="text-gray-500">/mo</span>
          </div>
          <p className="mt-3 text-sm text-gray-400">
            Local inference, single device. Everything you need to run AI on
            your own hardware.
          </p>
          <ul className="mt-6 space-y-2 text-sm text-gray-400">
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Local inference on 1 device
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              OpenAI + Anthropic compatible API
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Semantic cache
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              TUI dashboard
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Community support
            </li>
          </ul>
        </GlassContainer>

        {/* Pro */}
        <GlassContainer
          intensity="default"
          glow
          glowColor="rgba(124,58,237,0.20)"
          className="p-6 relative"
        >
          <div className="absolute -top-3 right-4 rounded-full bg-violet-600 px-3 py-0.5 text-xs font-semibold text-white">
            Popular
          </div>
          <h2 className="text-lg font-semibold text-white">Pro</h2>
          <div className="mt-2">
            <span className="text-3xl font-bold text-white">$29</span>
            <span className="text-gray-500">/mo</span>
          </div>
          <p className="mt-3 text-sm text-gray-400">
            Multi-device mesh with cloud fallback and remote access. For serious
            builders.
          </p>
          <ul className="mt-6 space-y-2 text-sm text-gray-400">
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Up to 5 devices
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Cloud fallback (BYOK)
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Secure remote access
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Web dashboard
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              All 3 router tiers
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Priority email support
            </li>
          </ul>
        </GlassContainer>

        {/* Team */}
        <GlassContainer intensity="subtle" className="p-6">
          <h2 className="text-lg font-semibold text-white">Team</h2>
          <div className="mt-2">
            <span className="text-3xl font-bold text-white">$99</span>
            <span className="text-gray-500">/seat/mo</span>
          </div>
          <p className="mt-3 text-sm text-gray-400">
            Unlimited devices, GPU pooling, marketplace, SSO, and SLA. For
            teams and enterprises.
          </p>
          <ul className="mt-6 space-y-2 text-sm text-gray-400">
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Unlimited devices
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Hive mode (GPU pooling)
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Marketplace access
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              SSO / SAML
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              99.9% SLA guarantee
            </li>
            <li className="flex items-center gap-2">
              <Check className="h-4 w-4 text-emerald-400 shrink-0" />
              Dedicated Slack support
            </li>
          </ul>
        </GlassContainer>
      </div>

      {/* Feature comparison table */}
      <section className="mt-16">
        <h2 className="text-2xl font-semibold text-white mb-6">
          Feature Comparison
        </h2>
        <GlassContainer intensity="subtle" className="overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-white/10">
                  <th className="py-3 pl-5 pr-4 text-left font-medium text-gray-300">
                    Feature
                  </th>
                  <th className="py-3 px-4 text-center font-medium text-gray-300">
                    Free
                  </th>
                  <th className="py-3 px-4 text-center font-medium text-violet-400">
                    Pro
                  </th>
                  <th className="py-3 px-4 pr-5 text-center font-medium text-gray-300">
                    Team
                  </th>
                </tr>
              </thead>
              <tbody className="text-gray-400">
                {features.map((row) => (
                  <tr
                    key={row.feature}
                    className="border-b border-white/[0.06] last:border-0"
                  >
                    <td className="py-3 pl-5 pr-4 text-gray-300">
                      {row.feature}
                    </td>
                    <td className="py-3 px-4 text-center">
                      <div className="flex justify-center">
                        <FeatureCell value={row.free} />
                      </div>
                    </td>
                    <td className="py-3 px-4 text-center">
                      <div className="flex justify-center">
                        <FeatureCell value={row.pro} />
                      </div>
                    </td>
                    <td className="py-3 px-4 pr-5 text-center">
                      <div className="flex justify-center">
                        <FeatureCell value={row.team} />
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </GlassContainer>
      </section>

      {/* CTA */}
      <section className="mt-12 text-center">
        <p className="text-gray-400">
          Ready to get started?{" "}
          <Link
            href="/pricing"
            className="text-violet-400 hover:text-violet-300 font-medium transition-colors"
          >
            View pricing page
          </Link>{" "}
          or{" "}
          <Link
            href="/auth/register"
            className="text-violet-400 hover:text-violet-300 font-medium transition-colors"
          >
            create a free account
          </Link>
          .
        </p>
      </section>
    </div>
  );
}
