import {
  Building2,
  CheckCircle,
  Clock,
  ExternalLink,
  GraduationCap,
  Heart,
  Mail,
  MapPin,
  Phone,
  Users,
} from 'lucide-react';
import type { VocationalOpportunity } from '@/shared/types/vocational';

interface VocationalOpportunityDetailsProps {
  readonly opportunity: VocationalOpportunity;
  readonly saved: boolean;
  readonly onToggleSaved: () => void;
}

function BulletList({ items, color }: { readonly items: readonly string[]; readonly color: string }) {
  return (
    <div className="space-y-1.5">
      {items.map((item) => (
        <div key={item} className="flex items-center gap-2">
          <div className={`w-1.5 h-1.5 rounded-full ${color} flex-shrink-0`} />
          <span className="text-sm text-slate-300">{item}</span>
        </div>
      ))}
    </div>
  );
}

export function VocationalOpportunityDetails({
  opportunity,
  saved,
  onToggleSaved,
}: VocationalOpportunityDetailsProps) {
  return (
    <div className="px-5 pb-5 space-y-4 border-t border-slate-700/40 pt-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-slate-700/30 rounded-xl p-4 space-y-3">
          <h4 className="font-semibold text-sm text-white flex items-center gap-2">
            <Building2 size={14} className="text-sky-400" /> Contact Info
          </h4>
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <MapPin size={14} className="text-slate-500 flex-shrink-0" />
              <span>{opportunity.address}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <Phone size={14} className="text-slate-500 flex-shrink-0" />
              <span>{opportunity.phone}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <Mail size={14} className="text-slate-500 flex-shrink-0" />
              <a href={`mailto:${opportunity.email}`} className="text-sky-400 hover:text-sky-300">{opportunity.email}</a>
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <ExternalLink size={14} className="text-slate-500 flex-shrink-0" />
              <a href={`https://${opportunity.website}`} target="_blank" rel="noopener noreferrer" className="text-sky-400 hover:text-sky-300">{opportunity.website}</a>
            </div>
          </div>
        </div>

        <div className="bg-slate-700/30 rounded-xl p-4">
          <h4 className="font-semibold text-sm text-white flex items-center gap-2 mb-3">
            <GraduationCap size={14} className="text-violet-400" /> Skills Developed
          </h4>
          <div className="mb-4">
            <BulletList items={opportunity.skills} color="bg-violet-400" />
          </div>
          <h4 className="font-semibold text-sm text-white flex items-center gap-2 mb-2">
            <CheckCircle size={14} className="text-emerald-400" /> Requirements
          </h4>
          <BulletList items={opportunity.requirements} color="bg-emerald-400" />
        </div>

        <div className="bg-gradient-to-br from-sky-500/10 to-blue-500/10 rounded-xl p-4 border border-sky-500/20">
          <h4 className="font-semibold text-sm text-white flex items-center gap-2 mb-3">
            <Heart size={14} className="text-sky-400" /> Accommodations Available
          </h4>
          <div className="space-y-2">
            {opportunity.accommodations.map((accommodation) => (
              <div key={accommodation} className="flex items-start gap-2">
                <CheckCircle size={12} className="text-sky-400 mt-0.5 flex-shrink-0" />
                <span className="text-sm text-slate-300">{accommodation}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pt-2">
        <div className="flex items-center gap-3 flex-wrap">
          <span className="text-xs text-slate-500 flex items-center gap-1">
            <Users size={12} /> {opportunity.spots} spot{opportunity.spots !== 1 ? 's' : ''} available
          </span>
          <span className="text-xs text-slate-500">Ages: {opportunity.ageGroup}</span>
          <span className="text-xs text-slate-500 flex items-center gap-1">
            <Clock size={12} /> {opportunity.schedule}
          </span>
        </div>
        <div className="flex items-center gap-2">
          <button type="button" className="px-4 py-2 bg-gradient-to-r from-sky-500 to-blue-600 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-sky-500/25 transition-all">
            Apply Now
          </button>
          <button
            type="button"
            onClick={onToggleSaved}
            className={`px-4 py-2 rounded-xl text-sm font-medium border transition-all ${
              saved
                ? 'bg-amber-500/15 text-amber-400 border-amber-500/30'
                : 'bg-slate-700/50 text-slate-300 border-slate-600/50 hover:border-amber-500/30'
            }`}
          >
            {saved ? 'Saved' : 'Save'}
          </button>
        </div>
      </div>
    </div>
  );
}
