'use client'

import { useState } from 'react'
import { Download, Copy, Check } from 'lucide-react'
import { PlatformToggle, usePlatform } from './platform-toggle'

const linuxSteps = [
  {
    label: 'Install',
    cmd: 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh',
  },
  {
    label: 'Dependencies',
    cmd: 'sudo apt install bubblewrap socat',
  },
  {
    label: 'Setup proxy',
    cmd: 'greywall setup',
  },
  {
    label: 'Run sandboxed',
    cmd: 'greywall -- claude',
  },
]

const macosSteps = [
  {
    label: 'Install',
    cmd: 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh',
  },
  {
    label: 'Setup proxy',
    cmd: 'greywall setup',
  },
  {
    label: 'Run sandboxed',
    cmd: 'greywall -- claude',
  },
]

export function GettingStarted() {
  const [platform] = usePlatform()
  const [copiedIdx, setCopiedIdx] = useState<number | null>(null)

  const steps = platform === 'linux' ? linuxSteps : macosSteps

  function copy(text: string, idx: number) {
    navigator.clipboard.writeText(text)
    setCopiedIdx(idx)
    setTimeout(() => setCopiedIdx(null), 2000)
  }

  return (
    <section id="getting-started" className="py-24 px-6 border-t border-border/30">
      <div className="mx-auto max-w-5xl">
        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-12">
          <div className="max-w-2xl">
            <div className="flex items-center gap-2 mb-4">
              <Download className="h-4 w-4 text-primary" />
              <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
                Getting started
              </span>
            </div>
            <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
              {platform === 'linux' ? 'Four steps. Full isolation.' : 'Three commands. Done.'}
            </h2>
            <p className="text-muted-foreground font-serif text-lg leading-relaxed">
              {platform === 'linux'
                ? 'A single Go binary plus two standard packages. No containers, no daemon, no build step.'
                : 'A single Go binary. No extra packages, no containers, no daemon. Uses built-in macOS sandboxing.'}
            </p>
          </div>
          <PlatformToggle />
        </div>

        <div className="space-y-4 max-w-2xl">
          {steps.map((step, i) => (
            <div key={`${platform}-${i}`} className="flex items-center gap-4">
              <div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-sans text-sm font-semibold">
                {i + 1}
              </div>
              <div className="flex-1 code-block p-3 flex items-center gap-3">
                <span className="text-xs font-sans text-muted-foreground shrink-0 w-24">
                  {step.label}
                </span>
                <code className="flex-1 font-mono text-sm text-greyhaven-offwhite truncate">
                  {step.cmd}
                </code>
                <button
                  onClick={() => copy(step.cmd, i)}
                  className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
                >
                  {copiedIdx === i ? (
                    <Check className="h-3.5 w-3.5 text-primary" />
                  ) : (
                    <Copy className="h-3.5 w-3.5" />
                  )}
                </button>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-2xl">
          <div className="p-4 rounded-lg border border-border/30 bg-card/20 text-center">
            <div className="font-mono text-2xl font-semibold text-primary mb-1">
              {platform === 'linux' ? '5' : '3'}
            </div>
            <div className="text-xs text-muted-foreground font-sans">
              {platform === 'linux' ? 'Security layers' : 'Enforcement layers'}
            </div>
          </div>
          <div className="p-4 rounded-lg border border-border/30 bg-card/20 text-center">
            <div className="font-mono text-2xl font-semibold text-primary mb-1">0</div>
            <div className="text-xs text-muted-foreground font-sans">Containers needed</div>
          </div>
          <div className="p-4 rounded-lg border border-border/30 bg-card/20 text-center">
            <div className="font-mono text-2xl font-semibold text-primary mb-1">1</div>
            <div className="text-xs text-muted-foreground font-sans">Binary to install</div>
          </div>
        </div>
      </div>
    </section>
  )
}