"use client";

import { Check } from "lucide-react";

export default function BillingPage() {
  const plans = [
    {
      name: "Free",
      price: "$0",
      description: "Perfect for getting started",
      features: [
        "10 messages/month",
        "Access to featured characters",
        "Basic support",
      ],
      current: true,
    },
    {
      name: "Pro",
      price: "$9.99",
      period: "/month",
      description: "For serious enthusiasts",
      features: [
        "Unlimited messages",
        "Priority character creation",
        "Custom characters",
        "Ad-free experience",
        "Priority support",
      ],
      current: false,
    },
    {
      name: "Premium",
      price: "$29.99",
      period: "/month",
      description: "Maximum experience",
      features: [
        "Everything in Pro",
        "Advanced AI models",
        "Character voice customization",
        "Private character storage",
        "White-label options",
        "24/7 VIP support",
      ],
      current: false,
    },
  ];

  return (
    <div className="p-6 max-w-5xl mx-auto">
      {/* Header */}
      <div className="mb-12">
        <h1 className="text-3xl font-bold mb-2">Billing & Plans</h1>
        <p className="text-gray-600">Manage your subscription</p>
      </div>

      {/* Current Plan */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-12">
        <p className="text-sm text-blue-600 font-semibold">CURRENT PLAN</p>
        <h3 className="text-2xl font-bold mt-2">Free Plan</h3>
        <p className="text-gray-600 mt-1">You're currently on the free plan</p>
      </div>

      {/* Plans Grid */}
      <div className="grid md:grid-cols-3 gap-8">
        {plans.map((plan, index) => (
          <div
            key={index}
            className={`rounded-xl border-2 p-8 transition ${
              plan.current
                ? "border-black bg-white"
                : "border-gray-200 hover:border-black"
            }`}
          >
            {/* Badge */}
            {plan.current && (
              <div className="inline-block bg-black text-white px-3 py-1 rounded-full text-xs font-semibold mb-4">
                Current Plan
              </div>
            )}

            {/* Plan Name */}
            <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
            <p className="text-gray-600 text-sm mb-6">{plan.description}</p>

            {/* Price */}
            <div className="mb-6">
              <span className="text-4xl font-bold">{plan.price}</span>
              {plan.period && <span className="text-gray-600">{plan.period}</span>}
            </div>

            {/* CTA */}
            <button
              className={`w-full py-3 rounded-lg font-medium mb-6 transition ${
                plan.current
                  ? "bg-gray-100 text-gray-600 cursor-default"
                  : "bg-black text-white hover:bg-gray-800"
              }`}
              disabled={plan.current}
            >
              {plan.current ? "Current Plan" : "Upgrade"}
            </button>

            {/* Features */}
            <ul className="space-y-3">
              {plan.features.map((feature, idx) => (
                <li key={idx} className="flex items-start gap-3 text-sm">
                  <Check className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Billing History */}
      <div className="mt-12">
        <h2 className="text-2xl font-bold mb-6">Billing History</h2>
        <div className="bg-white border border-gray-200 rounded-xl overflow-hidden">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="px-6 py-3 text-left text-sm font-semibold">Date</th>
                <th className="px-6 py-3 text-left text-sm font-semibold">Description</th>
                <th className="px-6 py-3 text-left text-sm font-semibold">Amount</th>
                <th className="px-6 py-3 text-left text-sm font-semibold">Status</th>
              </tr>
            </thead>
            <tbody>
              {[
                { date: "Dec 1, 2024", desc: "Free Plan", amount: "$0.00", status: "Active" },
              ].map((row, idx) => (
                <tr key={idx} className="border-b border-gray-200 hover:bg-gray-50">
                  <td className="px-6 py-4 text-sm">{row.date}</td>
                  <td className="px-6 py-4 text-sm">{row.desc}</td>
                  <td className="px-6 py-4 text-sm font-medium">{row.amount}</td>
                  <td className="px-6 py-4 text-sm">
                    <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold">
                      {row.status}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}