/* global React, BrandLogo, Icons, Button, Card, Heading, Text, Avatar, Badge, Progress, Tabs, AppShell, navigate, Input, Textarea, FormCtl, CourseStore, usePersonalCourses, courseSummary, itemHref */
/* ============================================================
   Perfil y certificados — real data only.
   · Profile: the student's row in public.profiles (CampusAuth.getProfile / updateProfile).
   · Courses, grades and certificates: structured courses from the campus backend.
   ============================================================ */

const profileDate = iso => (iso ? new Date(iso).toLocaleDateString("es", { month: "long", year: "numeric" }) : "");

// The profile row, loaded once per user. `null` while loading.
function useProfile() {
  const userId = window.CampusAuth?.user?.id;
  const [state, setState] = React.useState({ status: "loading", data: window.CampusAuth?.profile || null });
  const load = React.useCallback(() => {
    if (!userId) return;
    setState(s => ({ ...s, status: s.data ? "ready" : "loading" }));
    window.CampusAuth.getProfile()
      .then(data => setState({ status: "ready", data }))
      .catch(e => setState(s => ({ ...s, status: "error", error: CourseStore.errorText(e) })));
  }, [userId]);
  React.useEffect(load, [load]);
  return [state, setState, load];
}

/* ============== Perfil ============== */
const ProfilePage = () => {
  const [tab, setTab] = React.useState("overview");
  const [profile, setProfile, reload] = useProfile();
  const courses = usePersonalCourses();
  const summaries = courses.mine.map(c => ({ course: c, ...courseSummary(c) }));
  const p = profile.data || {};
  const name = p.full_name || window.CampusAuth?.displayName() || "";
  const subtitle = [p.job_title, [p.city, p.country].filter(Boolean).join(", ")].filter(Boolean).join(" · ");
  const certs = summaries.filter(s => s.completed).length;

  return (
    <AppShell active="#/perfil" breadcrumbs={[{ label: "Mi espacio", href: "#/mi-espacio" }, { label: "Mi perfil" }]}>
      <div data-screen-label="09 Perfil">
        <section className="pf-head">
          <Avatar size="2xl" name={name || "?"} />
          <div className="pf-head-body">
            <h1 className="pf-name">{name || "Tu perfil"}</h1>
            {subtitle && <Text muted>{subtitle}</Text>}
            <div className="flex items-center gap-2 wrap mt-3">
              {p.created_at && <Badge variant="outline" leading={<Icons.Calendar size={11} />}>Miembro desde {profileDate(p.created_at)}</Badge>}
              <Badge variant="outline" leading={<Icons.Book size={11} />}>{summaries.length} {summaries.length === 1 ? "curso" : "cursos"}</Badge>
              {certs > 0 && <Badge variant="emphasis" leading={<Icons.Award size={11} />}>{certs} {certs === 1 ? "certificado" : "certificados"}</Badge>}
            </div>
          </div>
          <Button variant="outline" icon={<Icons.Edit size={16} />} onClick={() => setTab("settings")}>Editar perfil</Button>
        </section>

        {profile.status === "error" && (
          <div className="ps-alert" role="alert">
            <span>No hemos podido cargar tu perfil. {profile.error}</span>
            <Button size="sm" variant="outline" onClick={reload}>Reintentar</Button>
          </div>
        )}

        <Tabs value={tab} onChange={setTab} tabs={[
          { value: "overview",     label: "Resumen" },
          { value: "courses",      label: "Cursos", count: summaries.length || undefined },
          { value: "certificates", label: "Certificados", count: certs || undefined },
          { value: "settings",     label: "Datos personales" },
        ]} />

        <div className="mt-6">
          {tab === "overview" && <ProfileOverview profile={p} summaries={summaries} onEdit={() => setTab("settings")} />}
          {tab === "courses" && (summaries.length
            ? <div className="grid grid-3">{summaries.map(s => <window.CatalogCard key={s.course.id} course={s.course} />)}</div>
            : <ProfileEmpty text="Todavía no te has inscrito en ningún curso." action="Ver el catálogo" href="#/cursos" />)}
          {tab === "certificates" && <CertificatesGrid summaries={summaries} holder={name} />}
          {tab === "settings" && (profile.status === "loading" && !profile.data
            ? <div className="ps-loading"><span className="rd-spinner" /> Cargando tus datos…</div>
            : <ProfileSettings key={p.id || "new"} profile={p} onSaved={data => { setProfile({ status: "ready", data }); setTab("overview"); }} />)}
        </div>
      </div>
    </AppShell>
  );
};

const ProfileEmpty = ({ text, action, href }) => (
  <Card className="ps-empty" style={{ padding: "40px 24px" }}>
    <Text muted>{text}</Text>
    {action && <Button variant="outline" onClick={() => navigate(href)}>{action}</Button>}
  </Card>
);

