import React from 'react';
import { MOCK_ORGS } from '../constants';
import { Organization } from '../types';
import { Icons } from '../components/IconSet';

interface CitiesProps {
  onSelectCity: (id: string) => void;
}

const CityCard = ({ city, onClick }: { city: Organization; onClick: () => void }) => (
  <div 
    onClick={onClick}
    className="group relative h-64 rounded-2xl overflow-hidden cursor-pointer border border-border hover:border-accentInfo/50 transition-all duration-300 shadow-card"
  >
    {/* Background Image */}
    <div className="absolute inset-0">
      <img 
        src={city.bannerUrl || 'https://via.placeholder.com/800x400'} 
        alt={city.name}
        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
    </div>

    {/* Content */}
    <div className="absolute inset-0 p-6 flex flex-col justify-end">
      <div className="flex justify-between items-end">
        <div>
          <div className="text-xs font-bold text-accentInfo mb-1 uppercase tracking-widest">{city.establishedYear || 'Unbekannte Ära'}</div>
          <h2 className="text-3xl font-bold text-white mb-2 group-hover:translate-x-1 transition-transform">{city.name}</h2>
          <p className="text-sm text-gray-300 line-clamp-2 max-w-sm">
            {city.description}
          </p>
        </div>
        
        <div className="flex flex-col items-end gap-2">
           <div className="flex items-center gap-2 px-3 py-1 bg-black/40 backdrop-blur rounded-full border border-white/10">
              <Icons.Users className="w-4 h-4 text-textMuted" />
              <span className="text-sm font-medium text-white">{city.memberCount} Bürger</span>
           </div>
           <div className="px-3 py-1 bg-accentInfo/20 backdrop-blur rounded-full border border-accentInfo/30 text-xs font-bold text-accentInfo uppercase">
              {city.status}
           </div>
        </div>
      </div>
    </div>
  </div>
);

const Cities: React.FC<CitiesProps> = ({ onSelectCity }) => {
  const cities = MOCK_ORGS.filter(org => org.type === 'City');

  return (
    <div className="animate-in fade-in slide-in-from-bottom-2 space-y-8">
      <div>
         <h1 className="text-3xl font-bold mb-1">Große Siedlungen</h1>
         <p className="text-textMuted">Entdecke die blühenden Zentren der Zivilisation im Obsidian-Tal.</p>
      </div>

      <div className="grid grid-cols-1 gap-6">
        {cities.map(city => (
          <CityCard key={city.id} city={city} onClick={() => onSelectCity(city.id)} />
        ))}
      </div>

      {cities.length === 0 && (
         <div className="text-center py-20 text-textMuted">
            <p>Noch keine Städte gegründet.</p>
         </div>
      )}
    </div>
  );
};

export default Cities;