import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Head from 'next/head';
import { CropBatch, GrowingRecipe, VerticalFarm } from '../../../lib/vertical-farming/types';
import BatchProgress from '../../../components/vertical-farm/BatchProgress';
import GrowthStageIndicator from '../../../components/vertical-farm/GrowthStageIndicator';

export default function BatchManagement() {
  const router = useRouter();
  const { farmId } = router.query;
  const [farm, setFarm] = useState<VerticalFarm | null>(null);
  const [batches, setBatches] = useState<CropBatch[]>([]);
  const [recipes, setRecipes] = useState<Map<string, GrowingRecipe>>(new Map());
  const [selectedBatch, setSelectedBatch] = useState<CropBatch | null>(null);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<'all' | 'active' | 'completed'>('active');

  useEffect(() => {
    if (farmId) {
      fetchData();
    }
  }, [farmId]);

  const fetchData = async () => {
    try {
      const [farmRes, batchesRes, recipesRes] = await Promise.all([
        fetch(`/api/vertical-farm/${farmId}`),
        fetch(`/api/vertical-farm/${farmId}/batches`),
        fetch('/api/vertical-farm/recipes'),
      ]);

      const farmData = await farmRes.json();
      const batchesData = await batchesRes.json();
      const recipesData = await recipesRes.json();

      if (farmData.success) setFarm(farmData.farm);
      if (batchesData.success) setBatches(batchesData.batches);
      if (recipesData.success) {
        const recipeMap = new Map<string, GrowingRecipe>();
        recipesData.recipes.forEach((r: GrowingRecipe) => recipeMap.set(r.id, r));
        setRecipes(recipeMap);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  };

  const filteredBatches = batches.filter(batch => {
    if (filter === 'active') {
      return batch.status !== 'completed' && batch.status !== 'failed';
    }
    if (filter === 'completed') {
      return batch.status === 'completed' || batch.status === 'failed';
    }
    return true;
  });

  const handleHarvest = async (batch: CropBatch) => {
    const yieldKg = prompt('Enter actual yield in kg:', batch.expectedYieldKg.toString());
    if (!yieldKg) return;

    const grade = prompt('Enter quality grade (A, B, C):', 'A');
    if (!grade) return;

    try {
      const response = await fetch(`/api/vertical-farm/batch/${batch.id}/harvest`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          actualYieldKg: parseFloat(yieldKg),
          qualityGrade: grade,
        }),
      });

      const data = await response.json();
      if (data.success) {
        fetchData();
        setSelectedBatch(null);
      }
    } catch (error) {
      console.error('Error completing harvest:', error);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600" />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-green-50 to-emerald-100">
      <Head>
        <title>Crop Batches - {farm?.name || 'Vertical Farm'}</title>
      </Head>

      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <Link href={`/vertical-farm/${farmId}`}>
                <a className="text-gray-600 hover:text-gray-900">&larr; Back</a>
              </Link>
              <h1 className="text-2xl font-bold text-gray-900">Crop Batches</h1>
            </div>
            <Link href={`/vertical-farm/${farmId}/zones`}>
              <a className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                Start New Batch
              </a>
            </Link>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
        {/* Filter Tabs */}
        <div className="flex gap-4 mb-6">
          {(['active', 'completed', 'all'] as const).map(f => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`px-4 py-2 rounded-lg font-medium transition ${
                filter === f
                  ? 'bg-green-600 text-white'
                  : 'bg-white text-gray-700 hover:bg-gray-100'
              }`}
            >
              {f.charAt(0).toUpperCase() + f.slice(1)}
              {f === 'active' && (
                <span className="ml-2 px-2 py-0.5 bg-white bg-opacity-20 rounded-full text-sm">
                  {batches.filter(b => b.status !== 'completed' && b.status !== 'failed').length}
                </span>
              )}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Batch List */}
          <div className="lg:col-span-2 space-y-4">
            {filteredBatches.length === 0 ? (
              <div className="bg-white rounded-lg shadow p-8 text-center">
                <p className="text-gray-600 mb-4">No {filter} batches found</p>
                <Link href={`/vertical-farm/${farmId}/zones`}>
                  <a className="text-green-600 hover:text-green-700">Start a new batch &rarr;</a>
                </Link>
              </div>
            ) : (
              filteredBatches.map(batch => (
                <div
                  key={batch.id}
                  onClick={() => setSelectedBatch(batch)}
                  className={`cursor-pointer transition ${
                    selectedBatch?.id === batch.id ? 'ring-2 ring-green-500' : ''
                  }`}
                >
                  <BatchProgress
                    batch={batch}
                    recipe={recipes.get(batch.recipeId)}
                    showDetails={selectedBatch?.id !== batch.id}
                  />
                </div>
              ))
            )}
          </div>

          {/* Batch Detail */}
          <div className="space-y-6">
            {selectedBatch ? (
              <>
                <div className="bg-white rounded-lg shadow-lg p-6">
                  <h2 className="text-xl font-bold text-gray-900 mb-4">
                    {selectedBatch.cropType}
                    {selectedBatch.variety && ` - ${selectedBatch.variety}`}
                  </h2>

                  <div className="space-y-4 text-sm">
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <p className="text-gray-600">Batch ID</p>
                        <p className="font-mono text-xs">{selectedBatch.id}</p>
                      </div>
                      <div>
                        <p className="text-gray-600">Status</p>
                        <p className="font-semibold capitalize">{selectedBatch.status}</p>
                      </div>
                      <div>
                        <p className="text-gray-600">Planted</p>
                        <p className="font-medium">
                          {new Date(selectedBatch.plantingDate).toLocaleDateString()}
                        </p>
                      </div>
                      <div>
                        <p className="text-gray-600">Expected Harvest</p>
                        <p className="font-medium">
                          {new Date(selectedBatch.expectedHarvestDate).toLocaleDateString()}
                        </p>
                      </div>
                      <div>
                        <p className="text-gray-600">Plant Count</p>
                        <p className="font-medium">{selectedBatch.plantCount.toLocaleString()}</p>
                      </div>
                      <div>
                        <p className="text-gray-600">Health Score</p>
                        <p
                          className={`font-bold ${
                            selectedBatch.healthScore >= 80
                              ? 'text-green-600'
                              : selectedBatch.healthScore >= 60
                              ? 'text-yellow-600'
                              : 'text-red-600'
                          }`}
                        >
                          {selectedBatch.healthScore}%
                        </p>
                      </div>
                    </div>

                    {selectedBatch.actualHarvestDate && (
                      <div className="pt-4 border-t">
                        <h4 className="font-medium text-gray-900 mb-2">Harvest Results</h4>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <p className="text-gray-600">Actual Yield</p>
                            <p className="font-bold text-green-600">
                              {selectedBatch.actualYieldKg?.toFixed(1)} kg
                            </p>
                          </div>
                          <div>
                            <p className="text-gray-600">Quality Grade</p>
                            <p className="font-bold">{selectedBatch.qualityGrade}</p>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                </div>

                {/* Growth Stage Progress */}
                {recipes.get(selectedBatch.recipeId) && (
                  <div className="bg-white rounded-lg shadow-lg p-6">
                    <h3 className="font-semibold text-gray-900 mb-4">Growth Progress</h3>
                    <GrowthStageIndicator
                      stages={recipes.get(selectedBatch.recipeId)!.stages}
                      currentStage={selectedBatch.currentStage}
                      currentDay={selectedBatch.currentDay}
                    />
                  </div>
                )}

                {/* Issues */}
                {selectedBatch.issues.length > 0 && (
                  <div className="bg-white rounded-lg shadow-lg p-6">
                    <h3 className="font-semibold text-gray-900 mb-4">
                      Issues ({selectedBatch.issues.filter(i => !i.resolvedAt).length} active)
                    </h3>
                    <div className="space-y-2">
                      {selectedBatch.issues.map(issue => (
                        <div
                          key={issue.id}
                          className={`p-3 rounded-lg ${
                            issue.resolvedAt ? 'bg-gray-100' : 'bg-red-50'
                          }`}
                        >
                          <div className="flex justify-between">
                            <span className="font-medium capitalize">{issue.type}</span>
                            <span
                              className={`text-xs font-semibold ${
                                issue.severity === 'critical'
                                  ? 'text-red-600'
                                  : issue.severity === 'severe'
                                  ? 'text-orange-600'
                                  : 'text-yellow-600'
                              }`}
                            >
                              {issue.severity}
                            </span>
                          </div>
                          <p className="text-sm text-gray-600">{issue.description}</p>
                          {issue.resolvedAt && (
                            <p className="text-xs text-green-600 mt-1">
                              Resolved: {issue.resolution}
                            </p>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Actions */}
                <div className="bg-white rounded-lg shadow-lg p-6">
                  <h3 className="font-semibold text-gray-900 mb-4">Actions</h3>
                  <div className="space-y-2">
                    {selectedBatch.status === 'ready' && (
                      <button
                        onClick={() => handleHarvest(selectedBatch)}
                        className="w-full px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
                      >
                        Complete Harvest
                      </button>
                    )}
                    <button className="w-full px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200">
                      Report Issue
                    </button>
                    <button className="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">
                      View Environment Log
                    </button>
                  </div>
                </div>
              </>
            ) : (
              <div className="bg-white rounded-lg shadow-lg p-6 text-center">
                <p className="text-gray-600">Select a batch to view details</p>
              </div>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}
