'use client';

import { useAuth } from '@/lib/auth';
import { LayoutDashboard, Users, ShieldCheck, UserCog } from 'lucide-react';

export default function DashboardPage() {
  const { user } = useAuth();

  const roleColors: Record<string, string> = {
    'master-admin': 'text-purple-400',
    'admin':        'text-ts-accent',
    'operator':     'text-green-400',
  };

  return (
    <div>
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-semibold text-ts-text">
          Welcome back, {user?.display_name || user?.name}
        </h1>
        <p className="text-ts-muted mt-1">
          Signed in as{' '}
          <span className={`font-medium ${roleColors[user?.role ?? 'operator']}`}>
            {user?.role}
          </span>
        </p>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <div className="ts-card p-5">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-9 h-9 rounded-lg bg-ts-accent/10 flex items-center justify-center">
              <LayoutDashboard size={18} className="text-ts-accent" />
            </div>
            <span className="text-sm text-ts-muted">Platform</span>
          </div>
          <p className="text-2xl font-semibold text-ts-text">Active</p>
          <p className="text-xs text-ts-muted mt-1">dashboard.tang-studio.com</p>
        </div>

        {(user?.role === 'master-admin' || user?.role === 'admin') && (
          <>
            <div className="ts-card p-5">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-9 h-9 rounded-lg bg-purple-500/10 flex items-center justify-center">
                  <ShieldCheck size={18} className="text-purple-400" />
                </div>
                <span className="text-sm text-ts-muted">Admins</span>
              </div>
              <p className="text-2xl font-semibold text-ts-text">—</p>
              <p className="text-xs text-ts-muted mt-1">Manage in Users section</p>
            </div>

            <div className="ts-card p-5">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-9 h-9 rounded-lg bg-green-500/10 flex items-center justify-center">
                  <UserCog size={18} className="text-green-400" />
                </div>
                <span className="text-sm text-ts-muted">Operators</span>
              </div>
              <p className="text-2xl font-semibold text-ts-text">—</p>
              <p className="text-xs text-ts-muted mt-1">Manage in Users section</p>
            </div>
          </>
        )}
      </div>

      {/* Info card */}
      <div className="ts-card p-6">
        <h2 className="font-medium text-ts-text mb-2">Tang Studio Platform</h2>
        <p className="text-sm text-ts-muted leading-relaxed">
          This dashboard manages access to <strong className="text-ts-text">dashboard.tang-studio.com</strong>.
          Use the sidebar to manage users, configure your profile, and set up security options.
          Additional platform features will be available soon.
        </p>

        {user?.role === 'master-admin' && (
          <div className="mt-4 p-4 rounded-lg bg-ts-accent/5 border border-ts-accent/20">
            <p className="text-sm text-ts-accent font-medium">Master Admin</p>
            <p className="text-xs text-ts-muted mt-1">
              You have full access to create, edit, and remove all admins and operators.
            </p>
          </div>
        )}
      </div>
    </div>
  );
}