'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import SidebarLayout from '../../components/sidebar-layout';
import { useTranslations } from '../../hooks/useTranslations';
import { Scan, Search, Plus, Filter, Eye, Calendar, User } from 'lucide-react';

interface OCTScan {
  _id: string;
  patientId: {
    _id: string;
    name: string;
    patientId: string;
  };
  eye: string;
  scanType: string;
  scanDate: string;
  quality: string;
  findings: {
    centralMacularThickness: number;
    rnflThickness: number;
  };
  interpretation: string;
}

export default function OCTScansPage() {
  const { t } = useTranslations();
  const [scans, setScans] = useState<OCTScan[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [scanTypeFilter, setScanTypeFilter] = useState('all');

  useEffect(() => {
    fetchScans();
  }, [scanTypeFilter]);

  const fetchScans = async () => {
    try {
      setIsLoading(true);
      const params = new URLSearchParams();
      if (scanTypeFilter !== 'all') params.append('scanType', scanTypeFilter);
      
      const response = await fetch(`/api/imaging/oct?${params}`);
      if (response.ok) {
        const data = await response.json();
        setScans(data.scans || []);
      }
    } catch (error) {
      console.error('Error fetching OCT scans:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const getQualityBadge = (quality: string) => {
    const colors: Record<string, string> = {
      excellent: 'bg-green-100 text-green-700',
      good: 'bg-blue-100 text-blue-700',
      fair: 'bg-yellow-100 text-yellow-700',
      poor: 'bg-red-100 text-red-700'
    };
    return <span className={`px-2 py-1 text-xs font-medium rounded-full ${colors[quality] || 'bg-gray-100 text-gray-700'}`}>{quality}</span>;
  };

  const filteredScans = scans.filter(scan =>
    scan.patientId?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
    scan.patientId?.patientId?.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <SidebarLayout title={t('ocularImaging.oct')} description={t('ocularImaging.octDescription')}>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row justify-between gap-4">
          <div className="flex items-center gap-4 flex-1">
            <div className="relative flex-1 max-w-md">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              <input
                type="text"
                placeholder={t('ocularImaging.searchPlaceholder')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
              />
            </div>
            <select
              value={scanTypeFilter}
              onChange={(e) => setScanTypeFilter(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500"
            >
              <option value="all">{t('ocularImaging.allTypes')}</option>
              <option value="macula">{t('ocularImaging.macula')}</option>
              <option value="rnfl">{t('ocularImaging.rnfl')}</option>
              <option value="optic_nerve">{t('ocularImaging.opticNerve')}</option>
              <option value="anterior_segment">{t('ocularImaging.anteriorSegment')}</option>
            </select>
          </div>
          <Link
            href="/imaging/oct/new"
            className="inline-flex items-center gap-2 px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700"
          >
            <Plus className="h-4 w-4" />
            {t('ocularImaging.newScan')}
          </Link>
        </div>

        {/* Stats */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">{t('ocularImaging.totalScans')}</p>
                <p className="text-2xl font-bold text-gray-900">{scans.length}</p>
              </div>
              <Scan className="h-8 w-8 text-teal-600" />
            </div>
          </div>
          <div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">{t('ocularImaging.maculaScans')}</p>
                <p className="text-2xl font-bold text-blue-600">
                  {scans.filter(s => s.scanType === 'macula').length}
                </p>
              </div>
              <Eye className="h-8 w-8 text-blue-600" />
            </div>
          </div>
          <div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">{t('ocularImaging.rnflScans')}</p>
                <p className="text-2xl font-bold text-purple-600">
                  {scans.filter(s => s.scanType === 'rnfl').length}
                </p>
              </div>
              <Scan className="h-8 w-8 text-purple-600" />
            </div>
          </div>
          <div className="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-500">{t('ocularImaging.today')}</p>
                <p className="text-2xl font-bold text-green-600">
                  {scans.filter(s => new Date(s.scanDate).toDateString() === new Date().toDateString()).length}
                </p>
              </div>
              <Calendar className="h-8 w-8 text-green-600" />
            </div>
          </div>
        </div>

        {/* Scans Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {isLoading ? (
            Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 animate-pulse">
                <div className="h-32 bg-gray-200 rounded-lg mb-4"></div>
                <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                <div className="h-3 bg-gray-200 rounded w-1/2"></div>
              </div>
            ))
          ) : filteredScans.length === 0 ? (
            <div className="col-span-full bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center">
              <Scan className="h-12 w-12 mx-auto mb-4 text-gray-300" />
              <p className="text-gray-500 mb-4">{t('ocularImaging.noOctScans')}</p>
              <Link href="/imaging/oct/new" className="text-teal-600 hover:text-teal-700">
                {t('ocularImaging.recordFirstScan')}
              </Link>
            </div>
          ) : (
            filteredScans.map((scan) => (
              <Link
                key={scan._id}
                href={`/imaging/oct/${scan._id}`}
                className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow"
              >
                <div className="h-32 bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center">
                  <Scan className="h-16 w-16 text-gray-600" />
                </div>
                <div className="p-4">
                  <div className="flex items-start justify-between mb-2">
                    <div>
                      <p className="font-medium text-gray-900">{scan.patientId?.name}</p>
                      <p className="text-sm text-gray-500">{scan.patientId?.patientId}</p>
                    </div>
                    <span className="text-sm font-medium text-teal-600">{scan.eye}</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500 capitalize">{scan.scanType?.replace('_', ' ')}</span>
                    {getQualityBadge(scan.quality)}
                  </div>
                  {scan.findings?.centralMacularThickness && (
                    <div className="mt-2 text-sm text-gray-600">
                      CMT: {scan.findings.centralMacularThickness} µm
                    </div>
                  )}
                  <p className="text-xs text-gray-400 mt-2">
                    {new Date(scan.scanDate).toLocaleDateString()}
                  </p>
                </div>
              </Link>
            ))
          )}
        </div>
      </div>
    </SidebarLayout>
  );
}