import React from 'react';
import { HeartHandshake, LogOut, DollarSign, Package, ArrowRight, HeartPulse } from 'lucide-react';
import { useAppContext } from '../context/AppContext';

interface DonorViewProps {
  onLogout: () => void;
}

export default function DonorView({ onLogout }: DonorViewProps) {
  const { dogs } = useAppContext();
  
  // Only show dogs that have been conditionally accepted and need funding/resources
  const cases = dogs.filter(d => d.placementStatus === 'conditional');

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
      <header className="bg-rose-700 text-white shadow-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <HeartHandshake className="w-8 h-8 text-rose-300" />
            <div>
              <h1 className="text-xl font-bold tracking-tight">Rescue-to-Rehab Engine</h1>
              <p className="text-rose-200 text-xs uppercase tracking-wider font-semibold">Donator Portal</p>
            </div>
          </div>
          <button onClick={onLogout} className="flex items-center text-rose-200 hover:text-white text-sm font-medium transition-colors">
            <LogOut className="w-4 h-4 mr-2" /> Sign Out
          </button>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <h2 className="text-2xl font-bold text-slate-900">Critical Cases Awaiting Placement</h2>
          <p className="text-slate-600 mt-1">These dogs have been approved by specialized centers but require funding or resources to secure their spot.</p>
        </div>

        {cases.length === 0 ? (
          <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-12 text-center">
            <p className="text-slate-500">There are currently no dogs awaiting conditional placement funding.</p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {cases.map(c => {
              const goal = c.fundingGoal || 0;
              const raised = c.fundingRaised || 0;
              const percent = goal > 0 ? Math.round((raised / goal) * 100) : 100;
              
              return (
                <div key={c.id} className="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
                  <div className="p-6 flex-grow">
                    <div className="flex justify-between items-start mb-4">
                      <div>
                        <h3 className="text-xl font-bold text-slate-900">{c.name}</h3>
                        <p className="text-sm text-slate-500">{c.breed} • {c.age}</p>
                      </div>
                      <span className="bg-rose-100 text-rose-800 text-xs font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
                        Urgent
                      </span>
                    </div>
                    
                    <div className="bg-rose-50 rounded-xl p-4 mb-6 border border-rose-100">
                      <p className="text-rose-900 text-sm italic leading-relaxed">
                        "{c.donorPitch || c.centerDescription || 'This dog needs your help to secure a spot at a specialized center.'}"
                      </p>
                    </div>

                    <div className="space-y-4">
                      {goal > 0 && (
                        <div>
                          <div className="flex justify-between text-sm font-medium mb-1">
                            <span className="text-slate-700">Funding Goal</span>
                            <span className="text-slate-900">${raised} / ${goal}</span>
                          </div>
                          <div className="w-full bg-slate-100 rounded-full h-2.5">
                            <div className="bg-rose-500 h-2.5 rounded-full" style={{ width: `${percent}%` }}></div>
                          </div>
                        </div>
                      )}

                      {c.resourcesNeeded && c.resourcesNeeded.length > 0 && (
                        <div className="flex items-start text-sm text-slate-700">
                          <Package className="w-4 h-4 mr-2 text-slate-400 mt-0.5" />
                          <div>
                            <span className="font-medium">Resources Needed:</span>
                            <span className="ml-1 text-slate-600">{c.resourcesNeeded.join(', ')}</span>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                  
                  <div className="bg-slate-50 px-6 py-4 border-t border-slate-100 flex justify-between items-center">
                    <span className="text-xs text-slate-500 font-medium uppercase tracking-wider">Matched: {c.placedCenterName}</span>
                    <button className="bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-lg text-sm font-bold transition-colors flex items-center">
                      Fund Case <ArrowRight className="w-4 h-4 ml-1" />
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </main>
    </div>
  );
}