'use client'

import { SettingsNav, SettingsSection } from '@/components/settings'
import { Card, CardContent } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

export default function AboutSettingsPage() {
  const version = '1.0.0'
  const buildDate = '2026-01-17'

  return (
    <div className="container mx-auto py-10 px-4 max-w-6xl">
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Sidebar Navigation */}
        <aside className="lg:col-span-1">
          <SettingsNav />
        </aside>

        {/* Main Content */}
        <main className="lg:col-span-3 space-y-6">
          <div>
            <h1 className="text-3xl font-bold mb-2">About</h1>
            <p className="text-gray-600 dark:text-gray-400">
              Information about the application
            </p>
          </div>

          <SettingsSection
            title="Keep Notes"
            icon={<span className="text-2xl">📝</span>}
            description="A powerful note-taking application with AI-powered features"
          >
            <Card>
              <CardContent className="pt-6 space-y-4">
                <div className="flex justify-between items-center">
                  <span className="font-medium">Version</span>
                  <Badge variant="secondary">{version}</Badge>
                </div>
                <div className="flex justify-between items-center">
                  <span className="font-medium">Build Date</span>
                  <Badge variant="outline">{buildDate}</Badge>
                </div>
                <div className="flex justify-between items-center">
                  <span className="font-medium">Platform</span>
                  <Badge variant="outline">Web</Badge>
                </div>
              </CardContent>
            </Card>
          </SettingsSection>

          <SettingsSection
            title="Features"
            icon={<span className="text-2xl">✨</span>}
            description="AI-powered capabilities"
          >
            <Card>
              <CardContent className="pt-6 space-y-2">
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>AI-powered title suggestions</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>Semantic search with embeddings</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>Paragraph reformulation</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>Memory Echo daily insights</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>Notebook organization</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>Drag & drop note management</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>Label system</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-green-500">✓</span>
                  <span>Multiple AI providers (OpenAI, Ollama)</span>
                </div>
              </CardContent>
            </Card>
          </SettingsSection>

          <SettingsSection
            title="Technology Stack"
            icon={<span className="text-2xl">⚙️</span>}
            description="Built with modern technologies"
          >
            <Card>
              <CardContent className="pt-6 space-y-2 text-sm">
                <div><strong>Frontend:</strong> Next.js 16, React 19, TypeScript</div>
                <div><strong>Backend:</strong> Next.js API Routes, Server Actions</div>
                <div><strong>Database:</strong> SQLite (Prisma ORM)</div>
                <div><strong>Authentication:</strong> NextAuth 5</div>
                <div><strong>AI:</strong> Vercel AI SDK, OpenAI, Ollama</div>
                <div><strong>UI:</strong> Radix UI, Tailwind CSS, Lucide Icons</div>
                <div><strong>Testing:</strong> Playwright (E2E)</div>
              </CardContent>
            </Card>
          </SettingsSection>

          <SettingsSection
            title="Support"
            icon={<span className="text-2xl">💬</span>}
            description="Get help and feedback"
          >
            <Card>
              <CardContent className="pt-6 space-y-4">
                <div>
                  <p className="font-medium mb-2">Documentation</p>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    Check the documentation for detailed guides and tutorials.
                  </p>
                </div>
                <div>
                  <p className="font-medium mb-2">Report Issues</p>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    Found a bug? Report it in the issue tracker.
                  </p>
                </div>
                <div>
                  <p className="font-medium mb-2">Feedback</p>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    We value your feedback! Share your thoughts and suggestions.
                  </p>
                </div>
              </CardContent>
            </Card>
          </SettingsSection>
        </main>
      </div>
    </div>
  )
}