/* global React, ProjectImage */
// Project detail — long-scroll editorial layout

function ProjectDetail({ project, projects, navigate }) {
  if (!project) {
    return (
      <div style={{ padding: 64 }}>
        <p>Proje bulunamadı. <button onClick={() => navigate({ page: "archive" })} style={{ textDecoration: "underline" }}>Arşive dön</button></p>
      </div>
    );
  }

  const related = projects.filter((p) => p.type === project.type && p.id !== project.id).slice(0, 3);
  const idx = projects.findIndex((p) => p.id === project.id);
  const next = projects[(idx + 1) % projects.length];
  const prev = projects[(idx - 1 + projects.length) % projects.length];

  const images = Array.from({ length: project.images }, (_, i) => i);

  return (
    <article className="page-in">
      {/* Breadcrumb */}
      <div style={{ padding: "20px 32px", display: "flex", justifyContent: "space-between" }} className="t-mono">
        <div style={{ display: "flex", gap: 8, color: "var(--muted)" }}>
          <button onClick={() => navigate({ page: "archive" })} style={{ borderBottom: "1px solid var(--line)" }}>Arşiv</button>
          <span>/</span>
          <span style={{ color: "var(--fg)" }}>{project.type}</span>
          <span>/</span>
          <span style={{ color: "var(--fg)" }}>{project.title}</span>
        </div>
        <div style={{ color: "var(--muted)" }}>
          {String(idx + 1).padStart(2, "0")} / {String(projects.length).padStart(2, "0")}
        </div>
      </div>

      {/* Title block */}
      <header
        style={{
          padding: "32px 32px 56px",
          display: "grid",
          gridTemplateColumns: "2fr 1fr",
          gap: 48,
          alignItems: "end",
          borderBottom: "1px solid var(--line-soft)",
        }}
      >
        <div>
          {project.status && (
            <div className="t-mono" style={{ color: "var(--accent)", marginBottom: 16 }}>
              <span>●</span> {project.status}
            </div>
          )}
          <h1
            className="t-display"
            style={{
              fontSize: "clamp(72px, 9vw, 156px)",
              margin: 0,
            }}
          >
            {project.title}
          </h1>
          <div style={{ display: "flex", gap: 32, marginTop: 28 }} className="t-mono">
            <span>{project.location}</span>
            <span style={{ color: "var(--muted)" }}>·</span>
            <span>{project.year}</span>
            <span style={{ color: "var(--muted)" }}>·</span>
            <span>{project.type}</span>
          </div>
        </div>
        <p style={{ fontSize: 18, lineHeight: 1.45, margin: 0, fontFamily: "var(--font-display)", fontStyle: "italic", textWrap: "pretty" }}>
          {project.summary}
        </p>
      </header>

      {/* Hero image */}
      <ProjectImage project={project} index={0} ratio="16 / 9" />

      {/* Body: description + meta */}
      <section style={{ padding: "88px 32px", display: "grid", gridTemplateColumns: "1fr 2fr 1fr", gap: 48, alignItems: "start" }}>
        <aside style={{ position: "sticky", top: 32, display: "flex", flexDirection: "column", gap: 20 }}>
          {[
            ["Konum", project.location],
            ["Yıl", project.year],
            ["Tür", project.type],
            ["Durum", project.status],
            ["Büyüklük", project.size],
            ["İşveren", project.client],
            ["Ekip", project.team],
            ["Fotoğraf", project.photographer],
          ].filter(([, v]) => v).map(([k, v]) => (
            <div key={k}>
              <div className="t-meta">{k}</div>
              <div style={{ marginTop: 4, fontSize: 14 }}>{v}</div>
            </div>
          ))}
        </aside>
        <div>
          <p style={{ fontSize: 22, lineHeight: 1.45, margin: 0, textWrap: "pretty" }}>
            {project.description}
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, marginTop: 32, color: "var(--muted)", textWrap: "pretty" }}>
            Projelendirme sürecinde ihtiyaç programı, arazi verileri ve yerel
            yönetmelikler birlikte değerlendirilir; tasarım, uygulama projeleri
            ve şantiye takibi bir bütün olarak yürütülür.
          </p>
        </div>
        <aside />
      </section>

      {/* Image grid — varied composition */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, padding: "0 32px 56px" }}>
        {images.slice(1, 3).map((i) => (
          <ProjectImage key={i} project={project} index={i} ratio="4 / 5" />
        ))}
      </section>


      {/* More images, full-bleed */}
      {images.slice(3).map((i, k) => (
        <ProjectImage key={i} project={project} index={i} ratio={k % 2 === 0 ? "16 / 9" : "3 / 2"} />
      ))}

      {/* Prev / next */}
      <nav
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          borderTop: "1px solid var(--line-soft)",
        }}
      >
        <button
          onClick={() => navigate({ page: "project", id: prev.id })}
          style={{ padding: "40px 32px", textAlign: "left", borderRight: "1px solid var(--line-soft)" }}
          onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-alt)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
        >
          <div className="t-mono" style={{ color: "var(--muted)", marginBottom: 8 }}>← Önceki</div>
          <div className="t-display" style={{ fontSize: 32, fontStyle: "italic" }}>{prev.title}</div>
        </button>
        <button
          onClick={() => navigate({ page: "project", id: next.id })}
          style={{ padding: "40px 32px", textAlign: "right" }}
          onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-alt)"}
          onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
        >
          <div className="t-mono" style={{ color: "var(--muted)", marginBottom: 8 }}>Sonraki →</div>
          <div className="t-display" style={{ fontSize: 32, fontStyle: "italic" }}>{next.title}</div>
        </button>
      </nav>

      {/* Related */}
      {related.length > 0 && (
        <section style={{ padding: "72px 32px", borderTop: "1px solid var(--line-soft)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 32 }}>
            <h3 className="t-display" style={{ fontSize: 32, margin: 0, fontStyle: "italic" }}>İlgili çalışmalar</h3>
            <span className="t-mono" style={{ color: "var(--muted)" }}>Tür: {project.type}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {related.map((p) => (
              <button
                key={p.id}
                onClick={() => navigate({ page: "project", id: p.id })}
                style={{ textAlign: "left" }}
              >
                <ProjectImage project={p} index={0} ratio="4 / 3" showMeta={false} />
                <div style={{ padding: "12px 0 0", display: "flex", justifyContent: "space-between" }}>
                  <div>
                    <div className="t-display" style={{ fontSize: 20 }}>{p.title}</div>
                    <div className="t-mono" style={{ color: "var(--muted)", marginTop: 4 }}>{p.location}</div>
                  </div>
                  <span className="t-mono t-num" style={{ color: "var(--muted)" }}>{p.year}</span>
                </div>
              </button>
            ))}
          </div>
        </section>
      )}
    </article>
  );
}

window.ProjectDetail = ProjectDetail;