'use client';

import { motion } from 'framer-motion';
import {
  Box,
  Play,
  FileJson,
  Clock,
  Database,
  Zap,
  Shield,
  Eye,
  Layers,
} from 'lucide-react';
import { InternalHeader } from '@/components/ui/internal-header';
import { SandboxViewer } from '@/components/weft';
import { VOCAB } from '@/lib/white-label/constants';

const FEATURES = [
  {
    icon: <Play className="w-5 h-5" />,
    title: 'Live Preview',
    description: 'Interact with generated UI artifacts in real-time',
  },
  {
    icon: <FileJson className="w-5 h-5" />,
    title: 'API Stubs',
    description: 'Mock API endpoints with configurable responses',
  },
  {
    icon: <Clock className="w-5 h-5" />,
    title: 'Action Logging',
    description: 'Track every click, input, and API call',
  },
  {
    icon: <Database className="w-5 h-5" />,
    title: 'Mock Data',
    description: 'Edit mock data on the fly to test edge cases',
  },
  {
    icon: <Shield className="w-5 h-5" />,
    title: 'Safe Testing',
    description: 'No real API calls – everything is sandboxed',
  },
  {
    icon: <Eye className="w-5 h-5" />,
    title: 'Intent Tracing',
    description: 'See the original spec that created the artifact',
  },
];

export function WeftSandboxContent() {
  return (
    <div className="min-h-screen bg-brand-bg">
      <InternalHeader />
      
      <main className="pt-24 pb-12 px-4">
        <div className="max-w-7xl mx-auto">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="mb-8"
          >
            <div className="flex items-center gap-4 mb-4">
              <div className="p-3 rounded-xl bg-gradient-to-br from-brand-secondary/20 to-brand-deep/20 border border-brand-secondary/30">
                <Box className="w-8 h-8 text-brand" />
              </div>
              <div>
                <h1 className="text-3xl font-bold text-white">
                  <span className="gradient-text">Weft Sandbox</span>
                </h1>
                <p className="text-gray-400">
                  Preview and test {VOCAB.factory} artifacts before deployment
                </p>
              </div>
            </div>

            {/* Features Grid */}
            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-6">
              {FEATURES.map((feature, i) => (
                <motion.div
                  key={feature.title}
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: i * 0.05 }}
                  className="p-3 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors"
                >
                  <div className="text-brand mb-2">{feature.icon}</div>
                  <div className="text-sm font-medium text-white">{feature.title}</div>
                  <div className="text-xs text-gray-500 mt-1">{feature.description}</div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          {/* Info Bar */}
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="mb-6 p-4 rounded-xl bg-gradient-to-r from-brand-secondary/10 to-brand-deep/10 border border-brand-secondary/20"
          >
            <div className="flex items-start gap-3">
              <Layers className="w-5 h-5 text-brand-secondary-light mt-0.5" />
              <div>
                <h3 className="font-medium text-white">Demo Mode Active</h3>
                <p className="text-sm text-gray-400 mt-1">
                  This sandbox is running a demo Order Form artifact. In production, artifacts are loaded 
                  from {VOCAB.factory}’s generation pipeline. Click <strong className="text-brand">Start</strong> to 
                  begin interacting – all actions will be logged in the side panel.
                </p>
              </div>
            </div>
          </motion.div>

          {/* Sandbox Viewer */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
          >
            <SandboxViewer />
          </motion.div>

          {/* How It Works */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.5 }}
            className="mt-12"
          >
            <h2 className="text-xl font-bold text-white mb-6">How Weft Sandbox Works</h2>
            <div className="grid md:grid-cols-4 gap-4">
              {[
                {
                  step: '01',
                  title: 'Load Artifact',
                  description: `${VOCAB.factory} generates a UI component with a Weft config file`,
                },
                {
                  step: '02',
                  title: 'Configure Stubs',
                  description: 'API endpoints are mocked with realistic response data',
                },
                {
                  step: '03',
                  title: 'Start Sandbox',
                  description: 'The artifact runs in isolation with all interactions tracked',
                },
                {
                  step: '04',
                  title: 'Validate & Deploy',
                  description: 'Review action logs, fix issues, then deploy to production',
                },
              ].map((item, i) => (
                <div
                  key={item.step}
                  className="p-4 rounded-xl bg-white/5 border border-white/10"
                >
                  <div className="text-3xl font-bold text-brand/30 mb-2">{item.step}</div>
                  <div className="font-medium text-white">{item.title}</div>
                  <div className="text-sm text-gray-400 mt-1">{item.description}</div>
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </main>
    </div>
  );
}