'use client';

import React, { useEffect, useState } from 'react';
import { Settings, Shield, Database, Cpu, CheckCircle } from 'lucide-react';

export default function AdminSettingsPage() {
  const [adminEmail, setAdminEmail] = useState<string>('admin@example.com');

  useEffect(() => {
    fetch('/api/auth/me')
      .then((res) => res.json())
      .then((data) => {
        if (data?.user?.email) {
          setAdminEmail(data.user.email);
        }
      })
      .catch(() => {});
  }, []);

  return (
    <div className="space-y-6 max-w-4xl">
      <div>
        <h1 className="text-2xl font-bold text-slate-900 tracking-tight flex items-center space-x-2">
          <Settings className="w-6 h-6 text-blue-600" />
          <span>System Settings & Configuration</span>
        </h1>
        <p className="text-xs text-slate-500 mt-1">
          Stage 1 YouTube Watch-Time Tracking Portal runtime overview
        </p>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 shadow-sm p-6 space-y-6">
        {/* Administrator Account */}
        <div>
          <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wider mb-2 flex items-center space-x-2">
            <Shield className="w-4 h-4 text-blue-600" />
            <span>Administrator Credentials</span>
          </h3>
          <div className="bg-slate-50 rounded-lg p-3.5 border border-slate-200 flex items-center justify-between text-xs">
            <div>
              <div className="text-slate-500 text-[11px]">Logged in as</div>
              <div className="font-semibold text-slate-800">{adminEmail}</div>
            </div>
            <span className="inline-flex items-center space-x-1 text-emerald-700 bg-emerald-100/70 px-2 py-0.5 rounded text-[11px] font-semibold">
              <CheckCircle className="w-3 h-3" />
              <span>Authorized</span>
            </span>
          </div>
        </div>

        {/* Database & Storage */}
        <div>
          <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wider mb-2 flex items-center space-x-2">
            <Database className="w-4 h-4 text-indigo-600" />
            <span>Storage & Database Target</span>
          </h3>
          <div className="bg-slate-50 rounded-lg p-3.5 border border-slate-200 space-y-2 text-xs">
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Database Engine:</span>
              <span className="font-mono font-medium text-slate-900">
                Supabase PostgreSQL (with zero-config fallback)
              </span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Row Level Security (RLS):</span>
              <span className="font-medium text-emerald-600">Enabled</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Migration Scripts:</span>
              <span className="font-mono text-slate-700">supabase/migrations/20261109000000_init_schema.sql</span>
            </div>
          </div>
        </div>

        {/* Tracking Engine Configuration */}
        <div>
          <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wider mb-2 flex items-center space-x-2">
            <Cpu className="w-4 h-4 text-emerald-600" />
            <span>Watch-Time Tracking Engine Rules</span>
          </h3>
          <div className="bg-slate-50 rounded-lg p-3.5 border border-slate-200 text-xs space-y-2">
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Client Polling Interval:</span>
              <span className="font-medium text-slate-800">5 seconds</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Server Heartbeat Interval:</span>
              <span className="font-medium text-slate-800">10 seconds</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Inactivity Timeout:</span>
              <span className="font-medium text-slate-800">35 seconds</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Idempotency & Sequence Check:</span>
              <span className="font-medium text-emerald-600">Strictly Enforced</span>
            </div>
            <div className="flex items-center justify-between">
              <span className="text-slate-600">Seek Jump Exclusion:</span>
              <span className="font-medium text-emerald-600">Active</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}