/* calc2-intake-header.jsx — карточка клиента: summary-bar + read-only аккордеон (spec §2.1, §2.4). */
(function () {
  const { Badge, Button } = window.DesignSystem_9e0a09;
  const { Ic } = window;
  const { useState, useEffect, useMemo } = React;
  const R = window.CalcIntakeReadiness;

  function ReadinessRing({ score, size = 44 }) {
    const r = (size - 6) / 2, c = 2 * Math.PI * r;
    const tone = score >= 60 ? 'var(--success-strong)' : score >= 30 ? 'var(--warning-strong)' : 'var(--destructive)';
    return (
      <div className="cc-intake-ring" style={{ width: size, height: size }}>
        <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--border-subtle)" strokeWidth="4" />
          <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={tone} strokeWidth="4" strokeLinecap="round"
            strokeDasharray={c} strokeDashoffset={c * (1 - score / 100)} />
        </svg>
        <span className="t-num">{score}%</span>
      </div>
    );
  }

  function AreaBadge({ source }) {
    if (source === 'measured') return <Badge tone="success" dot className="cc-intake-meta-badge">по замеру</Badge>;
    if (source === 'approx') return <Badge tone="warning" dot className="cc-intake-meta-badge">ориентир</Badge>;
    return <Badge tone="warning" dot className="cc-intake-meta-badge">нет площади</Badge>;
  }

  function Calc2IntakeHeader({ est, setEst, role }) {
    const dealId = est.project.dealId || 'D-404';
    const [intake, setIntake] = useState(() => (window.loadSiteIntake ? window.loadSiteIntake(dealId) : null));

    useEffect(() => {
      setIntake(window.loadSiteIntake ? window.loadSiteIntake(dealId) : null);
    }, [dealId]);

    useEffect(() => {
      const reload = () => setIntake(window.loadSiteIntake ? window.loadSiteIntake(dealId) : null);
      window.addEventListener('remontpro:intake-updated', reload);
      window.addEventListener('remontpro:measure-submitted', reload);
      window.addEventListener('remontpro:intake-route', reload);
      window.addEventListener('storage', reload);
      return () => {
        window.removeEventListener('remontpro:intake-updated', reload);
        window.removeEventListener('remontpro:measure-submitted', reload);
        window.removeEventListener('remontpro:intake-route', reload);
        window.removeEventListener('storage', reload);
      };
    }, [dealId]);

    const handleIntakeChange = (next) => {
      if (window.saveSiteIntake) window.saveSiteIntake(dealId, next);
      setIntake(next);
    };

    const dpMeta = useMemo(() => R.loadDesignProjectMeta(dealId), [dealId, intake]);
    const readiness = useMemo(() => R.calcReadiness(intake, dpMeta), [intake, dpMeta]);
    const summary = useMemo(() => R.formatSummaryLine(intake), [intake]);

    const [open, setOpen] = useState(readiness.total < 60);

    useEffect(() => { if (readiness.total < 60) setOpen(true); }, [readiness.total]);

    useEffect(() => {
      if (!intake) return;
      setEst((prev) => R.syncEstimateProject(prev, intake));
    }, [dealId, intake, setEst]);

    const clientLabel = intake?.clientName || est.project.client || 'Клиент';
    const objectLabel = intake?.address || est.project.object || 'Объект';
    const teamChips = ['Менеджер', 'Прораб', 'Дизайнер'];
    const canOpenCrm = role === 'manager' || role === 'super';

    return (
      <div className="cc-intake">
        <div className="cc-intake-bar">
          <ReadinessRing score={readiness.total} />
          <div className="cc-intake-main">
            <div className="cc-intake-line1">
              <strong>{clientLabel}</strong>
              <span className="cc-intake-sep">·</span>
              <span>{objectLabel}</span>
              <span className="cc-intake-sep">·</span>
              <span className="cc-intake-ready">Готовность {readiness.total}%</span>
              {readiness.total < 60 && <Badge tone="warning" dot className="cc-intake-warn">ниже 60%</Badge>}
            </div>

            <div className="cc-intake-meta">
              {summary.parts.map((p, i) => (
                <React.Fragment key={p}>
                  {i > 0 && <span className="cc-intake-sep">·</span>}
                  <span className="cc-intake-meta-item">{p}</span>
                </React.Fragment>
              ))}
              <AreaBadge source={summary.area.source} />
            </div>

            <div className="cc-intake-line2">
              <div className="cc-intake-roles">{teamChips.map((t) => <span key={t} className="cc-intake-role">{t}</span>)}</div>
              <div className="cc-intake-actions">
                {canOpenCrm && (
                  <a className="cc-intake-link cc-intake-link-primary" href={'client-intake.html?deal=' + encodeURIComponent(dealId)} target="_blank" rel="noreferrer">
                    <Ic n="clipboard-list" s={14} />Анкеты клиента
                  </a>
                )}
                <button type="button" className="cc-intake-toggle" onClick={() => setOpen((v) => !v)}>
                  {open ? 'Свернуть' : 'Подробнее'}<Ic n={open ? 'chevron-up' : 'chevron-down'} s={14} />
                </button>
              </div>
            </div>
          </div>
        </div>

        {readiness.total < 60 && (
          <div className="cc-intake-attn">
            <Ic n="alert-circle" s={16} c="var(--warning-strong)" />
            <span>Данные объекта заполнены не полностью. Проверьте замер и анкету перед финальной сметой.</span>
            {canOpenCrm && (
              <>
                <a className="cc-intake-link" href={'manager.html?deal=' + encodeURIComponent(dealId)}>Карточка объекта</a>
                <a className="cc-intake-link" href={'client-intake.html?deal=' + encodeURIComponent(dealId)} target="_blank" rel="noreferrer">Анкеты клиента</a>
              </>
            )}
          </div>
        )}

        {summary.area.source === 'missing' && (
          <div className="cc-intake-attn">
            <Ic n="ruler" s={16} c="var(--warning-strong)" />
            <span>Нет площади для расчёта. Добавьте замер или ориентир в карточке объекта.</span>
            {canOpenCrm && (
              <>
                <a className="cc-intake-link" href={'manager.html?deal=' + encodeURIComponent(dealId)}>Карточка объекта</a>
                <a className="cc-intake-link" href={'client-intake.html?deal=' + encodeURIComponent(dealId)} target="_blank" rel="noreferrer">Анкеты клиента</a>
              </>
            )}
          </div>
        )}

        {window.IntakeCalcSyncBanner && <window.IntakeCalcSyncBanner dealId={dealId} />}

        {open && (
          <div className="cc-intake-panel">
            <window.SiteIntakeReadonlyPanel intake={intake} dealId={dealId} role={role} onChange={handleIntakeChange} />
            {canOpenCrm && (
              <div className="cc-intake-crm">
                <Button variant="ghost" size="sm" iconLeft={<Ic n="external-link" s={14} />}
                  onClick={() => { window.location.href = 'manager.html?deal=' + encodeURIComponent(dealId); }}>
                  Открыть карточку объекта (CRM)
                </Button>
                <Button variant="ghost" size="sm" iconLeft={<Ic n="clipboard-list" s={14} />}
                  onClick={() => { window.open('client-intake.html?deal=' + encodeURIComponent(dealId), '_blank'); }}>
                  Анкеты клиента (ЛК)
                </Button>
              </div>
            )}
          </div>
        )}
      </div>
    );
  }

  window.Calc2IntakeHeader = Calc2IntakeHeader;
})();