'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { getAvailableWorkstations, type WorkstationConfig } from '@/lib/workstation';
import { apiClient } from '@/lib/api';
import type { UserAccount } from '@/types';
import './workstation.css';

const ROLE_ADMINISTRATOR = 'ROLE_ADMINISTRATOR';

export default function WorkstationSelectorPage() {
  const router = useRouter();
  const [userRoles, setUserRoles] = useState<string[]>([]);
  const [availableWorkstations, setAvailableWorkstations] = useState<WorkstationConfig[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      // Get user roles from localStorage (login stores as user_info)
      let roles: string[] = [];
      try {
        const userStr = localStorage.getItem('user_info') || localStorage.getItem('user');
        if (userStr) {
          const user = JSON.parse(userStr);
          roles = user.roles || [];
          setUserRoles(roles);
        }
      } catch (e) {
        console.error('Error parsing user data:', e);
      }

      let workstations = getAvailableWorkstations(roles);
      // If no workstations but user might be admin (e.g. stale localStorage), fetch fresh /auth/me
      if (workstations.length === 0 && localStorage.getItem('access_token')) {
        try {
          const { data } = await apiClient.get<UserAccount>('/auth/me');
          if (cancelled) return;
          const freshRoles = data?.roles ?? [];
          const isAdmin = data?.is_admin || data?.is_super_admin || freshRoles.includes(ROLE_ADMINISTRATOR);
          if (isAdmin) {
            // Send admins straight to Administrator Workstation instead of "No workstations available"
            router.replace('/workstation/administrator');
            return;
          }
          workstations = getAvailableWorkstations(freshRoles);
        } catch {
          // keep workstations as-is (empty)
        }
      }
      if (!cancelled) {
        console.log('Available workstations:', workstations.length, workstations);
        setAvailableWorkstations(workstations);
      }
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [router]);

  const handleWorkstationSelect = (workstation: WorkstationConfig) => {
    router.push(workstation.route);
  };

  if (loading) {
    return (
      <div className="workstation-loading">
        <div className="spinner" />
        <p>Loading workstations...</p>
      </div>
    );
  }

  return (
    <div className="workstation-selector">
      <div className="workstation-header">
        <h1>Select Workstation</h1>
        <p>Choose your workstation based on your role and tasks</p>
      </div>

      {availableWorkstations.length === 0 ? (
        <div className="workstation-empty">
          <p>No workstations available. Please contact your administrator.</p>
        </div>
      ) : (
        <div className="workstation-grid">
          {availableWorkstations.map((workstation) => (
            <div
              key={workstation.id}
              className="workstation-card"
              onClick={() => handleWorkstationSelect(workstation)}
            >
              <div className="workstation-icon">{workstation.icon}</div>
              <h3>{workstation.name}</h3>
              <p>{workstation.description}</p>
              <div className="workstation-features">
                <strong>Features:</strong>
                <ul>
                  {workstation.features.slice(0, 3).map((feature, idx) => (
                    <li key={idx}>{feature}</li>
                  ))}
                  {workstation.features.length > 3 && (
                    <li className="more-features">+{workstation.features.length - 3} more</li>
                  )}
                </ul>
              </div>
              <div className="workstation-arrow">→</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}