import { ApiReferenceReact } from '@scalar/api-reference-react'
import '@scalar/api-reference-react/style.css'

const openApiSpec = {
  openapi: '3.0.3',
  info: {
    title: 'Vtorio API',
    version: '1.0.0',
    description: 'File upload and management API for Vtorio application',
  },
  servers: [
    {
      url: 'http://localhost:3000',
      description: 'Development server',
    },
  ],
  components: {
    schemas: {
      File: {
        type: 'object',
        properties: {
          id: { type: 'string' },
          filename: { type: 'string' },
          mimetype: { type: 'string' },
          size: { type: 'number' },
          createdAt: { type: 'string', format: 'date-time' },
          updatedAt: { type: 'string', format: 'date-time' },
        },
        required: ['id', 'filename', 'mimetype', 'size', 'createdAt'],
      },
      Error: {
        type: 'object',
        properties: {
          success: { type: 'boolean', example: false },
          error: { type: 'string' },
        },
        required: ['success', 'error'],
      },
    },
  },
  paths: {
  },
}

export default function ApiDocs() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
      <div className="container mx-auto px-4 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
            Vtorio API Documentation
          </h1>
          <p className="text-gray-600 dark:text-gray-300">
            Interactive API documentation for file upload and management endpoints.
          </p>
        </div>
        <div className="bg-white dark:bg-gray-800 shadow rounded-lg border dark:border-gray-700">
          <div className="px-4 py-5 sm:p-6">
            <ApiReferenceReact
              configuration={{
                content: openApiSpec,
                theme: 'default',
                layout: 'modern',
                darkMode: true,
              }}
            />
          </div>
        </div>
      </div>
    </div>
  )
}