'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import {
  Factory, Book, Code, Terminal, Zap, Rocket, Database,
  Layout, TestTube, Key, Webhook, ArrowRight, ChevronRight,
  Copy, Check, ExternalLink, Search
} from 'lucide-react';
import { BRAND, VOCAB } from '@/lib/white-label/constants';

export default function DarkFactoryDocs() {
  const [copiedCode, setCopiedCode] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');

  const copyCode = (code: string, id: string) => {
    navigator.clipboard.writeText(code);
    setCopiedCode(id);
    setTimeout(() => setCopiedCode(null), 2000);
  };

  const sections = [
    {
      id: 'quickstart',
      title: 'Quick Start',
      icon: Zap,
      description: 'Get up and running in 5 minutes',
    },
    {
      id: 'api',
      title: 'API Reference',
      icon: Code,
      description: 'Complete API documentation',
    },
    {
      id: 'generation',
      title: 'Code Generation',
      icon: Factory,
      description: 'How the generation pipeline works',
    },
    {
      id: 'deployment',
      title: 'Deployment',
      icon: Rocket,
      description: 'Deploy generated code to production',
    },
  ];

  return (
    <div className="min-h-screen bg-brand-bg">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-brand-bg/90 backdrop-blur-lg border-b border-white/5">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <Link href="/dark-factory" className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-deep to-brand-secondary-deep flex items-center justify-center">
                <Factory className="w-6 h-6 text-white" />
              </div>
              <div className="flex items-center gap-2">
                <span className="text-xl font-bold text-white">{VOCAB.factory}</span>
                <span className="text-gray-500">/</span>
                <span className="text-gray-400">Docs</span>
              </div>
            </Link>
            
            <div className="flex items-center gap-4">
              <div className="relative hidden md:block">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search docs..."
                  className="w-64 pl-10 pr-4 py-2 bg-white/5 border border-white/10 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-brand-deep/50"
                />
              </div>
              <Link
                href="/dark-factory/app"
                className="px-4 py-2 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-lg text-white font-medium hover:opacity-90 transition-opacity"
              >
                Open App
              </Link>
            </div>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-6 py-12">
        {/* Hero */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-16"
        >
          <h1 className="text-4xl font-bold text-white mb-4">Documentation</h1>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
            Everything you need to integrate {VOCAB.factory} into your workflow
          </p>
        </motion.div>

        {/* Section Cards */}
        <div className="grid md:grid-cols-2 gap-6 mb-16">
          {sections.map((section, i) => (
            <motion.a
              key={section.id}
              href={`#${section.id}`}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
              className="glass-card p-6 rounded-xl border border-white/5 hover:border-brand-deep/30 transition-colors group"
            >
              <section.icon className="w-8 h-8 text-brand mb-4" />
              <h2 className="text-xl font-semibold text-white mb-2 group-hover:text-brand transition-colors">
                {section.title}
              </h2>
              <p className="text-gray-400">{section.description}</p>
            </motion.a>
          ))}
        </div>

        {/* Quick Start Section */}
        <section id="quickstart" className="mb-20">
          <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
            <Zap className="w-8 h-8 text-brand" />
            Quick Start
          </h2>
          
          <div className="space-y-8">
            <div>
              <h3 className="text-xl font-semibold text-white mb-4">1. Get your API Key</h3>
              <p className="text-gray-400 mb-4">
                Sign up for a free account and generate an API key from your dashboard.
              </p>
              <Link
                href="/dark-factory/signup"
                className="inline-flex items-center gap-2 text-brand hover:text-brand-light"
              >
                Create free account <ArrowRight className="w-4 h-4" />
              </Link>
            </div>

            <div>
              <h3 className="text-xl font-semibold text-white mb-4">2. Make your first request</h3>
              <div className="relative">
                <div className="flex items-center justify-between px-4 py-2 bg-black/30 rounded-t-lg border-b border-white/5">
                  <span className="text-sm text-gray-400">cURL</span>
                  <button
                    onClick={() => copyCode(`curl -X POST https://darkfactory.ai/api/dark-factory/generate \\
  -H "Authorization: Bearer df_live_your_api_key" \\
  -H "Content-Type: application/json" \\
  -d '{"prompt": "Create a REST API for managing blog posts"}'`, 'curl1')}
                    className="flex items-center gap-1 text-sm text-gray-400 hover:text-white"
                  >
                    {copiedCode === 'curl1' ? (
                      <Check className="w-4 h-4 text-green-400" />
                    ) : (
                      <Copy className="w-4 h-4" />
                    )}
                    Copy
                  </button>
                </div>
                <pre className="p-4 bg-black/20 rounded-b-lg overflow-x-auto">
                  <code className="text-sm text-gray-300">{`curl -X POST https://darkfactory.ai/api/dark-factory/generate \\
  -H "Authorization: Bearer df_live_your_api_key" \\
  -H "Content-Type: application/json" \\
  -d '{"prompt": "Create a REST API for managing blog posts"}'`}</code>
                </pre>
              </div>
            </div>

            <div>
              <h3 className="text-xl font-semibold text-white mb-4">3. Check the result</h3>
              <div className="relative">
                <div className="flex items-center justify-between px-4 py-2 bg-black/30 rounded-t-lg border-b border-white/5">
                  <span className="text-sm text-gray-400">Response</span>
                </div>
                <pre className="p-4 bg-black/20 rounded-b-lg overflow-x-auto">
                  <code className="text-sm text-gray-300">{`{
  "taskId": "df_task_abc123",
  "status": "completed",
  "artifacts": [
    { "type": "api", "path": "app/api/posts/route.ts" },
    { "type": "model", "path": "prisma/schema.prisma" },
    { "type": "types", "path": "lib/types/post.ts" },
    { "type": "test", "path": "__tests__/posts.test.ts" }
  ],
  "generationTime": 12.4
}`}</code>
                </pre>
              </div>
            </div>
          </div>
        </section>

        {/* API Reference Section */}
        <section id="api" className="mb-20">
          <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
            <Code className="w-8 h-8 text-brand" />
            API Reference
          </h2>
          
          <div className="space-y-8">
            <div className="glass-card p-6 rounded-xl border border-white/5">
              <div className="flex items-center gap-3 mb-4">
                <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs font-mono rounded">POST</span>
                <code className="text-white font-mono">/api/dark-factory/generate</code>
              </div>
              <p className="text-gray-400 mb-4">Submit a code generation request</p>
              
              <h4 className="text-white font-semibold mb-2">Request Body</h4>
              <pre className="p-4 bg-black/20 rounded-lg overflow-x-auto mb-4">
                <code className="text-sm text-gray-300">{`{
  "prompt": "string (required)",
  "projectId": "string (optional)",
  "options": {
    "targetFramework": "nextjs | react | node",
    "includeTests": true,
    "autoValidate": true
  }
}`}</code>
              </pre>
            </div>

            <div className="glass-card p-6 rounded-xl border border-white/5">
              <div className="flex items-center gap-3 mb-4">
                <span className="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs font-mono rounded">GET</span>
                <code className="text-white font-mono">/api/dark-factory/tasks/:taskId</code>
              </div>
              <p className="text-gray-400 mb-4">Get task status and generated artifacts</p>
            </div>

            <div className="glass-card p-6 rounded-xl border border-white/5">
              <div className="flex items-center gap-3 mb-4">
                <span className="px-2 py-1 bg-green-500/20 text-green-400 text-xs font-mono rounded">POST</span>
                <code className="text-white font-mono">/api/dark-factory/deploy/:taskId</code>
              </div>
              <p className="text-gray-400 mb-4">Deploy generated artifacts to target environment</p>
            </div>
          </div>
        </section>

        {/* Generation Pipeline */}
        <section id="generation" className="mb-20">
          <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
            <Factory className="w-8 h-8 text-brand" />
            Code Generation Pipeline
          </h2>
          
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { title: 'Intent Parsing', desc: 'Natural language → structured specification', icon: Terminal },
              { title: 'Schema Generation', desc: 'Spec → database models and types', icon: Database },
              { title: 'Code Generation', desc: 'API routes, components, tests', icon: Code },
              { title: 'Validation', desc: 'Type checking, linting, tests', icon: TestTube },
              { title: 'Deployment', desc: 'Preview or production deploy', icon: Rocket },
            ].map((step, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="glass-card p-6 rounded-xl border border-white/5"
              >
                <step.icon className="w-8 h-8 text-brand mb-4" />
                <h3 className="text-lg font-semibold text-white mb-2">{step.title}</h3>
                <p className="text-gray-400 text-sm">{step.desc}</p>
              </motion.div>
            ))}
          </div>
        </section>

        {/* Deployment */}
        <section id="deployment" className="mb-20">
          <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
            <Rocket className="w-8 h-8 text-brand" />
            Deployment
          </h2>
          
          <div className="glass-card p-6 rounded-xl border border-white/5">
            <p className="text-gray-400 mb-4">
              {VOCAB.factory} can deploy generated code directly to preview or production environments.
              Each deployment creates an isolated preview URL for testing before promotion.
            </p>
            
            <div className="relative">
              <div className="flex items-center justify-between px-4 py-2 bg-black/30 rounded-t-lg border-b border-white/5">
                <span className="text-sm text-gray-400">Deploy to Preview</span>
              </div>
              <pre className="p-4 bg-black/20 rounded-b-lg overflow-x-auto">
                <code className="text-sm text-gray-300">{`curl -X POST https://darkfactory.ai/api/dark-factory/deploy/df_task_abc123 \\
  -H "Authorization: Bearer df_live_your_api_key" \\
  -H "Content-Type: application/json" \\
  -d '{"environment": "preview"}'`}</code>
              </pre>
            </div>
          </div>
        </section>

        {/* Help Links */}
        <div className="glass-card p-8 rounded-2xl border border-white/10 text-center">
          <h2 className="text-2xl font-bold text-white mb-4">Need Help?</h2>
          <p className="text-gray-400 mb-6">
            Can&apos;t find what you&apos;re looking for? Reach out to our team.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href="mailto:support@ghostfoundry.ai"
              className="inline-flex items-center gap-2 px-6 py-3 bg-white/5 border border-white/10 rounded-lg text-white hover:bg-white/10 transition-colors"
            >
              Contact Support
            </Link>
            <Link
              href="/"
              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-lg text-white hover:opacity-90 transition-opacity"
            >
              {BRAND.companyName} <ExternalLink className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="py-8 px-6 border-t border-white/5 mt-12">
        <div className="max-w-7xl mx-auto text-center text-sm text-gray-500">
          © 2026 {BRAND.companyName}. All rights reserved.
        </div>
      </footer>
    </div>
  );
}
