---
import { getCollection } from "astro:content";
import { Image } from "astro:assets";
import Layout from "../../../layouts/main.astro";
import Link from "../../../components/Link.astro";
import FeaturedRecommendation from "../../../components/code/FeaturedRecommendation.astro";
import ProjectCard from "../../../components/code/ProjectCard.astro";
import SkillBadge from "../../../components/code/SkillBadge.astro";
import logoTiqa from "../../../assets/images/logo-tiqa-blanc.png";
import skillsData from "../../../data/skills.json";

const locale = "ar";

const experiences = (await getCollection("experiences"))
  .filter((e) => e.data.lang === locale && !e.data.draft)
  .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));

const recentExperiences = experiences.slice(0, 4);

const projects = (await getCollection("projects"))
  .filter((p) => p.data.lang === locale && !p.data.draft && p.data.category === "dev" && p.data.featured)
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());

const recommendations = (await getCollection("recommendations"))
  .filter((r) => r.data.featured)
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());

const recommendationTexts = recommendations.map((rec) => ({
  ...rec,
  text: rec.body || '',
}));

const topSkills = skillsData.categories.slice(0, 3);

function formatMonth(dateStr: string) {
  const [year, month] = dateStr.split('-');
  return new Date(parseInt(year), parseInt(month) - 1)
    .toLocaleDateString('ar-SA', { year: 'numeric', month: 'short' });
}
---

<Layout
  title="برمجة - جليل عرفاوي"
  facet="code"
  description="المسار المهني لجليل عرفاوي: مطوّر مستقل متخصص في Software Craftsmanship، TDD، DDD. TypeScript، PHP، Elixir."
