import {
  CheckCircle2,
  Code2,
  FileCode2,
  GitBranch,
  MessagesSquare,
  Terminal,
} from 'lucide-react';

import { Badge } from '@spoon/ui';

const files = [
  'apps/web/auth.ts',
  'packages/auth/providers.ts',
  'packages/auth/env.ts',
  '.env.example',
];

const codeLines = [
  'export const authProviders = [',
  '  Authentik({',
  '    issuer: env.AUTHENTIK_ISSUER,',
  '    clientId: env.AUTHENTIK_CLIENT_ID,',
  '  }),',
  '];',
];

export const WorkspaceShowcase = () => (
  <section id='workspace' className='border-border/60 bg-muted/30 border-y'>
    <div className='container mx-auto px-4 py-24'>
      <div className='mb-10 max-w-3xl'>
        <Badge variant='outline' className='mb-4'>
          Workspace
        </Badge>
        <h2 className='text-3xl font-semibold tracking-normal md:text-4xl'>
          When a thread needs code, open a real workspace.
        </h2>
        <p className='text-muted-foreground mt-4 text-lg leading-8'>
          Spoon can expose project secrets as process env, optionally
          materialize an env file, run configured checks, and refuse to commit
          `.env*` files. The result is reviewable code, not a mystery patch.
        </p>
      </div>

      <div className='border-border bg-card overflow-hidden rounded-lg border shadow-sm'>
        <div className='border-border flex flex-wrap items-center justify-between gap-3 border-b px-5 py-4'>
          <div className='flex flex-wrap items-center gap-3 text-sm'>
            <span className='flex items-center gap-2'>
              <GitBranch className='text-primary size-4' />
              spoon/thread/authentik-upstream
            </span>
            <span className='text-muted-foreground hidden sm:inline'>/</span>
            <span className='flex items-center gap-2'>
              <Code2 className='text-primary size-4' />
              OpenCode
            </span>
          </div>
          <Badge className='bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/10'>
            Workspace active
          </Badge>
        </div>

        <div className='bg-border grid min-h-[30rem] gap-px lg:grid-cols-[0.8fr_1.5fr_0.9fr]'>
          <div className='bg-background p-4'>
            <p className='mb-3 flex items-center gap-2 text-sm font-medium'>
              <FileCode2 className='text-primary size-4' />
              Files
            </p>
            <div className='space-y-1 text-sm'>
              {files.map((file, index) => (
                <div
                  key={file}
                  className={
                    index === 1
                      ? 'bg-primary/10 text-primary rounded-md px-3 py-2 font-medium'
                      : 'text-muted-foreground rounded-md px-3 py-2'
                  }
                >
                  {file}
                </div>
              ))}
            </div>
          </div>

          <div className='bg-zinc-950 p-4 text-zinc-100'>
            <div className='mb-4 flex items-center justify-between text-xs text-zinc-400'>
              <span>packages/auth/providers.ts</span>
              <span>vim mode on</span>
            </div>
            <pre className='overflow-x-auto rounded-md bg-zinc-900 p-4 text-xs leading-7'>
              <code>
                {codeLines.map((line, index) => (
                  <span key={line} className='block'>
                    <span className='mr-4 text-zinc-600'>
                      {String(index + 1).padStart(2, '0')}
                    </span>
                    {line}
                  </span>
                ))}
              </code>
            </pre>
            <div className='mt-4 rounded-md border border-zinc-800 bg-zinc-900 p-4 text-xs'>
              <p className='text-emerald-400'>+ Authentik provider</p>
              <p className='text-red-300'>- GitHub provider fallback</p>
              <p className='mt-2 text-zinc-400'>
                Diff stays attached to the thread before the draft PR opens.
              </p>
            </div>
          </div>

          <div className='bg-background bg-border grid gap-px'>
            <div className='bg-background p-4'>
              <p className='mb-3 flex items-center gap-2 text-sm font-medium'>
                <MessagesSquare className='text-primary size-4' />
                Thread
              </p>
              <div className='space-y-3 text-sm'>
                <p className='bg-muted/60 rounded-md p-3'>
                  Preserve Authentik as the only provider.
                </p>
                <p className='rounded-md border p-3'>
                  I found the provider wiring and updated the env example.
                </p>
              </div>
            </div>
            <div className='bg-background p-4'>
              <p className='mb-3 flex items-center gap-2 text-sm font-medium'>
                <Terminal className='text-primary size-4' />
                Checks
              </p>
              <div className='space-y-2 text-sm'>
                <div className='bg-muted/60 flex items-center justify-between rounded-md px-3 py-2'>
                  <span>lint</span>
                  <span className='flex items-center gap-1 text-emerald-600'>
                    <CheckCircle2 className='size-4' />
                    passed
                  </span>
                </div>
                <div className='bg-muted/60 flex items-center justify-between rounded-md px-3 py-2'>
                  <span>typecheck</span>
                  <span className='text-muted-foreground'>queued</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);