const ProfileOverview = ({ profile, summaries, onEdit }) => {
  const tests = summaries.flatMap(s => s.grades);
  const attempted = tests.filter(t => t.attempted);
  const average = attempted.length ? Math.round(attempted.reduce((a, t) => a + t.pct, 0) / attempted.length) : null;
  const tracks = [...new Set(summaries.map(s => s.course.track))].map(track => {
    const list = summaries.filter(s => s.course.track === track);
    return { track, pct: Math.round(list.reduce((a, s) => a + s.pct, 0) / list.length), n: list.length };
  });
  return (
    <div className="ps-cols">
      <div className="flex-col gap-6">
        <Card>
          <Heading size="h4" className="mb-3">Sobre mí</Heading>
          {profile.bio
            ? <Text style={{ lineHeight: 1.75, whiteSpace: "pre-line" }}>{profile.bio}</Text>
            : <Text muted>Aún no has escrito nada sobre ti. <button className="ps-more" style={{ marginTop: 0 }} onClick={onEdit}>Añadir una descripción</button></Text>}
        </Card>

        <Card>
          <Heading size="h4" className="mb-4">Progreso de aprendizaje</Heading>
          <div className="grid grid-3">
            <div className="pf-figure"><b>{summaries.reduce((a, s) => a + s.done, 0)}</b><span>actividades completadas</span></div>
            <div className="pf-figure"><b>{tests.filter(t => t.status === "passed").length}/{tests.length}</b><span>evaluaciones aprobadas</span></div>
            <div className="pf-figure"><b>{average != null ? `${average} %` : "—"}</b><span>nota media en evaluaciones</span></div>
          </div>
        </Card>

        {tracks.length > 0 && (
          <Card>
            <Heading size="h4" className="mb-3">Trayectoria temática</Heading>
            <div className="flex-col gap-3">
              {tracks.map(t => (
                <div key={t.track}>
                  <div className="flex items-center justify-between mb-1">
                    <Text size="sm">{t.track} <span className="ps-dim">· {t.n} {t.n === 1 ? "curso" : "cursos"}</span></Text>
                    <Text size="sm" muted>{t.pct} %</Text>
                  </div>
                  <Progress value={t.pct} />
                </div>
              ))}
            </div>
          </Card>
        )}
      </div>

      <Card>
        <Heading size="h5" className="mb-3">Información</Heading>
        <dl className="pf-info">
          {[
            ["Email", profile.email || window.CampusAuth?.user?.email],
            ["Cargo o función", profile.job_title],
            ["Ubicación", [profile.city, profile.country].filter(Boolean).join(", ")],
            ["Idioma", profile.locale === "en" ? "Inglés" : profile.locale === "es" || !profile.locale ? "Español" : profile.locale],
            ["Zona horaria", profile.timezone],
          ].map(([k, v]) => (
            <div key={k}><dt>{k}</dt><dd>{v || <span className="ps-dim">Sin indicar</span>}</dd></div>
          ))}
        </dl>
      </Card>
    </div>
  );
};

const ProfileSettings = ({ profile, onSaved }) => {
  const [form, setForm] = React.useState({
    full_name: profile.full_name || window.CampusAuth?.displayName() || "",
    job_title: profile.job_title || "", city: profile.city || "", country: profile.country || "", bio: profile.bio || "",
  });
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState(null);
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const save = async e => {
    e.preventDefault();
    if (!form.full_name.trim()) return setError("Escribe tu nombre.");
    setSaving(true); setError(null);
    try { onSaved(await window.CampusAuth.updateProfile(form)); }
    catch (err) { setError(CourseStore.errorText(err)); }
    finally { setSaving(false); }
  };
  return (
    <form className="pf-form" onSubmit={save}>
      <Heading size="h4">Datos personales</Heading>
      <Text size="sm" muted>Tu nombre aparece en tu espacio y en los certificados que obtengas.</Text>
      <FormCtl label="Nombre completo" required>
        <Input value={form.full_name} onChange={set("full_name")} maxLength={120} autoComplete="name" />
      </FormCtl>
      <FormCtl label="Email" help="Es el email con el que inicias sesión.">
        <Input value={profile.email || window.CampusAuth?.user?.email || ""} readOnly disabled />
      </FormCtl>
      <FormCtl label="Cargo o función">
        <Input value={form.job_title} onChange={set("job_title")} maxLength={120} placeholder="Ej.: Técnica de protección" />
      </FormCtl>
      <div className="grid grid-2">
        <FormCtl label="Ciudad"><Input value={form.city} onChange={set("city")} maxLength={80} autoComplete="address-level2" /></FormCtl>
        <FormCtl label="País"><Input value={form.country} onChange={set("country")} maxLength={80} autoComplete="country-name" /></FormCtl>
      </div>
      <FormCtl label="Sobre mí">
        <Textarea value={form.bio} onChange={set("bio")} maxLength={1200} rows={5} />
      </FormCtl>
      {error && <div className="ps-alert" role="alert">{error}</div>}
      <div className="flex justify-end gap-2">
        <Button type="submit" disabled={saving}>{saving ? "Guardando…" : "Guardar cambios"}</Button>
      </div>
    </form>
  );
};

