'use client';

import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Layout, 
  Typography, 
  Card, 
  Row, 
  Col, 
  Table, 
  Descriptions, 
  Tabs, 
  Tag, 
  Space, 
  Button, 
  Input, 
  Progress,
  Statistic,
  Alert,
  Collapse,
  Badge
} from 'antd';
import {
  ServerIcon,
  ShieldIcon,
  CloudIcon,
  CodeIcon,
  DownloadIcon,
  BarChart3Icon,
  CheckCircleIcon
} from 'lucide-react';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';
import {
  performanceMetrics,
  systemRequirements,
  apiEndpoints,
  deploymentOptions,
  versionCompatibility,
  enterpriseFeatures,
  performanceStatistics,
  downloadableResources,
  installationGuides,
  sdkSupport,
  authenticationMethods,
  monitoringFeatures,
  securityFeatures
} from '@/utils/technical-specs-data';

const { Content } = Layout;
const { Title, Paragraph, Text } = Typography;
const { Search } = Input;
const { Panel } = Collapse;

// Animation variants
const fadeInUp = {
  hidden: { opacity: 0, y: 30 },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: { duration: 0.6, ease: 'easeOut' }
  }
};

const stagger = {
  visible: {
    transition: {
      staggerChildren: 0.1
    }
  }
};


// Performance columns
const performanceColumns = [
  {
    title: 'Metric',
    dataIndex: 'metric',
    key: 'metric',
    render: (text: string, record: any) => (
      <Space>
        {record.icon}
        <Text strong>{text}</Text>
      </Space>
    ),
  },
  {
    title: 'Value',
    dataIndex: 'value',
    key: 'value',
    render: (text: string) => <Tag color="blue">{text}</Tag>,
  },
  {
    title: 'Component',
    dataIndex: 'component',
    key: 'component',
  },
  {
    title: 'Status',
    dataIndex: 'status',
    key: 'status',
    render: (status: string) => {
      return <Badge status="success" text={status} />;
    },
  },
];

// System requirements columns
const requirementsColumns = [
  {
    title: 'Category',
    dataIndex: 'category',
    key: 'category',
    render: (text: string, record: any) => (
      <Space>
        {record.icon}
        <Text strong>{text}</Text>
      </Space>
    ),
  },
  {
    title: 'Minimum',
    dataIndex: 'minimum',
    key: 'minimum',
  },
  {
    title: 'Recommended',
    dataIndex: 'recommended',
    key: 'recommended',
    render: (text: string) => <Text type="success">{text}</Text>,
  },
  {
    title: 'Enterprise',
    dataIndex: 'enterprise',
    key: 'enterprise',
    render: (text: string) => <Text type="warning">{text}</Text>,
  },
];

// API endpoints columns
const apiColumns = [
  {
    title: 'Method',
    dataIndex: 'method',
    key: 'method',
    render: (method: string) => {
      const color = 
        method === 'POST' ? 'green' :
        method === 'GET' ? 'blue' :
        method === 'WS' ? 'purple' : 'default';
      return <Tag color={color}>{method}</Tag>;
    },
  },
  {
    title: 'Endpoint',
    dataIndex: 'endpoint',
    key: 'endpoint',
    render: (text: string) => <Text code>{text}</Text>,
  },
  {
    title: 'Description',
    dataIndex: 'description',
    key: 'description',
  },
  {
    title: 'Authentication',
    dataIndex: 'authentication',
    key: 'authentication',
  },
  {
    title: 'Rate Limit',
    dataIndex: 'rateLimit',
    key: 'rateLimit',
  },
];

