// ============================================================
//  OPPORTUNITÉS — Postes / Affaires / Formations
// ============================================================

const Opportunities = () => {
  const { t, opps, role, setPage, openOpp, countries } = useApp();
  const [tab, setTab] = React.useState("jobs");
  const [search, setSearch] = React.useState("");
  const [country, setCountry] = React.useState("");

  const list = opps.filter(o => {
    if (o.kind !== tab) return false;
    if (role === "visitor" && o.status !== "published") return false;
    if (country && o.country !== country) return false;
    if (search) {
      const hay = (o.title + " " + (o.org || "") + " " + (o.organizer || "") + " " + (o.location || "") + " " + (o.sector || "") + " " + (o.desc || "")).toLowerCase();
      if (!hay.includes(search.toLowerCase())) return false;
    }
    return true;
  });

  return (
    <div>
      <Section className="py-8 md:py-10">
        <div className="flex items-end justify-between flex-wrap gap-4">
          <div>
            <div className="flex items-center gap-3 mb-2">
              <div className="liturgy-underline w-12"></div>
              <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-red font-semibold">Le réseau partage</div>
            </div>
            <h1 className="font-display text-4xl md:text-5xl font-semibold text-ajc-blueDk">{t.opps.title}</h1>
            <p className="mt-2 text-ajc-mute text-lg">{t.opps.lead}</p>
          </div>
          {role !== "visitor" && (
            <Btn variant="gold" icon="plus" onClick={() => setPage("opp-add")}>{t.opps.add}</Btn>
          )}
        </div>
      </Section>

      {/* Onglets */}
      <Section className="pb-4">
        <div className="bg-white rounded-2xl border border-ajc-blue/10 p-1.5 inline-flex flex-wrap gap-1">
          {[
            { k: "jobs", icon: "briefcase", label: t.opps.tabs.jobs },
            { k: "biz", icon: "handshake", label: t.opps.tabs.biz },
            { k: "training", icon: "school", label: t.opps.tabs.training }
          ].map(o => (
            <button key={o.k} onClick={() => setTab(o.k)}
              className={"px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition " +
                (tab === o.k ? "bg-ajc-blue text-white" : "text-ajc-mute hover:bg-ajc-blue/5 hover:text-ajc-blue")}>
              <Icon name={o.icon} size={16}/> {o.label}
              <span className={"ml-1 text-[10px] font-bold rounded-full w-5 h-5 inline-flex items-center justify-center " + (tab === o.k ? "bg-white/20 text-white" : "bg-ajc-blue/10 text-ajc-blue")}>
                {opps.filter(x => x.kind === o.k && (role !== "visitor" || x.status === "published")).length}
              </span>
            </button>
          ))}
        </div>
      </Section>

      {/* Filtres */}
      <Section className="pb-4">
        <div className="flex gap-2 flex-wrap">
          <div className="relative flex-1 min-w-[240px]">
            <Icon name="search" size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-ajc-mute"/>
            <input type="search" value={search} onChange={e => setSearch(e.target.value)} placeholder="Rechercher une opportunité…"
              className="w-full pl-10 pr-4 py-2.5 rounded-lg bg-white border border-ajc-blue/15 text-sm focus:border-ajc-blue outline-none"/>
          </div>
          <select value={country} onChange={e => setCountry(e.target.value)}
            className="px-3 py-2.5 rounded-lg border border-ajc-blue/15 bg-white text-sm">
            <option value="">Tous pays</option>
            {countries.map(c => <option key={c.code} value={c.code}>{c.flag} {c.name}</option>)}
          </select>
        </div>
      </Section>

      {/* Liste */}
      <Section className="pb-16">
        {list.length === 0 ? (
          <div className="text-center py-16 text-ajc-mute">Aucune opportunité ne correspond à votre recherche.</div>
        ) : (
          <div className="grid gap-4">
            {list.map(o => <OppCard key={o.id} o={o} onOpen={() => openOpp(o.id)} role={role} t={t}/>)}
          </div>
        )}
      </Section>
    </div>
  );
};