/* ============== Certificados ============== */
const CertificatesPage = () => {
  const courses = usePersonalCourses();
  const summaries = courses.mine.map(c => ({ course: c, ...courseSummary(c) }));
  const name = window.CampusAuth?.displayName() || "";
  const certs = useCertificates();
  return (
    <AppShell active="#/certificados" breadcrumbs={[{ label: "Mi espacio", href: "#/mi-espacio" }, { label: "Certificados" }]}>
      <div data-screen-label="10 Certificados">
        <div className="page-header">
          <Heading size="h1" className="mb-2">Certificados</Heading>
          <Text muted size="lg">Cuando completes un curso, solicita aquí tu certificado. Lo emite el equipo académico y te lo enviamos por correo electrónico.</Text>
        </div>
        {(courses.loading && !summaries.length) || certs.status === "loading"
          ? <div className="ps-loading"><span className="rd-spinner" /> Cargando tus certificados…</div>
          : <CertificatesGrid summaries={summaries} holder={name} certs={certs} />}
      </div>
    </AppShell>
  );
};

// The student's certificate requests (pending / issued / revoked), by course slug.
function useCertificates() {
  const userId = window.CampusAuth?.user?.id;
  const [state, setState] = React.useState({ status: "loading", bySlug: {} });
  const load = React.useCallback(() => {
    if (!userId) { setState({ status: "ready", bySlug: {} }); return; }
    CourseStore.certificates()
      .then(list => setState({ status: "ready", bySlug: Object.fromEntries((list || []).map(c => [c.course_slug, c])) }))
      .catch(e => setState({ status: "error", bySlug: {}, error: CourseStore.errorText(e) }));
  }, [userId]);
  React.useEffect(load, [load]);
  const request = async courseId => {
    const cert = await CourseStore.requestCertificate(courseId);
    setState(s => ({ ...s, bySlug: { ...s.bySlug, [courseId]: cert } }));
    return cert;
  };
  return { ...state, request, reload: load };
}

const certDate = value => (value ? new Date(value).toLocaleDateString("es", { day: "numeric", month: "long", year: "numeric" }) : "");

const CertificatesGrid = ({ summaries, holder, certs }) => {
  const completed = summaries.filter(s => s.completed);
  const pending = summaries.filter(s => !s.completed);
  if (!completed.length && !pending.length) {
    return <ProfileEmpty text="Inscríbete en un curso para empezar a trabajar en tu primer certificado." action="Ver el catálogo" href="#/cursos" />;
  }
  return (
    <div className="grid grid-2">
      {certs.status === "error" && <Text size="sm" style={{ color: "var(--contrast)", gridColumn: "1 / -1" }}>{certs.error}</Text>}
      {completed.map(s => {
        const cert = certs.bySlug[s.course.id];
        if (cert?.status === "issued") {
          return <CertificateCard key={s.course.id} holder={holder} cert={{
            course: s.course.title, date: certDate(cert.issued_at), hours: s.course.duration,
            score: s.final?.attempted ? s.final.pct : null, badge: s.course.badge, code: cert.code,
          }} />;
        }
        return <CertificateRequestCard key={s.course.id} summary={s} cert={cert} holder={holder} onRequest={certs.request} />;
      })}
      {pending.map(s => (
        <Card key={s.course.id} className="pf-cert-pending" style={{ padding: 32 }}>
          {s.course.badge && <img className="pf-badge-locked" src={s.course.badge} alt={`Insignia de ${s.course.title}, aún no obtenida`} width="88" height="88" />}
          <Heading size="h5">En progreso</Heading>
          <Text muted size="sm">
            Llevas un {s.pct} % de <strong className="ps-strong">«{s.course.title}»</strong>.
            {s.final?.status === "passed" ? " Completa las actividades pendientes para obtener el certificado." : " Para obtener el certificado debes completar el curso y aprobar el examen final."}
          </Text>
          <div style={{ width: "70%" }}><Progress value={s.pct} /></div>
          <Button variant="outline" size="sm" icon={<Icons.PlayCircle size={14} />}
                  onClick={() => navigate(itemHref(s.course, s.next))}>Continuar curso</Button>
        </Card>
      ))}
    </div>
  );
};

