'use client';

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { ReactNode, useState } from 'react';
import { useQueryClient, useQuery } from '@tanstack/react-query';
import clsx from 'clsx';
import { UserDropdown } from './user-dropdown';
import { FeedbackWidget } from './feedback-widget';
import api from '../lib/api-client';
import { MaintenanceScreen } from './maintenance-screen';

const nav = {
  superAdmin: [
    { href: '/super-admin', label: 'Dashboard' },
    { href: '/super-admin/plan-periods', label: 'Plan Periods' },
    { href: '/super-admin/supply-plans', label: 'Supply Plans' },
    { href: '/super-admin/supply-plan-reports', label: 'Supply Plan Reports' },
    { href: '/super-admin/deliveries', label: 'Deliveries' },
    { href: '/super-admin/delivery-reports', label: 'Delivery Reports' },
    { href: '/super-admin/masters', label: 'Masters' },
    { href: '/super-admin/users', label: 'Users' },
    { href: '/super-admin/anonymous-reports', label: 'See Something Reports' },
    { href: '/super-admin/api-management', label: 'API Management' },
    { href: '/super-admin/settings', label: 'Settings' },
  ],
  field: [
    { href: '/field-staff', label: 'My Dashboard' },
    { href: '/field-staff/new-delivery', label: 'New Delivery' },
    { href: '/field-staff/my-deliveries', label: 'My Deliveries' },
  ],
};

export function LayoutShell({ children, role = 'SUPER_ADMIN' }: { children: ReactNode; role?: 'SUPER_ADMIN' | 'FIELD_STAFF' }) {
  const pathname = usePathname();
  const router = useRouter();
  const queryClient = useQueryClient();
  const [isSyncing, setIsSyncing] = useState(false);
  const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
  const appVersion = 'v2.1.3';
  const appUpdatedAt = '2026-01-23';
  const items = role === 'SUPER_ADMIN' ? nav.superAdmin : nav.field;

  const { data: user } = useQuery({
    queryKey: ['auth-user'],
    queryFn: async () => {
      try {
        const response = await api.get('/auth/me');
        return response.data.user;
      } catch (e) {
        return null;
      }
    },
    retry: false,
  });

  const { data: appFlags } = useQuery({
    queryKey: ['app-flags'],
    queryFn: async () => {
      const response = await api.get('/app/flags');
      return response.data;
    },
    enabled: role === 'FIELD_STAFF',
    retry: false,
  });

  const handleSync = async () => {
    setIsSyncing(true);
    await queryClient.invalidateQueries();
    // Simulate a short delay for visual feedback
    await new Promise(resolve => setTimeout(resolve, 800));
    setIsSyncing(false);
  };

  const handleLogout = async () => {
    try {
      await api.post('/auth/logout');
    } catch (e) {
      // Ignore errors on logout
    }
    localStorage.removeItem('gcx_fshs_token');
    router.push('/login');
  };

  return (
    <div className="flex min-h-screen">
      <aside className="w-64 bg-white shadow-lg">
        <div className="p-6 border-b border-slate-100">
          <p className="text-lg font-semibold text-brand">GCX FSHS Field</p>
          <p className="text-xs text-slate-500">Supply Intelligence</p>
        </div>
        <nav className="p-4 space-y-1">
          {items.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={clsx(
                'block rounded-md px-3 py-2 text-sm font-medium transition',
                pathname === item.href ? 'bg-brand text-white' : 'text-slate-600 hover:bg-slate-100'
              )}
            >
              {item.label}
            </Link>
          ))}
        </nav>
      </aside>
      <main className="flex-1 bg-slate-50">
        <header className="flex items-center justify-between border-b border-slate-200 bg-white px-8 py-4">
          <div>
            <p className="text-xs uppercase tracking-wide text-slate-500">Active Plan Period</p>
            <p className="font-semibold text-slate-900">2025 · Term 1</p>
            {role === 'FIELD_STAFF' && (
              <p className="mt-1 text-[11px] font-semibold text-slate-400">
                App {appVersion} • Updated {appUpdatedAt}
              </p>
            )}
          </div>
          <div className="flex items-center gap-4">
            <button
              onClick={handleSync}
              disabled={isSyncing}
              className="flex items-center gap-2 rounded-full bg-brand/10 px-4 py-2 text-sm font-semibold text-brand transition hover:bg-brand/20 disabled:opacity-70"
            >
              {isSyncing ? (
                <>
                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-brand border-t-transparent" />
                  Syncing...
                </>
              ) : (
                'Sync'
              )}
            </button>
            <div className="h-6 w-px bg-slate-200"></div>
            <UserDropdown 
              user={user} 
              onLogout={handleLogout} 
              onReportIssue={() => setIsFeedbackOpen(true)}
            />
          </div>
        </header>
        <div className="p-8">
          {role === 'FIELD_STAFF' && appFlags?.maintenance_mode ? (
            <MaintenanceScreen />
          ) : (
            children
          )}
        </div>
      </main>
      <FeedbackWidget isOpen={isFeedbackOpen} onClose={() => setIsFeedbackOpen(false)} />
    </div>
  );
}