'use client';

import { useState } from 'react';

interface InstallOption {
  label: string;
  description: string;
  command: string;
}

const options: InstallOption[] = [
  {
    label: 'Public domain',
    description: 'You own example.com — automatic Let\'s Encrypt certs, no client setup.',
    command: 'curl -fsSL https://get.dashcaddy.net | bash -s -- --domain dashcaddy.example.com',
  },
  {
    label: 'Custom TLD',
    description: 'Home network with dashcaddy.home — clients install the DashCA root cert.',
    command: 'curl -fsSL https://get.dashcaddy.net | bash -s -- --domain dashcaddy.home',
  },
  {
    label: 'Quick test',
    description: 'Local IP install — ideal for a first run on a fresh VM.',
    command: 'curl -fsSL https://get.dashcaddy.net | bash -s -- quick',
  },
];

export default function InstallCommand() {
  const [active, setActive] = useState(0);
  const [copied, setCopied] = useState(false);

  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(options[active].command);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      /* noop */
    }
  };

  return (
    <section className="relative py-16 sm:py-20 lg:py-24 overflow-hidden">
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[40rem] h-[40rem] bg-brand-500/10 rounded-full blur-3xl opacity-40" />
      </div>

      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10">
          <span className="inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-400">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
            </span>
            One-line install
          </span>
          <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold text-surface-50">
            Live in <span className="text-brand-400">60 seconds</span>
          </h2>
          <p className="mt-4 text-lg text-surface-400 max-w-2xl mx-auto">
            Pick your mode, paste one command, and the installer handles Docker, Caddy, the wizard, and your first login.
          </p>
        </div>

        <div className="rounded-2xl border border-surface-700/50 bg-surface-900/60 backdrop-blur p-1 shadow-2xl shadow-brand-500/10">
          {/* Mode tabs */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-1 p-1">
            {options.map((opt, i) => (
              <button
                key={opt.label}
                onClick={() => setActive(i)}
                className={`rounded-xl px-4 py-3 text-left transition-all ${
                  active === i
                    ? 'bg-surface-800/80 ring-1 ring-brand-500/40'
                    : 'hover:bg-surface-800/40'
                }`}
              >
                <div className={`text-sm font-semibold ${active === i ? 'text-brand-400' : 'text-surface-200'}`}>
                  {opt.label}
                </div>
                <div className="text-xs text-surface-500 mt-0.5 hidden sm:block">
                  {opt.description}
                </div>
              </button>
            ))}
          </div>

          {/* Terminal-style command display */}
          <div className="relative rounded-xl mt-2 overflow-hidden border border-surface-700/50 bg-surface-950">
            <div className="flex items-center justify-between border-b border-surface-700/50 px-4 py-2 bg-surface-900/70">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 rounded-full bg-red-500/60" />
                <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
                <div className="w-3 h-3 rounded-full bg-green-500/60" />
              </div>
              <span className="text-xs font-mono text-surface-500">get.dashcaddy.net</span>
              <button
                onClick={onCopy}
                className="text-xs text-surface-400 hover:text-brand-400 transition-colors font-medium"
              >
                {copied ? '✓ Copied' : 'Copy'}
              </button>
            </div>
            <div className="p-5 font-mono text-sm overflow-x-auto">
              <span className="text-green-400 select-none">$ </span>
              <span className="text-surface-100">{options[active].command}</span>
              <span className="ml-1 inline-block w-2 h-4 bg-brand-400 animate-pulse align-middle" />
            </div>
          </div>

          {/* After-install expectations */}
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-4 px-1">
            <div className="flex items-start gap-3 p-3 rounded-lg bg-surface-900/40 border border-surface-700/30">
              <span className="text-brand-400 text-lg">⚡</span>
              <div>
                <div className="text-sm font-semibold text-surface-100">~60 seconds</div>
                <div className="text-xs text-surface-500">From curl to ready dashboard</div>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-surface-900/40 border border-surface-700/30">
              <span className="text-brand-400 text-lg">🧙</span>
              <div>
                <div className="text-sm font-semibold text-surface-100">Zero YAML</div>
                <div className="text-xs text-surface-500">Wizard configures everything</div>
              </div>
            </div>
            <div className="flex items-start gap-3 p-3 rounded-lg bg-surface-900/40 border border-surface-700/30">
              <span className="text-brand-400 text-lg">🔄</span>
              <div>
                <div className="text-sm font-semibold text-surface-100">Idempotent</div>
                <div className="text-xs text-surface-500">Re-run safely to update</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
