'use client';

interface Capability {
  feature: string;
  dashcaddy: boolean | string;
  values: Record<string, boolean | string>;
}

// The "values" map uses string "—" to indicate "not applicable / not available"
// and true / false for the supported check. Where accurate, we use short text
// like "Partial" or "Plugin" to be honest about the gap.
const rows: Capability[] = [
  {
    feature: 'AI Intent Router (natural language)',
    dashcaddy: true,
    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
  },
  {
    feature: 'MCP Server for AI assistants',
    dashcaddy: true,
    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
  },
  {
    feature: 'One-click Docker templates',
    dashcaddy: '77 apps',
    values: { 'Portainer': 'Manual', 'CasaOS': '~120 apps', 'YunoHost': '~500 apps', 'Unraid': 'Community', 'Cosmos Cloud': '~30 apps' },
  },
  {
    feature: 'Automatic SSL (Let\'s Encrypt or internal CA)',
    dashcaddy: true,
    values: { 'Portainer': 'Manual', 'CasaOS': true, 'YunoHost': true, 'Unraid': 'Manual', 'Cosmos Cloud': true },
  },
  {
    feature: 'Automatic DNS record management',
    dashcaddy: true,
    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': 'Partial', 'Unraid': false, 'Cosmos Cloud': 'Partial' },
  },
  {
    feature: 'Internal PKI / CA for private TLDs',
    dashcaddy: true,
    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
  },
  {
    feature: 'WebSocket real-time updates',
    dashcaddy: true,
    values: { 'Portainer': 'Partial', 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': 'Partial' },
  },
  {
    feature: 'Unified Security Center (multi-source events)',
    dashcaddy: true,
    values: { 'Portainer': false, 'CasaOS': false, 'YunoHost': false, 'Unraid': false, 'Cosmos Cloud': false },
  },
  {
    feature: 'Multi-host fleet management',
    dashcaddy: 'Premium',
    values: { 'Portainer': 'Business', 'CasaOS': false, 'YunoHost': false, 'Unraid': true, 'Cosmos Cloud': false },
  },
  {
    feature: 'Plugin / extension system',
    dashcaddy: true,
    values: { 'Portainer': 'Limited', 'CasaOS': true, 'YunoHost': true, 'Unraid': 'Community', 'Cosmos Cloud': 'Limited' },
  },
  {
    feature: 'Open-source core',
    dashcaddy: 'Proprietary',
    values: { 'Portainer': 'CE + Business', 'CasaOS': true, 'YunoHost': true, 'Unraid': 'Proprietary', 'Cosmos Cloud': true },
  },
  {
    feature: 'Built-in user accounts + RBAC',
    dashcaddy: true,
    values: { 'Portainer': 'Business', 'CasaOS': false, 'YunoHost': true, 'Unraid': 'Plugin', 'Cosmos Cloud': 'Partial' },
  },
];

const competitors = ['Portainer', 'CasaOS', 'YunoHost', 'Unraid', 'Cosmos Cloud'] as const;

function Cell({ value, highlight }: { value: boolean | string; highlight?: boolean }) {
  if (value === true) {
    return (
      <span className={`inline-flex items-center justify-center w-6 h-6 rounded-full ${highlight ? 'bg-brand-500/20 text-brand-400' : 'bg-green-500/20 text-green-400'}`}>
        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
        </svg>
      </span>
    );
  }
  if (value === false) {
    return <span className="text-surface-600">—</span>;
  }
  return <span className={`text-xs ${highlight ? 'text-brand-400 font-medium' : 'text-surface-400'}`}>{value}</span>;
}

export default function CompetitorComparison() {
  return (
    <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-12 text-center">
          <span className="inline-flex items-center rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
            Honest comparison
          </span>
          <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold text-surface-50">
            How DashCaddy compares
          </h2>
          <p className="mt-4 text-lg text-surface-400 max-w-2xl mx-auto">
            DashCaddy isn&apos;t the right tool for everyone. Here&apos;s where it wins and where the alternatives are stronger.
          </p>
        </div>

        <div className="overflow-x-auto rounded-2xl border border-surface-700/50 bg-surface-900/50 backdrop-blur-sm">
          <table className="w-full min-w-[820px]">
            <thead>
              <tr className="border-b border-surface-700/50">
                <th className="px-4 py-4 text-left text-sm font-semibold text-surface-300 bg-surface-900/70">
                  Capability
                </th>
                <th className="px-4 py-4 text-center text-sm font-semibold text-brand-400 bg-surface-900/80 border-l border-r border-brand-500/30">
                  DashCaddy
                </th>
                {[...competitors].map((c) => (
                  <th key={c} className="px-4 py-4 text-center text-sm font-semibold text-surface-300 bg-surface-900/50">
                    {c}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="divide-y divide-surface-700/30">
              {rows.map((row, i) => (
                <tr key={row.feature} className={`hover:bg-surface-800/30 transition-colors ${i % 2 === 1 ? 'bg-surface-900/20' : ''}`}>
                  <td className="px-4 py-4 text-sm text-surface-300">{row.feature}</td>
                  <td className="px-4 py-4 text-center border-l border-r border-brand-500/20 bg-brand-500/5">
                    <Cell value={row.dashcaddy} highlight />
                  </td>
                  {competitors.map((c) => (
                    <td key={c} className="px-4 py-4 text-center">
                      <Cell value={row.values[c]} />
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="rounded-lg border border-surface-700/50 bg-surface-800/40 p-4">
            <div className="text-2xl mb-2">🎯</div>
            <h3 className="text-sm font-semibold text-surface-50 mb-1">Where DashCaddy wins</h3>
            <p className="text-xs text-surface-400">
              AI-native control plane, MCP server, automatic DNS+SSL chain, internal PKI for private TLDs, unified security events.
            </p>
          </div>
          <div className="rounded-lg border border-surface-700/50 bg-surface-800/40 p-4">
            <div className="text-2xl mb-2">🤝</div>
            <h3 className="text-sm font-semibold text-surface-50 mb-1">Where it ties</h3>
            <p className="text-xs text-surface-400">
              One-click apps, real-time updates, plugin systems, user accounts with RBAC are table stakes. DashCaddy does all of them.
            </p>
          </div>
          <div className="rounded-lg border border-surface-700/50 bg-surface-800/40 p-4">
            <div className="text-2xl mb-2">🏆</div>
            <h3 className="text-sm font-semibold text-surface-50 mb-1">Where others win</h3>
            <p className="text-xs text-surface-400">
              YunoHost has 500+ packaged apps. Unraid has a mature community app store. If raw app count is the only thing you care about, those are better.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
