import React from 'react';
import { Eye, FileText, Calendar, Clock } from 'lucide-react';

const SHIFTS = ['Morning Shift', 'Evening Shift', 'Weekend', 'Full Time'];
const STATES = ['Interested', 'Interview', 'Offer', 'Offer'];

export default function MarketOffers({ profile, jobRecs = [] }) {
  const companies = (jobRecs || []).slice(0, 3).map(r => (r.title || 'Company').split(' ')[0]);
  const availability = (profile.availability || [])[0] || 'Available This Week';
  const offers = (jobRecs || []).slice(0, 4);

  const stats = [
    { icon: Eye, label: 'Companies viewing you', dots: companies.length ? companies : ['Google', 'Bon Appetit', 'Compass'] },
    { icon: FileText, label: 'Applications', value: '2 Pending' },
    { icon: Calendar, label: 'Interviews', value: 'Tomorrow 9AM' },
    { icon: Clock, label: 'Availability', value: availability },
  ];

  return (
    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6">
      <h2 className="text-[15px] font-semibold text-[#0F172A]">Your Market & Competing Offers</h2>

      {/* Market stats */}
      <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
        {stats.map((c) => {
          const Icon = c.icon;
          return (
            <div key={c.label} className="rounded-xl border border-[#E5E7EB] p-4">
              <div className="flex items-center gap-2 text-[11px] uppercase tracking-wide text-[#6B7280]">
                <Icon className="w-3.5 h-3.5" /> {c.label}
              </div>
              {c.dots ? (
                <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
                  {c.dots.map((co, i) => (
                    <span key={i} className="inline-flex items-center gap-1.5 text-[13px] font-medium text-[#0F172A]">
                      <span className="w-1.5 h-1.5 rounded-full bg-[#16A34A]" /> {co}
                    </span>
                  ))}
                </div>
              ) : (
                <p className="mt-1 text-[15px] font-semibold text-[#0F172A]">{c.value}</p>
              )}
            </div>
          );
        })}
      </div>

      {/* Competing offers */}
      <div className="mt-5 pt-4 border-t border-[#E5E7EB]">
        <p className="text-[13px] font-semibold text-[#0F172A] mb-3">Companies Competing For You</p>
        {offers.length === 0 ? (
          <p className="text-[13px] text-[#6B7280] py-4">No live offers yet — keep leveling up.</p>
        ) : (
          <div className="space-y-3">
            {offers.map((j, i) => {
              const pay = j.pay_range_min || 31;
              const title = (j.title || 'Opportunity').split(' (')[0];
              const state = STATES[i] || 'Interested';
              const shift = SHIFTS[i % SHIFTS.length];
              return (
                <div key={j.id || i} className="rounded-xl border border-[#E5E7EB] p-4">
                  <div className="flex items-start justify-between">
                    <div>
                      <p className="text-[15px] font-semibold text-[#0F172A]">{title}</p>
                      <div className="mt-1 flex flex-wrap gap-x-3 text-[12px]">
                        <span className="inline-flex items-center gap-1 text-[#0838E0] font-semibold">
                          <span className="w-1.5 h-1.5 rounded-full bg-[#0838E0]" /> {state}
                        </span>
                        <span className="text-[#0F172A] font-medium">${pay}/hr</span>
                        <span className="text-[#6B7280]">{shift}</span>
                      </div>
                    </div>
                    {i === 1 && <span className="text-[11px] text-[#94A3B8]">Tomorrow</span>}
                  </div>
                  <div className="mt-3 flex gap-2">
                    <button className="flex-1 text-[12px] font-semibold text-white bg-[#0838E0] rounded-full py-1.5 hover:bg-[#062BAF] transition-colors">
                      Accept
                    </button>
                    <button className="flex-1 text-[12px] font-semibold text-[#0838E0] border border-[#0838E0] rounded-full py-1.5 hover:bg-[#EEF3FE] transition-colors">
                      Counter
                    </button>
                    <button className="text-[12px] font-semibold text-[#94A3B8] border border-[#E5E7EB] rounded-full px-3 py-1.5 hover:text-[#EF4444] hover:border-[#FECACA] transition-colors">
                      Decline
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
}