'use client';

import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import {
  Activity,
  Search,
  Filter,
  Eye,
  Check,
  X,
  AlertTriangle,
  Clock,
  CheckCircle,
  XCircle,
  Link as LinkIcon,
  RefreshCw,
  Cpu,
  TrendingUp
} from 'lucide-react';
import ProtectedRoute from '../../protected-route';
import SidebarLayout from '../../components/sidebar-layout';
import { useTranslations } from '../../hooks/useTranslations';

interface DeviceResult {
  _id: string;
  resultNumber: string;
  deviceCode: string;
  deviceName: string;
  sampleId: string;
  matchedTestNumber: string | null;
  matchStatus: string;
  matchConfidence: number;
  status: string;
  receivedAt: string;
  hasCriticalValues: boolean;
  requiresAttention: boolean;
  results: {
    parameterCode: string;
    parameterName: string;
    value: string;
    unit: string;
    flag: string;
  }[];
}

export default function IncomingResultsPage() {
  const { t, translationsLoaded } = useTranslations();
  const [results, setResults] = useState<DeviceResult[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState('pending');
  const [matchFilter, setMatchFilter] = useState('all');
  const [criticalFilter, setCriticalFilter] = useState(false);
  const [stats, setStats] = useState({
    totalToday: 0,
    pending: 0,
    critical: 0,
    matched: 0,
    unmatched: 0,
  });
  const [lastRefresh, setLastRefresh] = useState(new Date());
  const [autoRefresh, setAutoRefresh] = useState(true);

  const fetchResults = useCallback(async () => {
    try {
      const params = new URLSearchParams();
      if (statusFilter !== 'all') params.append('status', statusFilter);
      if (matchFilter !== 'all') params.append('matchStatus', matchFilter);
      if (criticalFilter) params.append('hasCritical', 'true');
      if (searchTerm) params.append('search', searchTerm);

      const response = await fetch(`/api/lab/device-results?${params.toString()}`);
      if (response.ok) {
        const data = await response.json();
        setResults(data.results || []);
        setStats(data.stats || {
          totalToday: 0,
          pending: 0,
          critical: 0,
          matched: 0,
          unmatched: 0,
        });
        setLastRefresh(new Date());
      }
    } catch (error) {
      console.error('Error fetching results:', error);
    } finally {
      setLoading(false);
    }
  }, [statusFilter, matchFilter, criticalFilter, searchTerm]);

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

  // Auto-refresh every 10 seconds
  useEffect(() => {
    if (!autoRefresh) return;
    
    const interval = setInterval(() => {
      fetchResults();
    }, 10000);

    return () => clearInterval(interval);
  }, [autoRefresh, fetchResults]);

  const handleSearch = () => {
    setLoading(true);
    fetchResults();
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      handleSearch();
    }
  };

  const handleQuickApprove = async (resultId: string) => {
    try {
      const response = await fetch(`/api/lab/device-results/${resultId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'approve' }),
      });

      if (response.ok) {
        fetchResults();
      } else {
        const error = await response.json();
        alert(error.error || 'Failed to approve result');
      }
    } catch (error) {
      console.error('Error approving result:', error);
    }
  };

  const handleQuickReject = async (resultId: string) => {
    if (!confirm('Are you sure you want to reject this result?')) return;
    
    try {
      const response = await fetch(`/api/lab/device-results/${resultId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'reject', rejectionReason: 'Quick reject' }),
      });

      if (response.ok) {
        fetchResults();
      }
    } catch (error) {
      console.error('Error rejecting result:', error);
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'pending':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
            <Clock className="h-3 w-3" />
            Pending
          </span>
        );
      case 'approved':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
            <Check className="h-3 w-3" />
            Approved
          </span>
        );
      case 'applied':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
            <CheckCircle className="h-3 w-3" />
            Applied
          </span>
        );
      case 'rejected':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
            <XCircle className="h-3 w-3" />
            Rejected
          </span>
        );
      default:
        return null;
    }
  };

  const getMatchBadge = (matchStatus: string, confidence: number) => {
    switch (matchStatus) {
      case 'matched':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
            <LinkIcon className="h-3 w-3" />
            Matched
          </span>
        );
      case 'multiple':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
            <AlertTriangle className="h-3 w-3" />
            Multiple
          </span>
        );
      case 'manual':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
            <Check className="h-3 w-3" />
            Manual
          </span>
        );
      case 'unmatched':
        return (
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
            <X className="h-3 w-3" />
            Unmatched
          </span>
        );
      default:
        return null;
    }
  };

  const formatTime = (dateStr: string) => {
    const date = new Date(dateStr);
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
  };

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    const today = new Date();
    if (date.toDateString() === today.toDateString()) {
      return 'Today';
    }
    const yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    if (date.toDateString() === yesterday.toDateString()) {
      return 'Yesterday';
    }
    return date.toLocaleDateString();
  };

  if (!translationsLoaded) {
    return (
      <ProtectedRoute>
        <SidebarLayout title="Incoming Results" description="">
          <div className="text-center py-12">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          </div>
        </SidebarLayout>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <SidebarLayout
        title="Incoming Results"
        description="Results received from connected lab devices"
      >
        <div className="space-y-6">
          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                  <TrendingUp className="h-5 w-5 text-blue-600" />
                </div>
                <div>
                  <p className="text-2xl font-bold text-gray-900">{stats.totalToday}</p>
                  <p className="text-sm text-gray-500">Today</p>
                </div>
              </div>
            </div>
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                  <Clock className="h-5 w-5 text-yellow-600" />
                </div>
                <div>
                  <p className="text-2xl font-bold text-gray-900">{stats.pending}</p>
                  <p className="text-sm text-gray-500">Pending Review</p>
                </div>
              </div>
            </div>
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                  <AlertTriangle className="h-5 w-5 text-red-600" />
                </div>
                <div>
                  <p className="text-2xl font-bold text-gray-900">{stats.critical}</p>
                  <p className="text-sm text-gray-500">Critical Values</p>
                </div>
              </div>
            </div>
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                  <LinkIcon className="h-5 w-5 text-green-600" />
                </div>
                <div>
                  <p className="text-2xl font-bold text-gray-900">{stats.matched}</p>
                  <p className="text-sm text-gray-500">Matched</p>
                </div>
              </div>
            </div>
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                  <X className="h-5 w-5 text-orange-600" />
                </div>
                <div>
                  <p className="text-2xl font-bold text-gray-900">{stats.unmatched}</p>
                  <p className="text-sm text-gray-500">Unmatched</p>
                </div>
              </div>
            </div>
          </div>

          {/* Actions Bar */}
          <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
            <div className="flex flex-col md:flex-row gap-3 flex-1">
              {/* Search */}
              <div className="relative flex-1 max-w-md">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
                <input
                  type="text"
                  placeholder="Search by result#, sample ID, device..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  onKeyPress={handleKeyPress}
                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                />
              </div>

              {/* Status Filter */}
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="all">All Status</option>
                <option value="pending">Pending</option>
                <option value="approved">Approved</option>
                <option value="applied">Applied</option>
                <option value="rejected">Rejected</option>
              </select>

              {/* Match Filter */}
              <select
                value={matchFilter}
                onChange={(e) => setMatchFilter(e.target.value)}
                className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              >
                <option value="all">All Matches</option>
                <option value="matched">Matched</option>
                <option value="unmatched">Unmatched</option>
                <option value="multiple">Multiple Matches</option>
              </select>

              {/* Critical Filter */}
              <label className="flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
                <input
                  type="checkbox"
                  checked={criticalFilter}
                  onChange={(e) => setCriticalFilter(e.target.checked)}
                  className="h-4 w-4 text-red-600 border-gray-300 rounded focus:ring-red-500"
                />
                <span className="text-sm text-gray-700">Critical Only</span>
              </label>
            </div>

            <div className="flex items-center gap-3">
              {/* Auto Refresh Toggle */}
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  checked={autoRefresh}
                  onChange={(e) => setAutoRefresh(e.target.checked)}
                  className="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                />
                <span className="text-sm text-gray-700">Auto-refresh</span>
              </label>
              
              {/* Manual Refresh */}
              <button
                onClick={() => {
                  setLoading(true);
                  fetchResults();
                }}
                className="inline-flex items-center gap-2 px-3 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
              >
                <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
                <span className="text-sm">Refresh</span>
              </button>
            </div>
          </div>

          {/* Last Refresh Time */}
          <p className="text-sm text-gray-500">
            Last updated: {formatTime(lastRefresh.toISOString())}
            {autoRefresh && ' (auto-refreshing every 10s)'}
          </p>

          {/* Results List */}
          <div className="bg-white rounded-lg shadow-sm border border-gray-200">
            {loading && results.length === 0 ? (
              <div className="text-center py-12">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
                <p className="mt-4 text-gray-600">Loading results...</p>
              </div>
            ) : results.length === 0 ? (
              <div className="text-center py-12">
                <Activity className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">No Results Found</h3>
                <p className="text-gray-600">
                  {statusFilter === 'pending' 
                    ? 'No pending results waiting for review.'
                    : 'No results match your filters.'}
                </p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full">
                  <thead className="bg-gray-50 border-b border-gray-200">
                    <tr>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Result / Sample
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Device
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Matched Test
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Results
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Time
                      </th>
                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {results.map((result) => (
                      <tr key={result._id} className={`hover:bg-gray-50 ${result.hasCriticalValues ? 'bg-red-50' : ''}`}>
                        <td className="px-6 py-4">
                          <div>
                            <p className="font-medium text-gray-900">{result.resultNumber}</p>
                            <p className="text-sm text-gray-500">Sample: {result.sampleId}</p>
                            {result.hasCriticalValues && (
                              <span className="inline-flex items-center gap-1 mt-1 px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                <AlertTriangle className="h-3 w-3" />
                                Critical
                              </span>
                            )}
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          <div className="flex items-center gap-2">
                            <Cpu className="h-4 w-4 text-gray-400" />
                            <div>
                              <p className="text-sm font-medium text-gray-900">{result.deviceCode}</p>
                              <p className="text-xs text-gray-500">{result.deviceName}</p>
                            </div>
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          <div>
                            {getMatchBadge(result.matchStatus, result.matchConfidence)}
                            {result.matchedTestNumber && (
                              <p className="text-sm text-gray-900 mt-1">{result.matchedTestNumber}</p>
                            )}
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          {getStatusBadge(result.status)}
                        </td>
                        <td className="px-6 py-4">
                          <div className="text-sm">
                            <p className="text-gray-900">{result.results.length} parameters</p>
                            <div className="flex gap-1 mt-1">
                              {result.results.slice(0, 3).map((r, idx) => (
                                <span
                                  key={idx}
                                  className={`inline-block px-1.5 py-0.5 rounded text-xs ${
                                    r.flag === 'critical-low' || r.flag === 'critical-high'
                                      ? 'bg-red-100 text-red-800'
                                      : r.flag === 'low' || r.flag === 'high'
                                      ? 'bg-yellow-100 text-yellow-800'
                                      : 'bg-gray-100 text-gray-600'
                                  }`}
                                >
                                  {r.parameterCode}
                                </span>
                              ))}
                              {result.results.length > 3 && (
                                <span className="text-xs text-gray-400">+{result.results.length - 3}</span>
                              )}
                            </div>
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          <div className="text-sm">
                            <p className="text-gray-900">{formatTime(result.receivedAt)}</p>
                            <p className="text-gray-500">{formatDate(result.receivedAt)}</p>
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          <div className="flex items-center gap-2">
                            <Link
                              href={`/lab/incoming/${result._id}`}
                              className="p-1.5 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded"
                              title="View Details"
                            >
                              <Eye className="h-4 w-4" />
                            </Link>
                            {result.status === 'pending' && result.matchStatus === 'matched' && (
                              <button
                                onClick={() => handleQuickApprove(result._id)}
                                className="p-1.5 text-gray-500 hover:text-green-600 hover:bg-green-50 rounded"
                                title="Quick Approve"
                              >
                                <Check className="h-4 w-4" />
                              </button>
                            )}
                            {result.status === 'pending' && (
                              <button
                                onClick={() => handleQuickReject(result._id)}
                                className="p-1.5 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded"
                                title="Reject"
                              >
                                <X className="h-4 w-4" />
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>
      </SidebarLayout>
    </ProtectedRoute>
  );
}