'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Header } from '@/components/layout/header'
import { Users, Building2, CreditCard, Settings, Shield, BarChart3 } from 'lucide-react'

export default function AdminPortalPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        <div className="container mx-auto py-12 px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-white">Tenant Administration</h1>
            <p className="mt-2 text-gray-400">
              Manage your organization, users, permissions, and billing
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            <Card className="border-studio-medium hover:border-phoenix-fire/50 transition-colors">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-phoenix-fire/20 p-3">
                    <Building2 className="h-6 w-6 text-phoenix-fire" />
                  </div>
                  <div>
                    <CardTitle>Organization</CardTitle>
                    <CardDescription>Manage organization settings</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="mb-4 text-sm text-gray-400">
                  Configure organization details, domains, and branding
                </p>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="/portal/admin/organization">Manage Organization</Link>
                </Button>
              </CardContent>
            </Card>

            <Card className="border-studio-medium hover:border-phoenix-fire/50 transition-colors">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-sankofa-gold/20 p-3">
                    <Users className="h-6 w-6 text-sankofa-gold" />
                  </div>
                  <div>
                    <CardTitle>Users & Roles</CardTitle>
                    <CardDescription>Manage team members</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="mb-4 text-sm text-gray-400">
                  Invite users, assign roles, and manage permissions
                </p>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="/portal/admin/users">Manage Users</Link>
                </Button>
              </CardContent>
            </Card>

            <Card className="border-studio-medium hover:border-phoenix-fire/50 transition-colors">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-neon-cyan/20 p-3">
                    <Shield className="h-6 w-6 text-neon-cyan" />
                  </div>
                  <div>
                    <CardTitle>Permissions</CardTitle>
                    <CardDescription>Configure access controls</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="mb-4 text-sm text-gray-400">
                  Set up role-based access control and permissions
                </p>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="/portal/admin/permissions">Manage Permissions</Link>
                </Button>
              </CardContent>
            </Card>

            <Card className="border-studio-medium hover:border-phoenix-fire/50 transition-colors">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-phoenix-fire/20 p-3">
                    <CreditCard className="h-6 w-6 text-phoenix-fire" />
                  </div>
                  <div>
                    <CardTitle>Billing</CardTitle>
                    <CardDescription>Manage subscriptions</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="mb-4 text-sm text-gray-400">
                  View invoices, manage payment methods, and billing settings
                </p>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="/portal/admin/billing">Manage Billing</Link>
                </Button>
              </CardContent>
            </Card>

            <Card className="border-studio-medium hover:border-phoenix-fire/50 transition-colors">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-sankofa-gold/20 p-3">
                    <BarChart3 className="h-6 w-6 text-sankofa-gold" />
                  </div>
                  <div>
                    <CardTitle>Usage & Analytics</CardTitle>
                    <CardDescription>Monitor resource usage</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="mb-4 text-sm text-gray-400">
                  Track usage, costs, and performance metrics
                </p>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="/portal/admin/analytics">View Analytics</Link>
                </Button>
              </CardContent>
            </Card>

            <Card className="border-studio-medium hover:border-phoenix-fire/50 transition-colors">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="rounded-lg bg-neon-cyan/20 p-3">
                    <Settings className="h-6 w-6 text-neon-cyan" />
                  </div>
                  <div>
                    <CardTitle>Settings</CardTitle>
                    <CardDescription>Configure preferences</CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="mb-4 text-sm text-gray-400">
                  Manage security, notifications, and integrations
                </p>
                <Button variant="outline" className="w-full" asChild>
                  <Link href="/portal/admin/settings">Manage Settings</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </main>
    </>
  )
}

