import { CREDIT_PACKAGES } from "@/lib/stripe";

export const metadata = { title: "Credit Packages — Admin" };

export default function AdminCreditsPage() {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Credit Packages</h1>
          <p className="text-text-muted text-sm mt-1">
            View all credit packages and pricing tiers
          </p>
        </div>
        <div className="flex items-center gap-2 bg-gold/10 border border-gold/30 rounded-lg px-4 py-2">
          <svg className="w-4 h-4 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span className="text-gold text-sm font-medium">
            {CREDIT_PACKAGES.length} packages
          </span>
        </div>
      </div>

      {/* Table */}
      <div className="bg-surface rounded-xl border border-surface-light overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-surface-light">
                <th className="text-left text-xs font-semibold text-text-muted uppercase tracking-wider px-6 py-4">
                  Package
                </th>
                <th className="text-right text-xs font-semibold text-text-muted uppercase tracking-wider px-6 py-4">
                  Credits
                </th>
                <th className="text-right text-xs font-semibold text-text-muted uppercase tracking-wider px-6 py-4">
                  Price (EUR)
                </th>
                <th className="text-right text-xs font-semibold text-text-muted uppercase tracking-wider px-6 py-4">
                  Per Credit
                </th>
                <th className="text-right text-xs font-semibold text-text-muted uppercase tracking-wider px-6 py-4">
                  Savings
                </th>
                <th className="text-center text-xs font-semibold text-text-muted uppercase tracking-wider px-6 py-4">
                  Status
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-surface-light">
              {CREDIT_PACKAGES.map((pkg) => (
                <tr
                  key={pkg.id}
                  className="hover:bg-surface-light/50 transition-colors"
                >
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-3">
                      <div className="w-8 h-8 rounded-lg bg-gold/10 border border-gold/30 flex items-center justify-center">
                        <svg className="w-4 h-4 text-gold" viewBox="0 0 24 24" fill="currentColor">
                          <circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.2" />
                          <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="none" />
                        </svg>
                      </div>
                      <div>
                        <p className="text-white font-medium text-sm">{pkg.label}</p>
                        <p className="text-text-muted text-xs">{pkg.id}</p>
                      </div>
                    </div>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <span className="text-gold font-bold">{pkg.credits.toLocaleString()}</span>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <span className="text-white font-medium">{pkg.priceLabel}</span>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <span className="text-text-muted">{pkg.perCredit}</span>
                  </td>
                  <td className="px-6 py-4 text-right">
                    {pkg.savings > 0 ? (
                      <span className="inline-flex items-center bg-green-500/10 text-green-400 text-xs font-semibold px-2 py-1 rounded-full">
                        {pkg.savings}% off
                      </span>
                    ) : (
                      <span className="text-text-muted text-sm">-</span>
                    )}
                  </td>
                  <td className="px-6 py-4 text-center">
                    <span className="inline-flex items-center bg-green-500/10 text-green-400 text-xs font-semibold px-2.5 py-1 rounded-full">
                      <span className="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5" />
                      Active
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Info banner */}
      <div className="bg-gold/5 border border-gold/20 rounded-xl p-4 flex items-start gap-3">
        <svg className="w-5 h-5 text-gold flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
          <p className="text-gold font-medium text-sm">Pricing is currently managed in code</p>
          <p className="text-text-muted text-sm mt-1">
            Credit packages are defined in <code className="text-gold/80 bg-gold/10 px-1.5 py-0.5 rounded text-xs">src/lib/stripe.ts</code>.
            Contact the developer to add, edit, or remove packages.
          </p>
        </div>
      </div>
    </div>
  );
}