import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@the-order/ui';
import Link from 'next/link';

export default function DocsPage(): JSX.Element {
  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-4xl">
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">Documentation</h1>
          <p className="text-xl text-gray-600">
            Learn how to use The Order's services and APIs
          </p>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Getting Started</CardTitle>
              <CardDescription>Quick start guide for new users</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-semibold text-lg mb-2">1. Apply for eResidency</h3>
                <p className="text-gray-700">
                  Start by submitting an eResidency application through our{' '}
                  <Link href="/apply" className="text-primary hover:underline">
                    application form
                  </Link>
                  . You'll need to provide personal information and identity documents.
                </p>
              </div>
              <div>
                <h3 className="font-semibold text-lg mb-2">2. Wait for Review</h3>
                <p className="text-gray-700">
                  Our team will review your application. You can check the status using your
                  application ID on the{' '}
                  <Link href="/status" className="text-primary hover:underline">
                    status page
                  </Link>
                  .
                </p>
              </div>
              <div>
                <h3 className="font-semibold text-lg mb-2">3. Receive Credentials</h3>
                <p className="text-gray-700">
                  Once approved, you'll receive verifiable credentials that you can use to access
                  services and prove your identity.
                </p>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>API Documentation</CardTitle>
              <CardDescription>RESTful API endpoints and integration guides</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div>
                <h3 className="font-semibold text-lg mb-2">Identity Service</h3>
                <p className="text-gray-700 mb-2">
                  Manage verifiable credentials, issue new credentials, and verify existing ones.
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
                  <li>POST /api/v1/credentials/issue - Issue a new credential</li>
                  <li>POST /api/v1/credentials/verify - Verify a credential</li>
                  <li>GET /api/v1/credentials/{'{id}'} - Get credential details</li>
                  <li>POST /api/v1/credentials/{'{id}'}/revoke - Revoke a credential</li>
                </ul>
              </div>
              <div>
                <h3 className="font-semibold text-lg mb-2">eResidency Service</h3>
                <p className="text-gray-700 mb-2">
                  Submit and manage eResidency applications.
                </p>
                <ul className="list-disc list-inside space-y-1 text-gray-600 ml-4">
                  <li>POST /api/v1/applications - Submit an application</li>
                  <li>GET /api/v1/applications/{'{id}'} - Get application status</li>
                  <li>GET /api/v1/applications - List applications (admin)</li>
                </ul>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Verifiable Credentials</CardTitle>
              <CardDescription>Understanding digital credentials</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4 text-gray-700">
              <p>
                Verifiable Credentials are tamper-proof digital documents that prove your identity
                or qualifications. They follow W3C standards and can be verified by anyone with
                access to the public key.
              </p>
              <div>
                <h3 className="font-semibold mb-2">Features:</h3>
                <ul className="list-disc list-inside space-y-1 ml-4">
                  <li>Cryptographically signed and tamper-proof</li>
                  <li>Privacy-preserving - you control what information to share</li>
                  <li>Interoperable - works with standard verifiers</li>
                  <li>Revocable - can be revoked if compromised</li>
                </ul>
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Support</CardTitle>
              <CardDescription>Need help? We're here for you</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-gray-700 mb-4">
                If you have questions or need assistance, please{' '}
                <Link href="/contact" className="text-primary hover:underline">
                  contact our support team
                </Link>
                .
              </p>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}