const OppCard = ({ o, onOpen, role, t }) => {
  const tones = {
    jobs:     { icon: "briefcase", color: "blue",  label: "Poste" },
    biz:      { icon: "handshake", color: "gold",  label: "Affaire" },
    training: { icon: "school",    color: "green", label: "Formation" }
  };
  const tone = tones[o.kind];
  const accent = { blue: "border-l-ajc-blue", gold: "border-l-ajc-gold", green: "border-l-ajc-green" };
  const country = AJC.COUNTRIES.find(c => c.code === o.country);
  return (
    <button onClick={onOpen}
      className={"text-left bg-white rounded-2xl border border-ajc-blue/10 border-l-4 " + accent[tone.color] + " p-5 md:p-6 hover:shadow-cardHover transition group"}>
      <div className="flex items-start justify-between gap-4 flex-wrap">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap mb-2">
            <Badge tone={tone.color} icon={tone.icon}>{tone.label}</Badge>
            {o.status === "pending" && <Badge tone="gold">⏳ En attente</Badge>}
            {o.status === "published" && <Badge tone="green">✓ Publiée</Badge>}
            {country && <span className="text-xs text-ajc-mute">{country.flag} {o.location || country.name}</span>}
          </div>
          <h3 className="font-display text-xl md:text-2xl font-semibold text-ajc-blueDk group-hover:text-ajc-blue transition">{o.title}</h3>
          <div className="mt-1 text-sm text-ajc-mute">
            {o.org && <span>{o.org}</span>}
            {o.organizer && <span>{o.organizer}</span>}
            {o.sector && <span> · {o.sector}</span>}
            {o.type && <span> · {o.type}</span>}
          </div>
          <p className="mt-3 text-sm text-ajc-ink/80 line-clamp-2 leading-relaxed">{o.desc}</p>
          <div className="mt-3 flex items-center gap-4 text-xs text-ajc-mute flex-wrap">
            {o.deadline && <span className="flex items-center gap-1"><Icon name="calendar" size={12}/> {t.opps.deadline}: {o.deadline}</span>}
            {o.date && <span className="flex items-center gap-1"><Icon name="calendar" size={12}/> {o.date}</span>}
            {o.cost && <span>💰 {o.cost}</span>}
            {o.postedBy && <span>· Publié par {o.postedBy}</span>}
          </div>
        </div>
        <Icon name="arrowRight" size={20} className="text-ajc-mute group-hover:text-ajc-blue group-hover:translate-x-1 transition"/>
      </div>
    </button>
  );
};

