import {
  Bot,
  Code2,
  GitBranch,
  GitCompare,
  GitPullRequest,
  KeyRound,
  LockKeyhole,
  MessagesSquare,
  RefreshCw,
  ServerCog,
  ShieldCheck,
} from 'lucide-react';

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

const workflow = [
  {
    title: 'Create the Spoon',
    description:
      'Register the upstream project, your GitHub fork, default branches, clone URLs, and any extra remotes you want visible.',
  },
  {
    title: 'Watch upstream',
    description:
      'Spoon intermittently checks the upstream default branch and compares it against the current fork state.',
  },
  {
    title: 'Auto-sync clean drift',
    description:
      'If the fork has no custom commits and upstream moved, Spoon can fast-forward the fork without turning it into a chore.',
  },
  {
    title: 'Open a thread when it matters',
    description:
      'If your fork has custom commits, Spoon creates a durable maintenance thread instead of guessing.',
  },
  {
    title: 'Resolve with context',
    description:
      'Review commits, changed files, pull requests, fork-only work, ignored upstream changes, and workspace output together.',
  },
  {
    title: 'Ship through draft PRs',
    description:
      'When code is needed, OpenCode works in an isolated workspace and hands changes back as a draft PR.',
  },
];

const features = [
  {
    title: 'Spoon dashboards',
    description:
      'See drift, fork-only commits, pull requests, clone URLs, extra remotes, threads, activity, and settings for each managed fork.',
    icon: GitCompare,
  },
  {
    title: 'Thread-first maintenance',
    description:
      'Every review, conflict, ignore decision, and requested code change has a durable conversation attached to it.',
    icon: MessagesSquare,
  },
  {
    title: 'Effective drift',
    description:
      'Spoon shows raw upstream state and the effective maintenance state after intentional ignore decisions.',
    icon: RefreshCw,
  },
  {
    title: 'OpenCode workspaces',
    description:
      'Open a file tree, browser editor, diff view, job logs, command panel, and thread context when a fork needs code.',
    icon: Code2,
  },
  {
    title: 'Provider-owned AI',
    description:
      'Use encrypted provider profiles: API-key providers run through OpenCode, and Codex login profiles run through the Codex CLI.',
    icon: KeyRound,
  },
  {
    title: 'Draft PR handoff',
    description:
      'Agent work becomes a branch and draft pull request. Spoon does not auto-merge custom forks behind your back.',
    icon: GitPullRequest,
  },
];

const decisions = [
  {
    condition: 'No fork-only commits + upstream ahead',
    action: 'Auto-sync',
    explanation: 'The fork is still close enough to fast-forward.',
  },
  {
    condition: 'Fork-only commits + upstream ahead',
    action: 'Create thread',
    explanation: 'Spoon reviews whether upstream affects custom work.',
  },
  {
    condition: 'Merge conflicts',
    action: 'Open workspace',
    explanation: 'Resolve in an isolated worker and ship a draft PR.',
  },
  {
    condition: 'Irrelevant upstream changes',
    action: 'Ignore intentionally',
    explanation: 'Record why those commits no longer matter to this fork.',
  },
];

const ownership = [
  {
    title: 'Your GitHub App',
    description:
      'GitHub remains the active source of truth for forks, branches, compares, and draft PRs.',
    icon: GitBranch,
  },
  {
    title: 'Your providers',
    description:
      'AI provider profiles, API keys, and Codex auth JSON stay encrypted and selected by you.',
    icon: ShieldCheck,
  },
  {
    title: 'Your secrets',
    description:
      'Project secrets are per Spoon, redacted in logs, and refused from commits when materialized.',
    icon: LockKeyhole,
  },
  {
    title: 'Your workflow',
    description:
      'Local commits, Gitea mirrors, CI changes, and direct GitHub edits are expected parts of the loop.',
    icon: ServerCog,
  },
];

