import React, { useEffect, useMemo, useState } from 'react';
import { mowingAPI } from '../../services/api';
import { PlayIcon, ArchiveBoxIcon, EyeIcon, MapPinIcon, WrenchScrewdriverIcon } from '@heroicons/react/24/outline';
import LoadingSpinner from '../../components/UI/LoadingSpinner';
import MowingPlanModal from '../../components/Mowing/MowingPlanModal';
import MowingExecutionModal from '../../components/Mowing/MowingExecutionModal';
import MowingSessionViewModal from '../../components/Mowing/MowingSessionViewModal';
import toast from 'react-hot-toast';

const Mowing = () => {
  const [plans, setPlans] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showPlanModal, setShowPlanModal] = useState(false);
  const [execPlan, setExecPlan] = useState(null);
  const [viewSession, setViewSession] = useState(null);
  const [sessions, setSessions] = useState([]);

  const fetchPlans = async () => {
    try {
      setLoading(true);
      const r = await mowingAPI.getPlans();
      setPlans(r.data.data.plans || []);
      // load recent sessions (not rendered as a list; used for View button)
      try {
        const s = await mowingAPI.getLogs();
        setSessions(s.data?.data?.logs || []);
      } catch {}
    } catch (e) {
      toast.error('Failed to load mowing plans');
    } finally {
      setLoading(false);
    }
  };

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

  const filteredPlans = useMemo(() => {
    // Show all except archived by default, most recent first
    const list = (plans || []).filter(p => p.status !== 'archived');
    return list.sort((a,b)=> new Date(b.planned_date) - new Date(a.planned_date));
  }, [plans]);

  if (loading) return (<div className="p-6"><LoadingSpinner /></div>);

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Mowing</h1>
        <button className="btn-primary" onClick={()=> setShowPlanModal(true)}>New Plan</button>
      </div>

      <div className="space-y-4">
        {filteredPlans.length === 0 ? (
          <div className="bg-white rounded-lg shadow p-4 text-gray-600">No mowing plans yet.</div>
        ) : filteredPlans.map((p) => (
          <div key={p.id} className="card">
            <div className="flex justify-between items-start">
              <div className="flex-1">
                <div className="flex items-center gap-3 mb-2">
                  <h3 className="font-semibold text-gray-900">{p.property_name}</h3>
                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                    p.status==='planned'? 'bg-blue-100 text-blue-800' :
                    p.status==='completed'? 'bg-green-100 text-green-800' :
                    p.status==='in_progress'? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800'
                  }`}>{p.status}</span>
                </div>
                <p className="text-sm text-gray-600 mb-1">
                  <MapPinIcon className="h-4 w-4 inline mr-1" />
                  Areas: {p.section_names} ({Math.round(p.total_area || 0).toLocaleString()} sq ft)
                </p>
                <p className="text-sm text-gray-600 mb-1">
                  <WrenchScrewdriverIcon className="h-4 w-4 inline mr-1" />
                  {p.equipment_name || '—'} • Cut Height: {Number(p.cut_height_inches || 0).toFixed(2)}" • Direction: {p.direction || '—'}
                </p>
                {p.notes && (
                  <p className="text-sm text-gray-500 mt-1 italic">"{p.notes}"</p>
                )}
              </div>
              <div className="text-right">
                <p className="text-sm font-medium text-gray-900">{p.planned_date ? new Date(p.planned_date).toLocaleDateString() : 'No date'}</p>
                <p className="text-xs text-gray-500">Last updated {new Date(p.updated_at || p.created_at).toLocaleDateString()}</p>
                <div className="flex gap-2 mt-2 justify-end">
                  <button
                    className="p-1 text-indigo-600 hover:text-indigo-800 hover:bg-indigo-50 rounded"
                    title="View recent session"
                    onClick={() => {
                      const list = (sessions || []).filter(s => s.property_id === p.property_id);
                      if (!list.length) { toast.error('No sessions yet for this property'); return; }
                      const last = [...list].sort((a,b)=> new Date((b.created_at || b.session_date || 0)) - new Date((a.created_at || a.session_date || 0)))[0];
                      setViewSession(last);
                    }}
                  >
                    <EyeIcon className="h-4 w-4" />
                  </button>
                  {p.status === 'planned' && (
                    <button className="p-1 text-green-600 hover:text-green-800 hover:bg-green-50 rounded" title="Execute" onClick={()=> setExecPlan(p)}>
                      <PlayIcon className="h-4 w-4" />
                    </button>
                  )}
                  {p.status !== 'archived' && (
                    <button className="p-1 text-gray-600 hover:text-gray-800 hover:bg-gray-50 rounded" title="Archive" onClick={async ()=>{ await mowingAPI.updatePlanStatus(p.id, 'archived'); fetchPlans(); }}>
                      <ArchiveBoxIcon className="h-4 w-4" />
                    </button>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      {showPlanModal && (
        <MowingPlanModal onClose={()=> setShowPlanModal(false)} onCreated={fetchPlans} />
      )}
      {execPlan && (
        <MowingExecutionModal plan={execPlan} onClose={()=> setExecPlan(null)} onComplete={fetchPlans} />
      )}

      {/* Recent Sessions section removed as requested */}

      {viewSession && (
        <MowingSessionViewModal session={viewSession} onClose={()=> setViewSession(null)} />
      )}
    </div>
  );
};

export default Mowing;