import React from 'react';
import { getPayload } from 'payload';
import configPromise from '@payload-config';
import Link from 'next/link';

export interface JobListingBlockProps {
  title?: string;
  showFairs?: boolean;
}

export const JobListingBlock = async (props: JobListingBlockProps) => {
  const { title, showFairs } = props;
  const payload = await getPayload({ config: configPromise });

  const { docs: jobs } = await payload.find({
    collection: 'jobs',
    limit: 100,
  });

  return (
    <div className="py-12 md:py-24">
      <div className="container max-w-4xl mx-auto">
        {showFairs && (
          <div className="bg-neutral-dark rounded-3xl p-8 md:p-12 mb-16 text-white overflow-hidden relative group">
            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 blur-3xl -translate-y-1/2 translate-x-1/2" />
            <h3 className="font-heading font-bold text-3xl mb-8 relative z-10 flex items-center gap-3">
              <span className="w-8 h-1 bg-primary" />
              Nächste Messetermine 2026
            </h3>
            <ul className="space-y-6 relative z-10">
              {[
                { name: 'Intersolar München', date: '19. - 21. Juni 2026', type: 'Energie-Messe' },
                { name: 'Windenergietage Linstow', date: '04. - 06. November 2026', type: 'Fachkongress' },
                { name: 'Kabelwerkstatt Wiesbaden', date: '02. - 03. Dezember 2026', type: 'Fachmesse' }
              ].map((messe) => (
                <li key={messe.name} className="flex flex-col md:flex-row md:items-center justify-between border-b border-white/10 pb-6 group/item hover:bg-white/5 transition-colors p-4 -m-4 rounded-xl">
                  <div>
                    <span className="text-primary-light font-bold text-sm uppercase tracking-widest block mb-1">{messe.type}</span>
                    <span className="font-heading font-bold text-2xl">{messe.name}</span>
                  </div>
                  <div className="mt-2 md:mt-0 text-right">
                    <span className="text-white/60 font-medium block">{messe.date}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )}

        <div className="mb-12">
          <h2 className="font-heading font-extrabold text-4xl text-neutral-dark mb-8">
            {title || 'Aktuelle Stellenangebote'}
          </h2>
          
          {jobs.length > 0 ? (
            <div className="grid gap-6">
              {jobs.map((job: any) => (
                <Link 
                  key={job.id} 
                  href={`/karriere/${job.slug}`}
                  className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6"
                >
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full uppercase">{job.type}</span>
                      <span className="text-text-secondary text-sm font-medium">{job.department}</span>
                    </div>
                    <h4 className="font-heading font-bold text-2xl text-neutral-dark group-hover:text-primary transition-colors">{job.title}</h4>
                    <p className="text-text-secondary mt-1">{job.location}</p>
                  </div>
                  <div className="flex items-center text-primary font-bold group-hover:translate-x-2 transition-transform">
                    Details ansehen
                    <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            <div className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center">
              <p className="text-text-secondary text-lg">Aktuell sind alle Positionen besetzt. Senden Sie uns gerne eine Initiativbewerbung!</p>
              <Link href="/kontakt" className="inline-block mt-6 text-primary font-bold hover:underline">Jetzt Kontakt aufnehmen</Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};