export const Workflow = () => (
  <section id='workflow' className='border-border/60 bg-muted/30 border-y'>
    <div className='container mx-auto px-4 py-20'>
      <div className='mb-12 max-w-3xl'>
        <Badge variant='outline' className='mb-4'>
          Workflow
        </Badge>
        <h2 className='text-3xl font-semibold tracking-normal md:text-4xl'>
          Forking should start a relationship, not a support burden.
        </h2>
        <p className='text-muted-foreground mt-4 text-lg leading-8'>
          Spoon keeps watching the upstream project after the fork. When
          upstream moves, it decides whether your fork can fast-forward, needs a
          maintenance thread, or should ignore changes that no longer matter to
          your version. Forking a project should not mean supporting it alone.
        </p>
      </div>

      <div className='grid gap-8 lg:grid-cols-[0.75fr_1.25fr]'>
        <div className='border-border bg-background rounded-lg border p-6'>
          <MessagesSquare className='text-primary size-6' />
          <h3 className='mt-5 text-xl font-semibold'>
            Spoon keeps the conversation going
          </h3>
          <p className='text-muted-foreground mt-3 leading-7'>
            A fork is not a one-time split. Spoon keeps the fork and upstream in
            conversation by turning maintenance into visible, reviewable threads
            instead of surprise drift.
          </p>
        </div>

        <ol className='grid gap-3 md:grid-cols-2'>
          {workflow.map((step, index) => (
            <li
              key={step.title}
              className='border-border bg-background rounded-lg border p-5'
            >
              <span className='text-primary text-sm font-semibold'>
                {String(index + 1).padStart(2, '0')}
              </span>
              <h3 className='mt-3 font-semibold'>{step.title}</h3>
              <p className='text-muted-foreground mt-2 text-sm leading-6'>
                {step.description}
              </p>
            </li>
          ))}
        </ol>
      </div>
    </div>
  </section>
);

export const Features = () => (
  <section id='features' className='container mx-auto px-4 py-24'>
    <div className='mb-12 flex flex-col justify-between gap-6 lg:flex-row lg:items-end'>
      <div className='max-w-3xl'>
        <Badge variant='outline' className='mb-4'>
          Product surface
        </Badge>
        <h2 className='text-3xl font-semibold tracking-normal md:text-4xl'>
          The maintenance cockpit for forks you actually care about.
        </h2>
      </div>
      <p className='text-muted-foreground max-w-xl leading-7'>
        Custom work should not mean permanent drift. Spoon keeps the operational
        picture clear from the first upstream check to the final draft PR.
      </p>
    </div>

    <div className='grid gap-px overflow-hidden rounded-lg border md:grid-cols-2 lg:grid-cols-3'>
      {features.map(({ title, description, icon: Icon }) => (
        <div key={title} className='bg-card p-6'>
          <div className='flex items-center gap-3'>
            <Icon className='text-primary size-5 shrink-0' />
            <h3 className='font-semibold'>{title}</h3>
          </div>
          <p className='text-muted-foreground mt-3 text-sm leading-6'>
            {description}
          </p>
        </div>
      ))}
    </div>
  </section>
);

