import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { dataService } from '../services/dataService';
import { IComplianceDoc, IHSEIncident, IRiskAssessment } from '../types';
import { Shield, FileText, AlertTriangle, Activity, AlertOctagon, Calendar, RefreshCw, AlertCircle } from 'lucide-react';
import { useAssetStore } from '../store/useAssetStore';
import { useUIStore } from '../store/useUIStore';
import ComplianceDocuments from '../components/compliance/ComplianceDocuments';
import HSEIncidents from '../components/compliance/HSEIncidents';
import RiskRegister from '../components/compliance/RiskRegister';

const Compliance: React.FC = () => {
  const { selectedProjectId } = useAssetStore();
  const { addNotification } = useUIStore();
  const [activeTab, setActiveTab] = useState<'compliance' | 'hse' | 'risk'>('compliance');
  const [docs, setDocs] = useState<IComplianceDoc[]>([]);
  const [incidents, setIncidents] = useState<IHSEIncident[]>([]);
  const [risks, setRisks] = useState<IRiskAssessment[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [refreshing, setRefreshing] = useState(false);

  const loadData = useCallback(async () => {
    if (!selectedProjectId) {
      setLoading(false);
      return;
    }
    
    setLoading(true);
    setError(null);
    
    try {
      // Load all data in parallel for better performance
      const [d, i, r] = await Promise.all([
        dataService.getComplianceDocs(selectedProjectId),
        dataService.getHSEIncidents(selectedProjectId),
        dataService.getRisks()
      ]);
      
      setDocs(d);
      setIncidents(i);
      setRisks(r);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi tải dữ liệu HSE & Tuân thủ';
      setError(errorMessage);
      addNotification('error', errorMessage);
      console.error('Error loading compliance data:', err);
    } finally {
      setLoading(false);
    }
  }, [selectedProjectId, addNotification]);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const refreshData = useCallback(async () => {
    if (!selectedProjectId) return;
    
    setRefreshing(true);
    try {
      const d = await dataService.getComplianceDocs(selectedProjectId);
      setDocs(d);
      addNotification('success', 'Đã cập nhật danh sách văn bản');
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi làm mới dữ liệu';
      addNotification('error', errorMessage);
    } finally {
      setRefreshing(false);
    }
  }, [selectedProjectId, addNotification]);

  const refreshIncidents = useCallback(async () => {
    if (!selectedProjectId) return;
    
    setRefreshing(true);
    try {
      const i = await dataService.getHSEIncidents(selectedProjectId);
      setIncidents(i);
      addNotification('success', 'Đã cập nhật danh sách sự cố');
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi làm mới dữ liệu';
      addNotification('error', errorMessage);
    } finally {
      setRefreshing(false);
    }
  }, [selectedProjectId, addNotification]);

  const refreshRisks = useCallback(async () => {
    setRefreshing(true);
    try {
      const r = await dataService.getRisks();
      setRisks(r);
      addNotification('success', 'Đã cập nhật sổ tay rủi ro');
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Lỗi khi làm mới dữ liệu';
      addNotification('error', errorMessage);
    } finally {
      setRefreshing(false);
    }
  }, [addNotification]);

  const handleRefresh = useCallback(() => {
    if (activeTab === 'compliance') {
      refreshData();
    } else if (activeTab === 'hse') {
      refreshIncidents();
    } else if (activeTab === 'risk') {
      refreshRisks();
    }
  }, [activeTab, refreshData, refreshIncidents, refreshRisks]);

  // Memoized statistics for better performance
  const stats = useMemo(() => {
    const expiringDocs = docs.filter(d => d.status === 'Expiring Soon').length;
    const openIncidents = incidents.filter(i => i.status !== 'Closed').length;
    const highRisks = risks.filter(r => r.riskLevel === 'High' || r.riskLevel === 'Extreme').length;
    
    return { expiringDocs, openIncidents, highRisks };
  }, [docs, incidents, risks]);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <div className="text-slate-500 dark:text-slate-400">Đang tải dữ liệu HSE & Tuân thủ...</div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <AlertCircle className="h-12 w-12 text-red-500 mx-auto mb-4" />
          <div className="text-red-500 dark:text-red-400 font-medium mb-2">Lỗi khi tải dữ liệu</div>
          <div className="text-slate-500 dark:text-slate-400 text-sm mb-4">{error}</div>
          <button
            onClick={loadData}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            Thử lại
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-slate-800 dark:text-white">HSE & Tuân thủ (Compliance)</h1>
        <button
          onClick={handleRefresh}
          disabled={refreshing}
          className="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm shadow-sm hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
          title="Làm mới dữ liệu"
        >
          <RefreshCw size={16} className={refreshing ? 'animate-spin' : ''} />
          Làm mới
        </button>
      </div>

      {/* Top Stats */}
      <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
        <div className="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between hover:shadow-md transition-shadow">
          <div>
            <p className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase">Văn bản sắp hết hạn</p>
            <p className={`text-3xl font-bold mt-2 ${stats.expiringDocs > 0 ? 'text-orange-600 dark:text-orange-400' : 'text-slate-800 dark:text-white'}`}>
              {stats.expiringDocs}
            </p>
            {stats.expiringDocs > 0 && (
              <p className="text-xs text-orange-600 dark:text-orange-400 mt-1">Cần chú ý</p>
            )}
          </div>
          <div className="p-3 bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-300 rounded-full">
            <Calendar size={24} />
          </div>
        </div>
        <div className="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between hover:shadow-md transition-shadow">
          <div>
            <p className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase">Sự cố an toàn mở</p>
            <p className={`text-3xl font-bold mt-2 ${stats.openIncidents > 0 ? 'text-red-600 dark:text-red-400' : 'text-slate-800 dark:text-white'}`}>
              {stats.openIncidents}
            </p>
            {stats.openIncidents > 0 && (
              <p className="text-xs text-red-600 dark:text-red-400 mt-1">Cần xử lý</p>
            )}
          </div>
          <div className="p-3 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-300 rounded-full">
            <Activity size={24} />
          </div>
        </div>
        <div className="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 flex items-center justify-between hover:shadow-md transition-shadow col-span-2 md:col-span-1">
          <div>
            <p className="text-sm font-medium text-slate-500 dark:text-slate-400 uppercase">Rủi ro cao & nghiêm trọng</p>
            <p className={`text-3xl font-bold mt-2 ${stats.highRisks > 0 ? 'text-purple-600 dark:text-purple-400' : 'text-slate-800 dark:text-white'}`}>
              {stats.highRisks}
            </p>
            {stats.highRisks > 0 && (
              <p className="text-xs text-purple-600 dark:text-purple-400 mt-1">Cần giám sát</p>
            )}
          </div>
          <div className="p-3 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-300 rounded-full">
            <AlertOctagon size={24} />
          </div>
        </div>
      </div>

      {/* Tabs */}
      <div className="border-b border-slate-200 dark:border-slate-700 overflow-x-auto">
        <nav className="-mb-px flex space-x-8 min-w-max">
          <button
            onClick={() => setActiveTab('compliance')}
            className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 ${activeTab === 'compliance' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600'
              }`}
          >
            <FileText size={16} /> Pháp lý & ISO
          </button>
          <button
            onClick={() => setActiveTab('hse')}
            className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 ${activeTab === 'hse' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600'
              }`}
          >
            <Shield size={16} /> An toàn (HSE)
          </button>
          <button
            onClick={() => setActiveTab('risk')}
            className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm flex items-center gap-2 ${activeTab === 'risk' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600'
              }`}
          >
            <AlertTriangle size={16} /> Quản lý Rủi ro
          </button>
        </nav>
      </div>

      {/* Content */}
      <div className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 min-h-[400px]">
        {activeTab === 'compliance' && (
          <ComplianceDocuments
            docs={docs}
            selectedProjectId={selectedProjectId}
            onRefresh={refreshData}
          />
        )}

        {activeTab === 'hse' && (
          <HSEIncidents
            incidents={incidents}
            selectedProjectId={selectedProjectId}
            onRefresh={refreshIncidents}
          />
        )}

        {activeTab === 'risk' && (
          <RiskRegister risks={risks} onRefresh={refreshRisks} />
        )}
      </div>
    </div>
  );
};

export default Compliance;