/**
 * Карточка ремонта (PWA): read-only просмотр после клика по строке ленты.
 *
 * Минимальная версия для возможности «открыть и посмотреть». Полноценный
 * вариант с lightbox, копированием госномера, обратным счётчиком и
 * редактированием в 24h-окне — в PR-9 по плану.
 *
 * Endpoint: GET /api/v1/mechanic/repairs/{id}
 */
import { useEffect, useMemo, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ChevronLeft, Pencil } from "lucide-react";
import { getRepairDetail, type RepairDetailResponse } from "@/api/repairsFeed";

function fmt(n: number): string {
  return new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 0 }).format(Math.round(n));
}

function fmtDateTime(iso: string): string {
  const d = new Date(iso);
  return new Intl.DateTimeFormat("ru-RU", {
    day: "2-digit", month: "long", year: "numeric",
    hour: "2-digit", minute: "2-digit",
  }).format(d);
}

export default function RepairDetailPage() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [data, setData] = useState<RepairDetailResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [now, setNow] = useState(() => Date.now());

  // Тикер для обратного счётчика «Осталось X мин». Раз в 30 секунд хватит —
  // окно правки 1 час, точность до минуты допустима.
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 30_000);
    return () => clearInterval(t);
  }, []);

  const editRemaining = useMemo(() => {
    if (!data?.can_edit || !data.edit_until) return null;
    const until = new Date(data.edit_until).getTime();
    const ms = until - now;
    if (ms <= 0) return null;
    const minutes = Math.floor(ms / 60_000);
    if (minutes < 1) return "меньше минуты";
    if (minutes < 60) return `${minutes} мин`;
    const h = Math.floor(minutes / 60);
    const m = minutes - h * 60;
    return `${h} ч ${m} мин`;
  }, [data, now]);

  useEffect(() => {
    if (!id) return;
    setLoading(true);
    getRepairDetail(Number(id))
      .then((r) => { setData(r); setError(null); })
      .catch((e: Error) => setError(e.message || "Не удалось загрузить ремонт"))
      .finally(() => setLoading(false));
  }, [id]);

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur">
        <div className="flex items-center gap-3 p-3">
          <button
            onClick={() => navigate("/repairs")}
            className="rounded-full p-2 hover:bg-accent"
            aria-label="Назад"
          >
            <ChevronLeft className="h-5 w-5" />
          </button>
          <div className="flex-1 min-w-0">
            <h1 className="text-base font-semibold truncate">
              {data ? `Ремонт #${data.id}` : "Ремонт"}
            </h1>
            {data && (
              <div className="text-xs text-muted-foreground truncate">
                {fmtDateTime(data.created_at)}
              </div>
            )}
          </div>
        </div>
      </header>

      <main className="p-4 space-y-5 pb-12">
        {loading && (
          <div className="text-sm text-muted-foreground text-center py-12">
            Загрузка…
          </div>
        )}
        {error && (
          <div className="text-sm text-destructive bg-destructive/10 rounded-md p-3">
            {error}
          </div>
        )}
        {data && (
          <>
            {/* Кнопка правки в 1-часовом окне (У49). */}
            {data.can_edit && editRemaining && (
              <button
                onClick={() => navigate(`/repairs/${data.id}/edit`)}
                className="w-full flex items-center justify-between gap-2 rounded-lg border-2 border-amber-300 bg-amber-50 px-4 py-3 hover:bg-amber-100 transition-colors"
              >
                <span className="flex items-center gap-2 text-sm font-semibold text-amber-900">
                  <Pencil className="h-4 w-4" />
                  Изменить ремонт
                </span>
                <span className="text-xs font-mono text-amber-800">
                  осталось {editRemaining}
                </span>
              </button>
            )}

            {/* Шапка: машина + водитель + механик */}
            <section className="rounded-lg border bg-card p-4 space-y-2">
              <div className="text-xl font-bold font-mono">
                {data.car_plate || "—"}
              </div>
              {(data.car_make || data.car_model) && (
                <div className="text-sm text-muted-foreground">
                  {data.car_make} {data.car_model}
                </div>
              )}
              <div className="pt-2 border-t text-sm space-y-1">
                {data.driver_name && (
                  <div>
                    <span className="text-muted-foreground">Водитель: </span>
                    {data.driver_name}
                  </div>
                )}
                {data.mechanics && data.mechanics.length > 0 ? (
                  <div>
                    <span className="text-muted-foreground">
                      {data.mechanics.length > 1 ? "Механики: " : "Механик: "}
                    </span>
                    <span className="inline-flex flex-wrap gap-1.5 align-top">
                      {data.mechanics.map((m) => (
                        <span
                          key={m.id}
                          className="inline-flex items-center rounded-full border bg-muted/50 px-2.5 py-0.5 text-xs"
                        >
                          {m.name}
                        </span>
                      ))}
                    </span>
                    {data.mechanics.length > 1 && (
                      <div className="text-xs text-muted-foreground mt-1">
                        Делёж поровну: {fmt(data.total_sum / data.mechanics.length)} ₽ на каждого
                      </div>
                    )}
                  </div>
                ) : (
                  <div>
                    <span className="text-muted-foreground">Механик: </span>
                    {data.mechanic_name || "—"}
                  </div>
                )}
                {data.mileage != null && (
                  <div>
                    <span className="text-muted-foreground">Пробег: </span>
                    <span className="font-mono">{fmt(data.mileage)} км</span>
                  </div>
                )}
              </div>
            </section>

            {/* Фото */}
            {data.photos.length > 0 && (
              <section>
                <div className="text-sm font-semibold mb-2">
                  Фото · {data.photos.length}
                </div>
                <div className="grid grid-cols-3 gap-2">
                  {data.photos.map((p) => (
                    <a
                      key={p.photo_uuid}
                      href={p.orig_url ?? "#"}
                      target="_blank"
                      rel="noreferrer"
                      className="block aspect-square overflow-hidden rounded-md border bg-muted"
                    >
                      {p.thumb_url && (
                        <img
                          src={p.thumb_url}
                          alt=""
                          loading="lazy"
                          className="w-full h-full object-cover"
                        />
                      )}
                    </a>
                  ))}
                </div>
              </section>
            )}

            {/* Работы */}
            <section className="rounded-lg border bg-card overflow-hidden">
              <div className="px-4 py-3 border-b bg-muted/40">
                <div className="text-sm font-semibold">
                  Работы · {data.works.length}
                </div>
              </div>
              <div className="divide-y">
                {data.works.map((w, i) => (
                  <div key={i} className="px-4 py-3 flex items-start justify-between gap-3">
                    <div className="text-sm flex-1 min-w-0">
                      <div>
                        {w.name}
                        {w.manual_override && (
                          <span title="Цена изменена вручную" className="ml-2 text-amber-700">
                            ✎
                          </span>
                        )}
                      </div>
                      {w.manual_override && w.override_comment && (
                        <div className="mt-1 text-xs text-amber-800 bg-amber-50 border-l-2 border-amber-300 pl-2 py-0.5 leading-snug">
                          {w.override_comment}
                        </div>
                      )}
                    </div>
                    <div className="text-sm font-mono whitespace-nowrap text-muted-foreground shrink-0 mt-0.5">
                      {fmt(w.price_applied)} ₽
                    </div>
                  </div>
                ))}
                <div className="px-4 py-3 flex items-baseline justify-between bg-muted/30">
                  <div className="text-sm font-semibold">Итого</div>
                  <div className="text-base font-mono font-bold">
                    {fmt(data.total_sum)} ₽
                  </div>
                </div>
              </div>
            </section>

            {/* Запчасти */}
            {data.parts.length > 0 && (
              <section className="rounded-lg border bg-card overflow-hidden">
                <div className="px-4 py-3 border-b bg-muted/40">
                  <div className="text-sm font-semibold">
                    Запчасти · {data.parts.length}
                  </div>
                </div>
                <div className="divide-y">
                  {data.parts.map((p, i) => (
                    <div key={i} className="px-4 py-3 flex items-baseline justify-between gap-3">
                      <div className="text-sm">{p.name}</div>
                      <div className="text-sm font-mono whitespace-nowrap text-muted-foreground">
                        {p.qty} шт
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            )}

            {/* Замена масла */}
            {data.oil_change && (
              <section className="rounded-lg border bg-card overflow-hidden">
                <div className="px-4 py-3 border-b bg-muted/40">
                  <div className="text-sm font-semibold">Замена масла</div>
                </div>
                <div className="p-4">
                  <div className="flex gap-3 items-start">
                    {data.oil_change.sticker_thumb_url && (
                      <a
                        href={data.oil_change.sticker_orig_url ?? "#"}
                        target="_blank"
                        rel="noreferrer"
                        className="flex-shrink-0"
                      >
                        <img
                          src={data.oil_change.sticker_thumb_url}
                          alt="Стикер замены масла"
                          loading="lazy"
                          className="w-24 h-24 object-cover rounded-md border bg-muted"
                        />
                      </a>
                    )}
                    <div className="flex-1 text-sm space-y-1">
                      {data.oil_change.mileage_at_change != null && (
                        <div>
                          <span className="text-muted-foreground">Пробег при замене: </span>
                          <span className="font-mono">{fmt(data.oil_change.mileage_at_change)} км</span>
                        </div>
                      )}
                      {data.oil_change.next_in_km != null && (
                        <div>
                          <span className="text-muted-foreground">Следующая через: </span>
                          <span className="font-mono">{fmt(data.oil_change.next_in_km)} км</span>
                        </div>
                      )}
                      {data.oil_change.has_sticker && !data.oil_change.sticker_thumb_url && (
                        <div className="text-xs text-muted-foreground pt-1">
                          ✓ фото стикера загружено
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </section>
            )}

            {data.edited_in_crm && (
              <div className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md p-3">
                Этот ремонт был отредактирован в CRM. Кнопка «Редактировать»
                в PWA для него недоступна.
              </div>
            )}
          </>
        )}
      </main>
    </div>
  );
}