export const MaintenanceDecisions = () => (
  <section id='maintenance' 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'>
          Maintenance decisions
        </Badge>
        <h2 className='text-3xl font-semibold tracking-normal md:text-4xl'>
          Spoon knows when to sync, when to thread, and when to stay out of the
          way.
        </h2>
      </div>

      <div className='overflow-hidden rounded-lg border'>
        {decisions.map((decision) => (
          <div
            key={decision.condition}
            className='bg-background border-border grid gap-4 border-b p-5 last:border-b-0 lg:grid-cols-[1fr_12rem_1.3fr]'
          >
            <p className='font-medium'>{decision.condition}</p>
            <Badge
              variant='outline'
              className='bg-primary/10 text-primary w-fit'
            >
              {decision.action}
            </Badge>
            <p className='text-muted-foreground text-sm leading-6'>
              {decision.explanation}
            </p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

export const ThreadedWork = () => (
  <section id='threads' className='container mx-auto px-4 py-24'>
    <div className='grid gap-10 lg:grid-cols-[0.9fr_1.1fr]'>
      <div>
        <Badge variant='outline' className='mb-4'>
          Threads
        </Badge>
        <h2 className='text-3xl font-semibold tracking-normal md:text-4xl'>
          Threads keep the whole maintenance conversation in one place.
        </h2>
        <p className='text-muted-foreground mt-4 text-lg leading-8'>
          Upstream changed, a fork drifted, a conflict appeared, or you asked
          for a code change. Spoon puts the reasoning, messages, workspace,
          artifacts, and draft PR handoff in the same thread.
        </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 p-5'>
          <div>
            <p className='font-medium'>Thread: Upstream auth changes landed</p>
            <p className='text-muted-foreground text-sm'>
              Source: upstream update
            </p>
          </div>
          <Badge className='bg-amber-500/10 text-amber-700 hover:bg-amber-500/10'>
            Waiting for review
          </Badge>
        </div>
        <div className='bg-border grid gap-px lg:grid-cols-[1.35fr_0.65fr]'>
          <div className='bg-background space-y-3 p-5'>
            {[
              ['system', 'Spoon found 3 upstream commits after 8f3a2c1.'],
              [
                'assistant',
                'These touch auth callback handling and package scripts. Your fork has Authentik-only changes in the same area.',
              ],
              [
                'user',
                'Open a review PR and preserve Authentik as the only provider.',
              ],
            ].map(([role, message]) => (
              <div key={role} className='rounded-md border p-3 text-sm'>
                <p className='text-muted-foreground text-xs'>{role}</p>
                <p className='mt-1 leading-6'>{message}</p>
              </div>
            ))}
          </div>
          <div className='bg-background space-y-4 p-5 text-sm'>
            <div>
              <p className='text-muted-foreground text-xs'>Latest job</p>
              <p className='mt-1 font-medium'>OpenCode workspace active</p>
            </div>
            <div>
              <p className='text-muted-foreground text-xs'>Model/provider</p>
              <p className='mt-1 font-medium'>Codex profile</p>
            </div>
            <div>
              <p className='text-muted-foreground text-xs'>PR target</p>
              <p className='mt-1 font-medium'>fork:main</p>
            </div>
            <div className='bg-muted/60 rounded-md p-3'>
              <Bot className='text-primary mb-2 size-4' />
              <p className='text-muted-foreground leading-6'>
                Workspace logs, diffs, checks, and the final PR stay attached to
                the thread.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

export const Security = () => (
  <section id='security' className='container mx-auto px-4 py-24'>
    <div className='grid gap-10 lg:grid-cols-[0.8fr_1.2fr]'>
      <div>
        <Badge variant='outline' className='mb-4'>
          Ownership
        </Badge>
        <h2 className='text-3xl font-semibold tracking-normal md:text-4xl'>
          Self-hosted because the fork is yours.
        </h2>
        <p className='text-muted-foreground mt-4 text-lg leading-8'>
          Your fork can have local commits, private deploy settings, Gitea
          mirrors, CI experiments, and emergency GitHub edits. Spoon keeps that
          relationship with upstream visible without taking ownership away from
          you.
        </p>
      </div>

      <div className='grid gap-4 sm:grid-cols-2'>
        {ownership.map(({ title, description, icon: Icon }) => (
          <div key={title} className='border-border rounded-lg border p-5'>
            <div className='flex items-center gap-3'>
              <Icon className='text-primary size-5 shrink-0' />
              <h3 className='font-semibold'>{title}</h3>
            </div>
            <p className='text-muted-foreground mt-2 text-sm leading-6'>
              {description}
            </p>
          </div>
        ))}
      </div>
    </div>
  </section>
);
