'use client';

import { Code2, FileText } from 'lucide-react';
import { useState } from 'react';
import Header from '@/components/Header';

export default function IntegratePage() {
  const [copied, setCopied] = useState(false);

  const markdownContent = `# aturi.to Integration Guide

Add universal sharing to your ATProto application in minutes.

## URL Structure

aturi.to uses a simple, predictable URL pattern based on ATProto URIs:

### For profiles:
\`\`\`
aturi.to/profile/[handle or did]
\`\`\`
Example: \`aturi.to/profile/alice.bsky.social\`

### For posts:
\`\`\`
aturi.to/profile/[handle or did]/post/[rkey]
\`\`\`
Example: \`aturi.to/profile/alice.bsky.social/post/3k7qw...\`

### For records (any collection):
\`\`\`
aturi.to/profile/[handle or did]/[collection]/[rkey]
\`\`\`
Example: \`aturi.to/profile/alice.bsky.social/app.bsky.feed.post/3k7qw...\`

### Bare paths without /profile/ also work
For backwards compatibility, all of the above also resolve without the
\`/profile/\` prefix (e.g. \`aturi.to/alice.bsky.social/app.bsky.feed.post/3k7qw...\`).
New links should prefer the canonical \`/profile/\` form.

### Full AT URI format (also supported):
\`\`\`
aturi.to/at://[did or handle]/[collection]/[rkey]
\`\`\`
Example: \`aturi.to/at://did:plc:lcieujcfkv4jx7gehsvok3pr/app.bsky.feed.threadgate/3lwtzzgb7y22z\`

Note: Modern browsers support the literal \`at://\` in URL paths.

## Code Examples

### JavaScript/TypeScript

\`\`\`typescript
// Convert AT URI to aturi.to link
function toAturiLink(atUri: string): string {
  // at://alice.bsky.social/app.bsky.feed.post/3k7qw...
  const uri = atUri.replace('at://', '');
  return \`https://aturi.to/profile/\${uri}\`;
}

// Usage
const atUri = "at://alice.bsky.social/app.bsky.feed.post/3k7qw...";
const shareLink = toAturiLink(atUri);
// https://aturi.to/profile/alice.bsky.social/app.bsky.feed.post/3k7qw...

// Or keep the literal at:// in the URL
const fullAtUri = "at://did:plc:xxx/app.bsky.feed.post/3k7qw...";
const atUriLink = \`https://aturi.to/\${fullAtUri}\`;
// https://aturi.to/at://did:plc:xxx/app.bsky.feed.post/3k7qw...
\`\`\`

### React Component

\`\`\`tsx
import { Share2 } from 'lucide-react';

interface ShareButtonProps {
  atUri: string;
}

function ShareButton({ atUri }: ShareButtonProps) {
  const shareUrl = \`https://aturi.to/profile/\${atUri.replace('at://', '')}\`;
  
  const handleShare = async () => {
    if (navigator.share) {
      await navigator.share({ url: shareUrl });
    } else {
      await navigator.clipboard.writeText(shareUrl);
    }
  };
  
  return (
    <button onClick={handleShare}>
      <Share2 size={16} />
      Share via aturi.to
    </button>
  );
}
\`\`\`

### Python

\`\`\`python
def to_aturi_link(at_uri: str) -> str:
    """
    Convert AT URI to aturi.to link
    
    Args:
        at_uri: The ATProto URI (e.g., 'at://alice.bsky.social/...')
    
    Returns:
        The shareable aturi.to URL
    """
    uri = at_uri.replace('at://', '')
    return f'https://aturi.to/profile/{uri}'

# Usage
at_uri = "at://alice.bsky.social/app.bsky.feed.post/3k7qw..."
share_link = to_aturi_link(at_uri)
# https://aturi.to/profile/alice.bsky.social/app.bsky.feed.post/3k7qw...
\`\`\`

## Use Cases

### Share Buttons
Add a "Share via aturi.to" button next to posts, letting users share content across curated ATProto platforms.

### Embedded Links
Use aturi.to links in documentation, email newsletters, or anywhere you want flexible, platform-agnostic sharing.

### QR Codes
Generate QR codes from aturi.to links for physical media, letting people scan and choose their viewing platform.

### Cross-Platform Notifications
Send notifications with aturi.to links that work regardless of which client the recipient prefers.

---

aturi.to is a community tool for the ATProto ecosystem. The service is free and requires no API keys or registration.
`;

  const handleCopyMarkdown = async () => {
    try {
      await navigator.clipboard.writeText(markdownContent);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      {/* Site Header */}
      <div style={{ padding: '2rem 2rem 0' }}>
        <Header simple />
      </div>

      {/* Hero Section - Asymmetric */}
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto 5rem',
        padding: '0 2rem'
      }}>
        <div className="integrate-hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gap: '2rem',
          alignItems: 'center',
          marginBottom: '3rem'
        }}>
          <div 
            className="card"
            style={{ 
              gridColumn: 'span 8',
              padding: '3rem',
              transform: 'rotate(-0.3deg)',
              transition: 'all 0.4s ease',
            }}
          >
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: '1.5rem', marginBottom: '1.5rem' }}>
              <Code2 size={40} style={{ color: 'var(--text-accent)', flexShrink: 0 }} />
              <div>
                <h1 style={{ marginBottom: '1rem', fontSize: '2.5rem', fontWeight: 300 }}>
                  Integration Guide
                </h1>
                <p style={{ color: 'var(--text-secondary)', fontSize: '1.1rem', lineHeight: 1.7 }}>
                  Add universal sharing to your ATProto application in minutes
                </p>
              </div>
            </div>
          </div>

          <div 
            className="card"
            style={{ 
              gridColumn: 'span 4',
              padding: '2rem',
              transform: 'rotate(0.5deg)',
              transition: 'all 0.4s ease',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              textAlign: 'center'
            }}
          >
            <button
              onClick={handleCopyMarkdown}
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: '0.5rem',
                padding: '0.875rem 1.5rem',
                background: copied ? 'var(--accent-moss)' : 'var(--bg-primary)',
                border: '1px solid',
                borderColor: copied ? 'var(--accent-forest)' : 'var(--border-medium)',
                color: copied ? 'var(--text-on-accent)' : 'var(--text-primary)',
                fontSize: '0.9rem',
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                width: '100%',
                justifyContent: 'center',
                fontWeight: 400
              }}
            >
              <FileText size={18} />
              {copied ? 'Copied!' : 'Copy as Markdown'}
            </button>
            <p style={{ 
              color: 'var(--text-tertiary)', 
              fontSize: '0.8rem', 
              marginTop: '0.75rem' 
            }}>
              Full guide as markdown
            </p>
          </div>
        </div>
      </div>

      {/* URL Structure - Staggered */}
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto 6rem',
        padding: '0 2rem'
      }}>
        <div className="integrate-url-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gap: '2rem',
          marginBottom: '3rem'
        }}>
          <div style={{ gridColumn: '1 / span 4' }}>
            <h2 style={{ 
              marginBottom: '1rem', 
              color: 'var(--text-accent)',
              fontSize: '2rem',
              fontWeight: 300
            }}>
              URL Structure
            </h2>
            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.6 }}>
              Simple, predictable patterns based on ATProto URIs. Works with handles or DIDs.
            </p>
          </div>

          <div style={{ 
            gridColumn: '6 / span 7',
            display: 'flex',
            flexDirection: 'column',
            gap: '1.5rem'
          }}>
            <div 
              className="card" 
              style={{ 
                padding: '2rem',
                transform: 'rotate(0.4deg)',
                transition: 'all 0.4s ease',
              }}
            >
              <h3 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>For profiles:</h3>
              <code style={{ 
                display: 'block', 
                fontSize: '0.95rem',
                padding: '0.75rem',
                background: 'var(--bg-primary)',
                border: '1px solid var(--border-medium)',
              }}>
                aturi.to/profile/[handle or did]
              </code>
              <p style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', marginTop: '0.75rem' }}>
                Example: <code>aturi.to/profile/alice.bsky.social</code>
              </p>
            </div>

            <div 
              className="card"
              style={{ 
                padding: '2rem',
                transform: 'rotate(-0.3deg)',
                transition: 'all 0.4s ease',
              }}
            >
              <h3 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>For records (posts, lists, etc.):</h3>
              <code style={{ 
                display: 'block', 
                fontSize: '0.95rem',
                padding: '0.75rem',
                background: 'var(--bg-primary)',
                border: '1px solid var(--border-medium)',
                marginBottom: '0.75rem'
              }}>
                aturi.to/profile/[handle or did]/[collection]/[rkey]
              </code>
              <p style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', marginBottom: '0.75rem' }}>
                Example: <code>aturi.to/profile/alice.bsky.social/app.bsky.feed.post/3k7qw...</code>
              </p>
              <p style={{ color: 'var(--text-tertiary)', fontSize: '0.825rem', marginBottom: '0.75rem' }}>
                The bare path without <code>/profile/</code> also works for backwards compatibility.
              </p>
              <p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem', marginTop: '1rem', marginBottom: '0.5rem' }}>
                Also supports full AT URI format (literal at:// in URL):
              </p>
              <code style={{ 
                display: 'block', 
                fontSize: '0.85rem',
                padding: '0.75rem',
                background: 'var(--bg-primary)',
                border: '1px solid var(--border-medium)',
              }}>
                aturi.to/at://[did or handle]/[collection]/[rkey]
              </code>
              <p style={{ color: 'var(--text-tertiary)', fontSize: '0.875rem', marginTop: '0.75rem' }}>
                Example: <code style={{ fontSize: '0.8rem' }}>aturi.to/at://did:plc:lcieujcfkv4jx7gehsvok3pr/app.bsky.feed.threadgate/3lwtzzgb7y22z</code>
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Code Examples - Organic Layout */}
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto 6rem',
        padding: '0 2rem'
      }}>
        <h2 style={{ 
          marginBottom: '3rem', 
          color: 'var(--text-accent)',
          fontSize: '2rem',
          fontWeight: 300,
          textAlign: 'center'
        }}>
          Code Examples
        </h2>

        <div style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '2rem'
        }}>
          <div 
            className="card" 
            style={{ 
              padding: '2.5rem',
              transform: 'rotate(-0.2deg)',
              transition: 'all 0.4s ease',
            }}
          >
            <h3 style={{ marginBottom: '1.5rem', fontSize: '1.5rem', fontWeight: 400 }}>
              JavaScript/TypeScript
            </h3>
            <pre style={{
              background: 'var(--bg-primary)',
              padding: '1.5rem',
              border: '1px solid var(--border-medium)',
              fontSize: '0.9rem',
              lineHeight: 1.6,
              overflow: 'auto'
              }}>{`// Convert AT URI to aturi.to link
function toAturiLink(atUri: string): string {
  // at://alice.bsky.social/app.bsky.feed.post/3k7qw...
  const uri = atUri.replace('at://', '');
  return \`https://aturi.to/profile/\${uri}\`;
}

// Usage
const atUri = "at://alice.bsky.social/app.bsky.feed.post/3k7qw...";
const shareLink = toAturiLink(atUri);
// https://aturi.to/profile/alice.bsky.social/app.bsky.feed.post/3k7qw...

// Or keep the literal at:// in the URL
const fullAtUri = "at://did:plc:xxx/app.bsky.feed.post/3k7qw...";
const atUriLink = \`https://aturi.to/\${fullAtUri}\`;
// https://aturi.to/at://did:plc:xxx/app.bsky.feed.post/3k7qw...`}</pre>
          </div>

          <div className="integrate-code-examples-grid" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(12, 1fr)',
            gap: '2rem'
          }}>
            <div 
              className="card" 
              style={{ 
                gridColumn: 'span 7',
                padding: '2.5rem',
                transform: 'rotate(0.4deg)',
                transition: 'all 0.4s ease',
              }}
            >
              <h3 style={{ marginBottom: '1.5rem', fontSize: '1.5rem', fontWeight: 400 }}>
                React Component
              </h3>
              <pre style={{
                background: 'var(--bg-primary)',
                padding: '1.5rem',
                border: '1px solid var(--border-medium)',
                fontSize: '0.85rem',
                lineHeight: 1.6,
                overflow: 'auto'
              }}>{`import { Share2 } from 'lucide-react';

interface ShareButtonProps {
  atUri: string;
}

function ShareButton({ atUri }: ShareButtonProps) {
  const shareUrl = \`https://aturi.to/profile/\${atUri.replace('at://', '')}\`;
  
  const handleShare = async () => {
    if (navigator.share) {
      await navigator.share({ url: shareUrl });
    } else {
      await navigator.clipboard.writeText(shareUrl);
    }
  };
  
  return (
    <button onClick={handleShare}>
      <Share2 size={16} />
      Share via aturi.to
    </button>
  );
}`}</pre>
            </div>

            <div 
              className="card" 
              style={{ 
                gridColumn: 'span 5',
                padding: '2.5rem',
                transform: 'rotate(-0.5deg)',
                transition: 'all 0.4s ease',
              }}
            >
              <h3 style={{ marginBottom: '1.5rem', fontSize: '1.5rem', fontWeight: 400 }}>
                Python
              </h3>
              <pre style={{
                background: 'var(--bg-primary)',
                padding: '1.5rem',
                border: '1px solid var(--border-medium)',
                fontSize: '0.85rem',
                lineHeight: 1.6,
                overflow: 'auto'
              }}>{`def to_aturi_link(at_uri: str) -> str:
    """Convert AT URI to aturi.to link"""
    uri = at_uri.replace('at://', '')
    return f'https://aturi.to/profile/{uri}'

# Usage
at_uri = "at://alice.bsky..."
link = to_aturi_link(at_uri)
# https://aturi.to/profile/alice.bsky...`}</pre>
            </div>
          </div>
        </div>
      </div>

      {/* Use Cases - Asymmetric Grid */}
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto 6rem',
        padding: '0 2rem'
      }}>
        <h2 style={{ 
          marginBottom: '3rem', 
          color: 'var(--text-accent)',
          fontSize: '2rem',
          fontWeight: 300,
          textAlign: 'center'
        }}>
          Use Cases
        </h2>

        <div className="integrate-usecases-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gap: '1.5rem'
        }}>
          <div 
            className="card" 
            style={{ 
              gridColumn: 'span 7',
              padding: '2rem',
              transform: 'rotate(0.3deg)',
              transition: 'all 0.4s ease',
            }}
          >
            <h3 style={{ marginBottom: '0.75rem', fontSize: '1.25rem' }}>Share Buttons</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', lineHeight: 1.6 }}>
              Add a &ldquo;Share via aturi.to&rdquo; button next to posts, letting users share
              content that anyone can view on their preferred platform.
            </p>
          </div>

          <div 
            className="card" 
            style={{ 
              gridColumn: 'span 5',
              padding: '2rem',
              transform: 'rotate(-0.4deg)',
              transition: 'all 0.4s ease',
            }}
          >
            <h3 style={{ marginBottom: '0.75rem', fontSize: '1.25rem' }}>QR Codes</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', lineHeight: 1.6 }}>
              Generate QR codes from aturi.to links for physical media
            </p>
          </div>

          <div 
            className="card" 
            style={{ 
              gridColumn: 'span 5',
              padding: '2rem',
              transform: 'rotate(-0.2deg)',
              transition: 'all 0.4s ease',
            }}
          >
            <h3 style={{ marginBottom: '0.75rem', fontSize: '1.25rem' }}>Embedded Links</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', lineHeight: 1.6 }}>
              Use in documentation, newsletters, or anywhere you want flexible sharing
            </p>
          </div>

          <div 
            className="card" 
            style={{ 
              gridColumn: 'span 7',
              padding: '2rem',
              transform: 'rotate(0.5deg)',
              transition: 'all 0.4s ease',
            }}
          >
            <h3 style={{ marginBottom: '0.75rem', fontSize: '1.25rem' }}>Cross-Platform Notifications</h3>
            <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', lineHeight: 1.6 }}>
              Send notifications with aturi.to links that work regardless of
              which client the recipient prefers.
            </p>
          </div>
        </div>
      </div>

      {/* Submit Your App Card */}
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto 4rem',
        padding: '0 2rem'
      }}>
        <div 
          className="card" 
          style={{ 
            padding: '3rem',
            background: 'var(--bg-elevated)', 
            textAlign: 'center',
            transform: 'rotate(-0.3deg)',
            transition: 'all 0.4s ease',
            border: '1px solid var(--border-strong)'
          }}
        >
          <h2 style={{ marginBottom: '1rem', color: 'var(--text-accent)', fontSize: '2rem', fontWeight: 400 }}>
            Submit your app as a waypoint
          </h2>
          <p style={{ color: 'var(--text-secondary)', fontSize: '1.05rem', lineHeight: 1.7, marginBottom: '2rem' }}>
            Building an ATProto client or tool? We&apos;d love to consider adding it to our curated list of waypoints so users can choose your platform when sharing content.
          </p>
          <div style={{
            display: 'flex',
            gap: '1rem',
            flexWrap: 'wrap',
            justifyContent: 'center'
          }}>
            <a
              href="mailto:aturi@atpota.to"
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: '0.5rem',
                padding: '1rem 1.75rem',
                background: 'var(--bg-secondary)',
                color: 'var(--text-primary)',
                border: '1px solid var(--border-medium)',
                fontSize: '1rem',
                textDecoration: 'none',
                transition: 'all 0.3s ease',
                fontWeight: 400
              }}
            >
              Email aturi@atpota.to
            </a>
            <a
              href="https://bsky.app/profile/aturi.to"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: '0.5rem',
                padding: '1rem 1.75rem',
                background: 'var(--bg-secondary)',
                color: 'var(--text-primary)',
                border: '1px solid var(--border-medium)',
                fontSize: '1rem',
                textDecoration: 'none',
                transition: 'all 0.3s ease',
                fontWeight: 400
              }}
            >
              DM on Bluesky
            </a>
          </div>
        </div>
      </div>

      {/* Support - Full Width Centered */}
      <div style={{ 
        maxWidth: '1200px', 
        margin: '0 auto 4rem',
        padding: '0 2rem'
      }}>
        <div 
          className="card" 
          style={{ 
            padding: '3rem',
            background: 'var(--bg-elevated)', 
            textAlign: 'center',
            transform: 'rotate(0.2deg)',
            transition: 'all 0.4s ease',
          }}
        >
          <h2 style={{ marginBottom: '1rem', color: 'var(--text-accent)', fontSize: '2rem', fontWeight: 400 }}>
            Questions or Feedback?
          </h2>
          <p style={{ color: 'var(--text-secondary)', fontSize: '1.05rem', lineHeight: 1.7, marginBottom: '0.5rem' }}>
            aturi.to is a community tool for the ATProto ecosystem. The service is completely free
            and requires no API keys or registration.
          </p>
          <p style={{ color: 'var(--text-secondary)', fontSize: '1.05rem', lineHeight: 1.7 }}>
            Feel free to reach out with suggestions or bug reports.
          </p>
        </div>
      </div>
    </div>
  );
}