'use client';

import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Card, CardContent } from '@/components/ui/card';

export default function AdminSettingsPage() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000';

  return (
    <DashboardLayout role="admin" title="Settings">
      <div className="max-w-2xl space-y-6">
        <Card>
          <CardContent className="p-6 space-y-4">
            <h2 className="font-semibold text-slate-900">Platform</h2>
            <dl className="grid grid-cols-[120px_1fr] gap-2 text-sm">
              <dt className="text-muted">App name</dt>
              <dd className="font-medium">eHandyHire</dd>
              <dt className="text-muted">API URL</dt>
              <dd className="font-mono text-xs break-all">{apiUrl}</dd>
              <dt className="text-muted">Region</dt>
              <dd>Philippines</dd>
            </dl>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6 space-y-3">
            <h2 className="font-semibold text-slate-900">Demo admin login</h2>
            <p className="text-sm text-muted">
              Use these credentials in development. Change passwords before production.
            </p>
            <dl className="grid grid-cols-[80px_1fr] gap-2 text-sm bg-slate-50 rounded-lg p-4">
              <dt className="text-muted">Email</dt>
              <dd className="font-mono text-xs">admin@ehandyhire.com</dd>
              <dt className="text-muted">Password</dt>
              <dd className="font-mono text-xs">Password123!</dd>
            </dl>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6 space-y-3">
            <h2 className="font-semibold text-slate-900">Admin capabilities</h2>
            <ul className="text-sm text-slate-600 space-y-1.5 list-disc list-inside">
              <li>Manage user accounts (suspend / activate)</li>
              <li>Verify workers and toggle availability</li>
              <li>Review identity documents</li>
              <li>Monitor and update job statuses</li>
              <li>Activate or deactivate service categories</li>
              <li>View platform analytics and QR scan reports</li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}