// Completed course whose certificate is not issued yet: request it, or see the request.
const CertificateRequestCard = ({ summary, cert, holder, onRequest }) => {
  const { course } = summary;
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState("");
  // Re-render when the profile (real name) finishes loading.
  const [, bump] = React.useReducer(n => n + 1, 0);
  React.useEffect(() => {
    window.addEventListener("bh-session", bump);
    if (!window.CampusAuth?.profile) window.CampusAuth?.getProfile().catch(() => {});
    return () => window.removeEventListener("bh-session", bump);
  }, []);
  const hasName = !!(window.CampusAuth?.profile?.full_name || "").trim();
  const submit = async () => {
    setBusy(true); setError("");
    try { await onRequest(course.id); }
    catch (e) { setError(CourseStore.errorText(e)); }
    finally { setBusy(false); }
  };
  return (
    <Card className="pf-cert-request" style={{ padding: 32 }}>
      {course.badge && <img className="pf-cert-request-badge" src={course.badge} alt={`Insignia de ${course.title}`} width="88" height="88" />}
      {cert?.status === "pending" ? (
        <>
          <Badge variant="primary" leading={<Icons.Clock size={11} />}>Solicitud enviada</Badge>
          <Heading size="h5">{course.title}</Heading>
          <Text muted size="sm">
            Solicitaste el certificado el {certDate(cert.requested_at)}. El equipo académico lo está preparando
            y te lo enviaremos por correo electrónico. Aparecerá aquí en cuanto se emita.
          </Text>
          <Text size="xs" muted>Código asignado: <strong className="ps-strong">{cert.code}</strong></Text>
        </>
      ) : cert?.status === "revoked" ? (
        <>
          <Badge variant="neutral">Certificado revocado</Badge>
          <Heading size="h5">{course.title}</Heading>
          <Text muted size="sm">Si crees que es un error, escríbenos a <a href="mailto:academy@bluehuman.org">academy@bluehuman.org</a>.</Text>
        </>
      ) : (
        <>
          <Badge variant="success" leading={<Icons.Check size={11} />}>Curso completado</Badge>
          <Heading size="h5">{course.title}</Heading>
          <Text muted size="sm">
            Enhorabuena: has completado todas las actividades. Solicita tu certificado y el equipo académico
            te lo enviará por correo electrónico.
          </Text>
          {hasName
            ? <Text size="sm">Se emitirá a nombre de <strong className="ps-strong">{holder}</strong>. ¿No es correcto? <a href="#/perfil">Edita tu perfil</a>.</Text>
            : <Text size="sm">Antes de solicitarlo, añade tu nombre completo en <a href="#/perfil">tu perfil</a>: es el que aparecerá en el certificado.</Text>}
          {error && <Text size="sm" style={{ color: "var(--contrast)" }}>{error}</Text>}
          <div>
            {hasName
              ? <Button icon={<Icons.Award size={16} />} onClick={submit} disabled={busy}>{busy ? "Enviando solicitud…" : "Solicitar certificado"}</Button>
              : <Button variant="outline" icon={<Icons.User size={16} />} onClick={() => navigate("#/perfil")}>Completar mi perfil</Button>}
          </div>
        </>
      )}
    </Card>
  );
};

const CertificateCard = ({ cert, holder }) => (
  <Card flush>
    <div className="pf-cert">
      <div style={{ marginBottom: 20 }}><BrandLogo inverse size={20} /></div>
      {cert.badge && <img className="pf-cert-badge" src={cert.badge} alt={`Insignia de ${cert.course}`} width="96" height="96" />}
      <Text size="xs" style={{ color: "rgba(255,255,255,0.75)", fontWeight: 600 }}>Certificado de aprovechamiento</Text>
      <div className="pf-cert-title">{cert.course}</div>
      <Text size="sm" style={{ color: "rgba(255,255,255,0.85)" }}>
        Otorgado a <strong style={{ color: "#fff" }}>{holder}</strong>
      </Text>
      <div className="pf-cert-foot">
        <div><div style={{ fontWeight: 600 }}>{cert.code}</div><div>Código del certificado</div></div>
        <div className="text-right">
          <div style={{ fontWeight: 600 }}>{cert.date}</div>
          <div>{cert.hours}{cert.score != null ? ` · Examen final ${cert.score} %` : ""}</div>
        </div>
      </div>
    </div>
    <div style={{ padding: 18 }}>
      <Text size="sm" style={{ fontWeight: 600 }}>{cert.course}</Text>
      <Text size="xs" muted className="mt-1">Emitido el {cert.date}</Text>
    </div>
  </Card>
);

Object.assign(window, { ProfilePage, CertificatesPage });