const OpportunityDetail = () => {
  const { t, opps, oppId, setPage } = useApp();
  const o = opps.find(x => x.id === oppId);
  if (!o) return <div className="p-10 text-center text-ajc-mute">Opportunité introuvable.</div>;
  const country = AJC.COUNTRIES.find(c => c.code === o.country);
  const tones = { jobs: { color: "blue", label: "Poste vacant" }, biz: { color: "gold", label: "Opportunité d'affaire" }, training: { color: "green", label: "Formation" } };
  const tone = tones[o.kind];
  const gradients = { blue: "from-ajc-blue to-ajc-blueDk text-white", gold: "from-ajc-gold to-ajc-gold2 text-ajc-blueDk", green: "from-ajc-green to-emerald-700 text-white" };

  return (
    <div>
      <Section className="pt-6 pb-2">
        <button onClick={() => setPage("opps")} className="inline-flex items-center gap-2 text-sm text-ajc-blue hover:text-ajc-blueDk font-medium">
          <Icon name="arrowLeft" size={16}/> Retour aux opportunités
        </button>
      </Section>
      <Section className="pt-2">
        <div className={"rounded-3xl bg-gradient-to-br p-8 md:p-12 " + gradients[tone.color] + " relative overflow-hidden"}>
          <div className="absolute inset-0 cross-watermark opacity-25"></div>
          <div className="relative">
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/15 backdrop-blur rounded-full text-xs font-semibold mb-4">
              {tone.label}
            </div>
            <h1 className="font-display text-4xl md:text-5xl font-semibold leading-tight">{o.title}</h1>
            <div className="mt-3 text-lg opacity-90">{o.org || o.organizer}</div>
            <div className="mt-4 flex items-center gap-4 text-sm opacity-80 flex-wrap">
              {country && <span>{country.flag} {o.location || country.name}</span>}
              {o.contract && <span>· {o.contract}</span>}
              {o.sector && <span>· {o.sector}</span>}
              {o.type && <span>· {o.type}</span>}
              {o.date && <span>· {o.date}</span>}
            </div>
          </div>
        </div>
      </Section>

      <Section className="py-8 grid lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-4">
          <div className="bg-white rounded-2xl border border-ajc-blue/10 p-6 shadow-card">
            <h3 className="font-display text-xl font-semibold text-ajc-blueDk mb-3">Description</h3>
            <p className="text-ajc-ink/80 leading-relaxed">{o.desc}</p>
            {o.profile && (
              <>
                <h3 className="font-display text-xl font-semibold text-ajc-blueDk mt-6 mb-3">Profil recherché</h3>
                <p className="text-ajc-ink/80 leading-relaxed">{o.profile}</p>
              </>
            )}
            {o.audience && (
              <>
                <h3 className="font-display text-xl font-semibold text-ajc-blueDk mt-6 mb-3">Public cible</h3>
                <p className="text-ajc-ink/80 leading-relaxed">{o.audience}</p>
              </>
            )}
          </div>
        </div>

        <div className="space-y-4">
          <div className="bg-white rounded-2xl border border-ajc-blue/10 p-5 shadow-card">
            <div className="space-y-3 text-sm">
              {o.deadline && <DetailRow icon="calendar" label="Date limite" value={o.deadline}/>}
              {o.date && <DetailRow icon="calendar" label="Date" value={o.date}/>}
              {o.cost && <DetailRow icon="award" label="Coût" value={o.cost}/>}
              {o.location && <DetailRow icon="mapPin" label="Lieu" value={o.location}/>}
              {o.postedBy && <DetailRow icon="user" label="Publié par" value={o.postedBy}/>}
            </div>
            <a href={o.link || "mailto:" + (o.contact || "")} className="mt-5 block">
              <Btn variant="primary" icon="arrowRight" className="w-full">{t.opps.apply}</Btn>
            </a>
            {o.contact && <div className="mt-3 text-xs text-center text-ajc-mute">{o.contact}</div>}
          </div>
        </div>
      </Section>
    </div>
  );
};

const DetailRow = ({ icon, label, value }) => (
  <div className="flex items-start gap-3">
    <Icon name={icon} size={16} className="text-ajc-blue mt-0.5"/>
    <div>
      <div className="text-[10px] uppercase tracking-wider font-semibold text-ajc-mute">{label}</div>
      <div className="text-sm font-medium text-ajc-blueDk">{value}</div>
    </div>
  </div>
);

const OpportunityAdd = () => {
  const { t, setPage } = useApp();
  return (
    <Section className="py-12 max-w-2xl mx-auto">
      <h1 className="font-display text-3xl font-semibold text-ajc-blueDk">{t.opps.add}</h1>
      <p className="text-ajc-mute mt-2">Votre opportunité sera publiée après validation par l'administrateur.</p>
      <div className="mt-8 bg-white rounded-2xl border border-ajc-blue/10 p-6 shadow-card space-y-4">
        <FormSelect label="Type d'opportunité" value="" onChange={() => {}} options={[["jobs", "Poste vacant"], ["biz", "Opportunité d'affaire"], ["training", "Formation"]]}/>
        <FormInput label="Titre" value="" onChange={() => {}} placeholder="ex. Chargé de programme santé"/>
        <FormInput label="Organisation / Organisateur" value="" onChange={() => {}}/>
        <FormGrid>
          <FormInput label="Lieu" value="" onChange={() => {}}/>
          <FormInput label="Date limite / Date" value="" onChange={() => {}} type="date"/>
        </FormGrid>
        <FormTextarea label="Description" value="" onChange={() => {}} rows={4}/>
        <FormInput label="Contact / lien de candidature" value="" onChange={() => {}}/>
        <div className="pt-4 border-t border-ajc-blue/10 flex items-center justify-between">
          <button onClick={() => setPage("opps")} className="text-sm text-ajc-mute hover:text-ajc-blue font-medium">Annuler</button>
          <Btn variant="gold" icon="check" onClick={() => { alert("Merci ! Votre proposition a été transmise pour validation."); setPage("opps"); }}>Soumettre pour validation</Btn>
        </div>
      </div>
    </Section>
  );
};

Object.assign(window, { Opportunities, OppCard, OpportunityDetail, OpportunityAdd });