>
  <section dir="rtl" lang="ar" class="relative z-20 max-w-3xl mx-auto my-12 px-7 lg:px-0">
    <div class="mb-10">
      <h1 class="text-4xl sm:text-5xl font-semibold text-white font-display tracking-wide">حِرَفيّ البرمجيات</h1>
      <div class="mt-6 space-y-4 text-lg text-white/60 leading-relaxed max-w-2xl">
        <p>
          TDD، Clean Code، Domain-Driven Design: هذه طريقتي في بناء البرمجيات. أرافق الفرق كمطوّر أول، أو قائد تقني، أو مدرب تقني. أدواتي: TypeScript/JavaScript، وكذلك PHP وElixir.
        </p>
        <p>
          ما يميّزني ربّما: أهتمّ بجودة الكود بقدر اهتمامي بما ينتجه. أفضّل البرمجيات الحرّة والأدوات التي تلبّي احتياجات حقيقية. أتساءل أيضًا عن التحيّزات التي ندرجها في الكود، والتي تُديم علاقات اجتماعية تستحقّ المساءلة.
        </p>
        <p>
          أُدرّس البرمجة في <Link href="https://www.univ-jfc.fr/" external>جامعة شامبوليون</Link> وأنشّط مجتمع <Link href="https://www.meetup.com/software-crafters-albi/" external>Software Crafters Albi</Link> منذ 2018.
        </p>
      </div>
    </div>

    <div class="mb-12">
      <div class="flex items-center justify-between mb-5">
        <h2 class="text-2xl font-bold text-white">المسار</h2>
        <a href="/ar/برمجة/مسار" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
      </div>
      <div class="space-y-3">
        {recentExperiences.map((exp) => {
          const isOngoing = !exp.data.endDate;
          const start = formatMonth(exp.data.startDate);
          const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'الحالي';
          return (
            <div class="facet-card rounded-xl bg-white/[0.06] border border-white/[0.1] p-4 hover:bg-white/[0.1] transition-colors">
              <div class="flex items-start justify-between gap-4">
                <div class="min-w-0">
                  <p class="font-semibold text-white text-sm truncate">{exp.data.role}</p>
                  <p class="text-xs text-white/50 mt-0.5">
                    {exp.data.companyUrl ? (
                      <a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a>
                    ) : exp.data.company}
                    {exp.data.location && ` · ${exp.data.location}`}
                  </p>
                </div>
                <span class:list={["text-xs whitespace-nowrap flex-shrink-0", isOngoing ? "text-purple-200 font-semibold" : "text-white/40"]}>
                  {start} — {end}
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>

    <div class="mb-12">
      <div class="flex items-center justify-between mb-5">
        <h2 class="text-2xl font-bold text-white">المشاريع</h2>
        <a href="/ar/برمجة/مشاريع" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {projects.map((project) => (
          <ProjectCard
            title={project.data.title}
            description={project.data.description}
            technologies={project.data.technologies}
            url={project.data.url}
            github={project.data.github}
            featured={project.data.featured}
          />
        ))}
      </div>
    </div>

    {recommendationTexts.length > 0 && (
      <div class="mb-12">
        <div class="flex items-center justify-between mb-5">
          <h2 class="text-2xl font-bold text-white">التوصيات</h2>
          <a href="/ar/برمجة/توصيات" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
        </div>
        <div class="space-y-4">
          {recommendationTexts.map((rec) => (
            <FeaturedRecommendation
              author={rec.data.author}
              authorRole={rec.data.authorRole}
              company={rec.data.company}
              text={rec.text}
              avatar={rec.data.avatar}
              url={rec.data.url}
            />
          ))}
        </div>
      </div>
    )}

    <div class="mb-12">
      <div class="flex items-center justify-between mb-5">
        <h2 class="text-2xl font-bold text-white">المهارات</h2>
        <a href="/ar/برمجة/مهارات" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
      </div>
      <div class="space-y-4">
        {topSkills.map((category) => (
          <div>
            <p class="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">{category.name[locale as keyof typeof category.name]}</p>
            <div class="flex flex-wrap gap-1.5">
              {category.skills.map((skill) => (
                <SkillBadge name={skill} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>

    <h2 class="text-2xl font-bold text-white mb-5">القيم والمنهج</h2>
    <div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
      <ul class="space-y-3 text-white/70">
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>حركة <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>الفائدة الاجتماعية للمطوّر</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>الفخر بالعمل، دون غرور</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>منهج <strong class="text-white">Domain Driven Design</strong></span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>تنظيم <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>أجايل</Link>: التكرار والتحسين المستمر</span>
        </li>
      </ul>
    </div>

    <h2 class="text-2xl font-bold text-white mb-5">المجتمع والتدريس</h2>
    <div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
      <p class="text-white/70 leading-relaxed">
        أنشّط مجتمع <Link href="https://www.meetup.com/software-crafters-albi/" external>Software Crafters Albi</Link> منذ 2018. أستاذ هندسة البرمجيات في <Link href="https://www.univ-jfc.fr/" external>جامعة شامبوليون</Link> في ألبي منذ 2019.
      </p>
    </div>

    <h2 class="text-2xl font-bold text-white mb-5">على الإنترنت</h2>
    <div class="facet-card flex flex-wrap gap-3 mb-12">
      {[
        { label: 'LinkedIn', href: 'https://www.linkedin.com/in/jalil' },
        { label: 'Malt', href: 'https://www.malt.fr/profile/jalilarfaoui' },
        { label: 'Stack Overflow', href: 'https://stackexchange.com/users/54164/jalil' },
        { label: 'GitHub', href: 'https://github.com/JalilArfaoui' },
        { label: 'Framagit', href: 'https://framagit.org/jalil' },
        { label: 'Forge شخصية', href: 'https://forge.tiqa.fr' },
      ].map((link) => (
        <a
          href={link.href}
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-white/[0.06] border border-white/[0.1] text-sm text-white/70 hover:bg-white/[0.12] hover:text-white transition-all duration-200"
        >
          {link.label}
          <svg class="w-3 h-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
        </a>
      ))}
    </div>

    <div class="text-center pt-8 border-t border-white/[0.08]">
      <Image src={logoTiqa} alt="شعار Tiqa" class="mx-auto mb-4" width={160} />
      <p class="text-sm text-white/40">
        <strong class="text-white/60">SAS Tiqa</strong><br />
        12, rue Fabre d'Églantine — 81 000 Albi, France<br />
        811 917 871 RCS Albi
      </p>
    </div>
  </section>
</Layout>