export default function TechnicalSpecsPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [activeTab, setActiveTab] = useState('performance');

  const tabItems = [
    {
      key: 'performance',
      label: (
        <Space>
          <BarChart3Icon className="w-4 h-4" />
          Performance Metrics
        </Space>
      ),
      children: (
        <div className="space-y-6">
          <Alert
            message="Performance Benchmarks"
            description="All metrics are measured under standard production conditions with optimal configuration."
            type="info"
            showIcon
            className="mb-6"
          />
          
          <Row gutter={[24, 24]} className="mb-6">
            {performanceStatistics.map((stat, index) => (
              <Col key={index} xs={24} sm={12} lg={6}>
                <Card className="glass-effect text-center">
                  <Statistic
                    title={stat.title}
                    value={stat.value}
                    suffix={stat.suffix}
                    valueStyle={{ color: stat.color }}
                    prefix={stat.icon}
                  />
                </Card>
              </Col>
            ))}
          </Row>

          <Table
            columns={performanceColumns}
            dataSource={performanceMetrics}
            pagination={false}
            className="glass-effect"
          />

          <Card className="glass-effect">
            <Title level={4}>Scalability Architecture</Title>
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <div className="space-y-4">
                  <div>
                    <Text strong>Horizontal Scaling:</Text>
                    <Progress percent={95} status="active" strokeColor="#30d158" />
                  </div>
                  <div>
                    <Text strong>Load Distribution:</Text>
                    <Progress percent={88} status="active" strokeColor="#007aff" />
                  </div>
                  <div>
                    <Text strong>Auto-scaling:</Text>
                    <Progress percent={92} status="active" strokeColor="#ff9500" />
                  </div>
                </div>
              </Col>
              <Col xs={24} md={12}>
                <Paragraph>
                  CHORUS Services employs a microservices architecture with automatic horizontal 
                  scaling capabilities. Each component can scale independently based on demand, 
                  ensuring optimal resource utilization and consistent performance under varying loads.
                </Paragraph>
              </Col>
            </Row>
          </Card>
        </div>
      ),
    },
    {
      key: 'requirements',
      label: (
        <Space>
          <ServerIcon className="w-4 h-4" />
          System Requirements
        </Space>
      ),
      children: (
        <div className="space-y-6">
          <Alert
            message="Infrastructure Planning"
            description="Choose the configuration that best matches your deployment scale and requirements."
            type="success"
            showIcon
            className="mb-6"
          />

          <Table
            columns={requirementsColumns}
            dataSource={systemRequirements}
            pagination={false}
            className="glass-effect"
          />

          <Row gutter={[24, 24]}>
            <Col xs={24} lg={12}>
              <Card className="glass-effect" title="Monitoring & Observability">
                <Space direction="vertical" className="w-full">
                  {monitoringFeatures.map((feature, index) => (
                    <div key={index} className="flex items-center justify-between">
                      <Text>{feature.name}</Text>
                      {feature.icon}
                    </div>
                  ))}
                </Space>
              </Card>
            </Col>
            <Col xs={24} lg={12}>
              <Card className="glass-effect" title="Security Features">
                <Space direction="vertical" className="w-full">
                  {securityFeatures.map((feature, index) => (
                    <div key={index} className="flex items-center justify-between">
                      <Text>{feature.name}</Text>
                      {feature.icon}
                    </div>
                  ))}
                </Space>
              </Card>
            </Col>
          </Row>
        </div>
      ),
    },
    {
      key: 'api',
      label: (
        <Space>
          <CodeIcon className="w-4 h-4" />
          API Documentation
        </Space>
      ),
      children: (
        <div className="space-y-6">
          <Alert
            message="RESTful API & WebSocket Support"
            description="Comprehensive API access with multiple authentication methods and real-time capabilities."
            type="info"
            showIcon
            className="mb-6"
          />

          <Table
            columns={apiColumns}
            dataSource={apiEndpoints}
            pagination={false}
            className="glass-effect"
          />

          <Row gutter={[24, 24]}>
            <Col xs={24} lg={12}>
              <Card className="glass-effect" title="Authentication Methods">
                <Collapse ghost>
                  {authenticationMethods.map((method, index) => (
                    <Panel header={method.title} key={index}>
                      <div className="space-y-2">
                        <Text code>{method.example}</Text>
                        <Paragraph className="text-sm text-gray-400">
                          {method.description}
                        </Paragraph>
                      </div>
                    </Panel>
                  ))}
                </Collapse>
              </Card>
            </Col>
            <Col xs={24} lg={12}>
              <Card className="glass-effect" title="SDK Support">
                <div className="space-y-4">
                  {sdkSupport.map((sdk, index) => (
                    <div key={index} className="flex items-center justify-between">
                      <Text>{sdk.language}</Text>
                      <Tag color={sdk.color}>{sdk.status}</Tag>
                    </div>
                  ))}
                </div>
              </Card>
            </Col>
          </Row>

          <Card className="glass-effect" title="Example Request">
            <div className="bg-gray-900 rounded-lg p-4 overflow-x-auto">
              <pre className="text-sm text-gray-300">
{`curl -X POST https://api.chorus.services/v1/whoosh/workflow \\
  -H "Authorization: Bearer YOUR_JWT_TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '{
    "workflow_id": "example-workflow",
    "parameters": {
      "target": "production",
      "agents": ["bzzz-1", "bzzz-2"],
      "context": "semantic-search-enabled"
    }
  }'`}
              </pre>
            </div>
          </Card>
        </div>
      ),
    },
    {
      key: 'enterprise',
      label: (
        <Space>
          <ShieldIcon className="w-4 h-4" />
          Enterprise Features
        </Space>
      ),
      children: (
        <div className="space-y-6">
          <Alert
            message="Enterprise-Grade Capabilities"
            description="Advanced features designed for mission-critical deployments and large-scale operations."
            type="success"
            showIcon
            className="mb-6"
          />

          <Row gutter={[24, 24]}>
            {enterpriseFeatures.map((feature, index) => (
              <Col key={index} xs={24} lg={8}>
                <Card className="glass-effect h-full" title={feature.category}>
                  <div className="space-y-3">
                    {feature.features.map((item, itemIndex) => (
                      <div key={itemIndex} className="flex items-center space-x-2">
                        <span className={feature.color}>{feature.icon}</span>
                        <Text>{item}</Text>
                      </div>
                    ))}
                  </div>
                </Card>
              </Col>
            ))}
          </Row>

          <Card className="glass-effect" title="Enterprise Support">
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Descriptions column={1} bordered size="small">
                  <Descriptions.Item label="Support Level">24/7 Premium Support</Descriptions.Item>
                  <Descriptions.Item label="Response Time">&lt; 1 hour (Critical)</Descriptions.Item>
                  <Descriptions.Item label="Dedicated CSM">Yes</Descriptions.Item>
                  <Descriptions.Item label="Training">Included</Descriptions.Item>
                  <Descriptions.Item label="Professional Services">Available</Descriptions.Item>
                </Descriptions>
              </Col>
              <Col xs={24} md={12}>
                <div className="space-y-4">
                  <Title level={5}>Included Services</Title>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-center space-x-2">
                      <CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
                      <Text>Architecture review and optimization</Text>
                    </li>
                    <li className="flex items-center space-x-2">
                      <CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
                      <Text>Custom integration development</Text>
                    </li>
                    <li className="flex items-center space-x-2">
                      <CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
                      <Text>Performance tuning and monitoring</Text>
                    </li>
                    <li className="flex items-center space-x-2">
                      <CheckCircleIcon className="w-4 h-4 text-green-500 flex-shrink-0" />
                      <Text>Security audits and recommendations</Text>
                    </li>
                  </ul>
                </div>
              </Col>
            </Row>
          </Card>
        </div>
      ),
    },
    {
      key: 'deployment',
      label: (
        <Space>
          <CloudIcon className="w-4 h-4" />
          Deployment Options
        </Space>
      ),
      children: (
        <div className="space-y-6">
          <Alert
            message="Flexible Deployment Models"
            description="Choose from cloud, on-premises, or hybrid deployments to meet your specific requirements."
            type="info"
            showIcon
            className="mb-6"
          />

          <Row gutter={[24, 24]}>
            {deploymentOptions.map((option) => (
              <Col key={option.key} xs={24} lg={12}>
                <Card className="glass-effect h-full" title={option.option}>
                  <div className="space-y-4">
                    <div>
                      <Text strong>Platforms:</Text>
                      <div className="mt-2 space-x-1">
                        {option.platforms.map((platform) => (
                          <Tag key={platform} color="blue">{platform}</Tag>
                        ))}
                      </div>
                    </div>
                    <div>
                      <Text strong>Key Features:</Text>
                      <ul className="mt-2 space-y-1">
                        {option.features.map((feature, idx) => (
                          <li key={idx} className="text-sm flex items-center space-x-2">
                            <CheckCircleIcon className="w-3 h-3 text-green-500 flex-shrink-0" />
                            <Text>{feature}</Text>
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div className="flex justify-between items-center pt-2 border-t border-gray-700">
                      <div>
                        <Text strong>Complexity: </Text>
                        <Tag color={
                          option.complexity === 'Low' ? 'green' :
                          option.complexity === 'Medium' ? 'orange' : 'red'
                        }>
                          {option.complexity}
                        </Tag>
                      </div>
                      <div>
                        <Text strong>Cost: </Text>
                        <Tag color="purple">{option.cost}</Tag>
                      </div>
                    </div>
                  </div>
                </Card>
              </Col>
            ))}
          </Row>

          <Card className="glass-effect" title="Installation Guides">
            <Row gutter={[16, 16]}>
              {installationGuides.map((guide, index) => (
                <Col key={index} xs={24} md={8}>
                  <Button 
                    type={index === 0 ? "primary" : undefined}
                    icon={<DownloadIcon className="w-4 h-4" />}
                    block
                    size="large"
                    className="mb-2"
                    href={guide.href}
                  >
                    {guide.title}
                  </Button>
                  <Text className="text-sm text-gray-400">{guide.description}</Text>
                </Col>
              ))}
            </Row>
          </Card>

          <Card className="glass-effect" title="Version Compatibility Matrix">
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-gray-700">
                    <th className="text-left p-2">CHORUS Version</th>
                    <th className="text-left p-2">Kubernetes</th>
                    <th className="text-left p-2">Docker</th>
                    <th className="text-left p-2">PostgreSQL</th>
                    <th className="text-left p-2">Redis</th>
                    <th className="text-left p-2">Node.js</th>
                  </tr>
                </thead>
                <tbody>
                  {versionCompatibility.map((version, index) => (
                    <tr key={index} className={index < versionCompatibility.length - 1 ? "border-b border-gray-800" : ""}>
                      <td className="p-2">{version.chorusVersion}</td>
                      <td className="p-2">{version.kubernetes}</td>
                      <td className="p-2">{version.docker}</td>
                      <td className="p-2">{version.postgresql}</td>
                      <td className="p-2">{version.redis}</td>
                      <td className="p-2">{version.nodejs}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      ),
    },
  ];

  return (
    <>
      <Header />
      <Layout className="min-h-screen bg-chorus-charcoal">
        <Content>
          {/* Hero Section */}
          <section className="section-padding-sm bg-gradient-to-br from-chorus-charcoal via-slate-900 to-chorus-charcoal">
            <div className="container-chorus">
              <motion.div
                initial="hidden"
                animate="visible"
                variants={fadeInUp}
                className="text-center max-w-4xl mx-auto"
              >
                <Title level={1} className="text-white mb-4">
                  Technical Specifications
                </Title>
                <Paragraph className="text-xl text-gray-300 mb-8">
                  Comprehensive technical documentation for enterprise decision makers, 
                  system architects, and development teams implementing CHORUS Services.
                </Paragraph>
                
                <div className="max-w-md mx-auto mb-8">
                  <Search
                    placeholder="Search technical documentation..."
                    size="large"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="glass-search"
                  />
                </div>
              </motion.div>
            </div>
          </section>

          {/* Main Content */}
          <section className="section-padding">
            <div className="container-chorus">
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={stagger}
              >
                <Tabs
                  activeKey={activeTab}
                  onChange={setActiveTab}
                  items={tabItems}
                  size="large"
                  className="glass-tabs"
                />
              </motion.div>
            </div>
          </section>

          {/* Download Resources Section */}
          <section className="section-padding-sm bg-gradient-to-r from-slate-900 to-chorus-charcoal">
            <div className="container-chorus">
              <motion.div
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={fadeInUp}
                className="text-center"
              >
                <Title level={2} className="text-white mb-6">
                  Additional Resources
                </Title>
                <Row gutter={[24, 24]} justify="center">
                  {downloadableResources.map((resource, index) => (
                    <Col key={index} xs={24} sm={12} md={8}>
                      <Card className="glass-effect text-center h-full">
                        <div className={`mx-auto mb-4 ${resource.color}`}>
                          {resource.icon}
                        </div>
                        <Title level={4} className="text-white mb-2">{resource.title}</Title>
                        <Paragraph className="text-gray-400 mb-4">
                          {resource.description}
                        </Paragraph>
                        <Button type="primary" block href={resource.href}>
                          {resource.buttonText}
                        </Button>
                      </Card>
                    </Col>
                  ))}
                </Row>
              </motion.div>
            </div>
          </section>
        </Content>
      </Layout>
      <Footer />
    </>
  );
}