/* A.3 Cause-of-Action Selection. Replaces v1's auto "Legal Structure Engine".
   Platform presents 2-6 options with plain-English descriptions; USER selects.
   In Utah, options can be ranked as "system-suggested matches"; in NY, neutral. */

const CAUSES_OF_ACTION = [
  {
    id: 'breach-contract',
    label: 'Breach of contract',
    confidence: 0.86, // shown as ranking only in Utah
    plain: 'Someone failed to do what a written or verbal agreement required them to do, and you suffered a measurable loss as a result.',
    example: 'Contractor took a $4,000 deposit to remodel a bathroom, did partial demolition, then stopped responding. Homeowner had to hire a second contractor.',
    elements: [
      { label: 'A valid contract existed', evidenceCount: 3, complete: true },
      { label: 'You performed your obligations (or were excused)', evidenceCount: 2, complete: true },
      { label: 'The other party breached', evidenceCount: 4, complete: true },
      { label: 'You suffered measurable damages', evidenceCount: 1, complete: false },
    ],
    citations: 'NY: Harris v. Seward Park Hous. Corp., 79 A.D.3d 425 (1st Dep\'t 2010)',
  },
  {
    id: 'unjust-enrichment',
    label: 'Unjust enrichment',
    confidence: 0.62,
    plain: 'You gave someone money or value, they kept it without delivering what was promised, and it would be unfair for them to keep it.',
    example: 'Paid a deposit for a service that was never performed, where there is no clear written contract.',
    elements: [
      { label: 'Defendant was enriched', evidenceCount: 2, complete: true },
      { label: 'At your expense', evidenceCount: 2, complete: true },
      { label: 'It would be unjust to allow them to retain the benefit', evidenceCount: 0, complete: false },
    ],
    citations: 'NY: Mandarin Trading Ltd. v. Wildenstein, 16 N.Y.3d 173 (2011)',
  },
  {
    id: 'consumer-fraud',
    label: 'Consumer fraud / deceptive practices',
    confidence: 0.48,
    plain: 'A business made false or misleading statements that you relied on, and you lost money because of those statements.',
    example: 'Contractor advertised licensure they did not actually hold, and you only hired them because of that representation.',
    elements: [
      { label: 'Defendant made a material misrepresentation', evidenceCount: 1, complete: false },
      { label: 'You relied on it', evidenceCount: 2, complete: true },
      { label: 'You suffered damages', evidenceCount: 1, complete: false },
    ],
    citations: 'NY GBL § 349',
  },
  {
    id: 'mechanics-lien',
    label: 'Mechanic\'s lien defense',
    confidence: 0.21,
    plain: 'If the contractor placed a lien on your property, you can move to discharge it on grounds of willful exaggeration or non-performance.',
    example: 'Contractor filed a $30,000 lien for $4,000 of work that was never completed.',
    elements: [
      { label: 'Lien was filed', evidenceCount: 0, complete: false },
      { label: 'Lien is willfully exaggerated or unsupported', evidenceCount: 0, complete: false },
    ],
    citations: 'NY Lien Law § 39',
  },
];

const CauseOfActionPicker = ({ jx, selected, onToggle, onConsult }) => {
  const isUtah = jx === 'utah';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Header */}
      <div>
        <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>
          A.3 · Choose your legal theory
        </div>
        <div style={{ fontFamily: 'Fraunces', fontSize: 26, color: THEME.text, fontWeight: 500, letterSpacing: -0.4, lineHeight: 1.15, marginBottom: 6 }}>
          Which legal theories apply to your situation?
        </div>
        <div style={{ fontSize: 13, color: THEME.textDim, lineHeight: 1.55, maxWidth: 680 }}>
          Cases often have more than one. Select all that you believe fit. We'll show you what each one typically requires -
          you decide which to pursue. <span style={{ color: THEME.text, fontWeight: 500 }}>You are choosing, not being told.</span>
        </div>
      </div>

      {/* Utah-only ranking notice */}
      {isUtah && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 14px', borderRadius: 10,
          background: 'rgba(91,167,115,0.10)',
          border: `1px solid rgba(91,167,115,0.25)`,
          fontSize: 12, color: THEME.textDim, lineHeight: 1.5,
        }}>
          <Icon d={Icons.shield} size={14} stroke={THEME.success}/>
          <span>
            <span style={{ color: THEME.success, fontWeight: 600 }}>Utah sandbox feature:</span> options below are ranked as system-suggested
            matches based on your intake facts. Methodology and accuracy benchmarks are reported to the Utah Office of Legal Services Innovation.
          </span>
        </div>
      )}

      {/* Cause cards */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {CAUSES_OF_ACTION.map((c, i) => {
          const isSelected = selected.includes(c.id);
          const completeCount = c.elements.filter(e => e.complete).length;
          return (
            <div key={c.id} onClick={() => onToggle(c.id)} style={{
              padding: '16px 18px', borderRadius: 14, cursor: 'pointer',
              background: isSelected
                ? (THEME.mode === 'dark' ? 'rgba(105,134,191,0.10)' : 'rgba(105,134,191,0.08)')
                : THEME.surface,
              border: `1.5px solid ${isSelected ? THEME.blue : THEME.line}`,
              transition: 'all 0.18s ease',
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                {/* Checkbox */}
                <div style={{
                  flexShrink: 0, width: 22, height: 22, borderRadius: 6, marginTop: 2,
                  border: `1.5px solid ${isSelected ? THEME.blue : THEME.lineSoft}`,
                  background: isSelected ? THEME.blue : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {isSelected && <Icon d={Icons.check} size={13} stroke="#fff" sw={3}/>}
                </div>

                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                    <div style={{ fontFamily: 'Fraunces', fontSize: 17, color: THEME.text, fontWeight: 500, letterSpacing: -0.2 }}>
                      {c.label}
                    </div>
                    {isUtah && (
                      <div style={{
                        fontSize: 10.5, fontWeight: 600, padding: '2px 7px', borderRadius: 4,
                        background: c.confidence > 0.7 ? 'rgba(91,167,115,0.18)' : c.confidence > 0.4 ? 'rgba(217,144,54,0.16)' : 'rgba(255,255,255,0.06)',
                        color: c.confidence > 0.7 ? THEME.success : c.confidence > 0.4 ? THEME.warning : THEME.textMute,
                        border: `1px solid ${c.confidence > 0.7 ? 'rgba(91,167,115,0.3)' : c.confidence > 0.4 ? 'rgba(217,144,54,0.3)' : THEME.lineSoft}`,
                        letterSpacing: 0.4,
                      }}>
                        {Math.round(c.confidence * 100)}% MATCH
                      </div>
                    )}
                    <div style={{ flex: 1 }}/>
                    <div style={{ fontSize: 11, color: THEME.textMute }}>
                      {completeCount}/{c.elements.length} elements supported
                    </div>
                  </div>

                  <div style={{ fontSize: 13, color: THEME.textDim, lineHeight: 1.55, marginBottom: 10 }}>
                    {c.plain}
                  </div>

                  {/* Example. Collapsed unless selected */}
                  {isSelected && (
                    <>
                      <div style={{
                        padding: '10px 12px', borderRadius: 8, marginBottom: 10,
                        background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(0,0,0,0.025)',
                        borderLeft: `2px solid ${THEME.accent}`,
                        fontSize: 12, color: THEME.textDim, lineHeight: 1.5,
                      }}>
                        <span style={{ color: THEME.accent, fontWeight: 600, fontSize: 10, letterSpacing: 1, textTransform: 'uppercase', marginRight: 6 }}>Example</span>
                        {c.example}
                      </div>

                      {/* Elements list */}
                      <div>
                        <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>
                          Typically required elements
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                          {c.elements.map((e, idx) => (
                            <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 12.5, color: THEME.text, padding: '5px 0' }}>
                              <div style={{
                                width: 16, height: 16, borderRadius: 8, flexShrink: 0,
                                background: e.complete ? 'rgba(91,167,115,0.20)' : THEME.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
                                border: `1px solid ${e.complete ? 'rgba(91,167,115,0.45)' : THEME.lineSoft}`,
                                display: 'flex', alignItems: 'center', justifyContent: 'center',
                              }}>
                                {e.complete && <Icon d={Icons.check} size={9} stroke={THEME.success} sw={3}/>}
                              </div>
                              <span style={{ flex: 1, color: e.complete ? THEME.text : THEME.textDim }}>{e.label}</span>
                              <span style={{ fontSize: 11, color: THEME.textMute }}>
                                {e.evidenceCount > 0 ? `${e.evidenceCount} item${e.evidenceCount > 1 ? 's' : ''}` : 'no evidence yet'}
                              </span>
                            </div>
                          ))}
                        </div>
                        <div style={{ fontSize: 10.5, color: THEME.textMute, marginTop: 8, fontStyle: 'italic' }}>
                          {c.citations}
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* None of these fit → consult */}
      <div onClick={onConsult} style={{
        padding: '14px 16px', borderRadius: 12, cursor: 'pointer',
        background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)',
        border: `1px dashed ${THEME.line}`,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <Icon d={Icons.shield} size={16} stroke={THEME.accent}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, color: THEME.text, fontWeight: 600 }}>None of these fit your situation?</div>
          <div style={{ fontSize: 12, color: THEME.textDim, marginTop: 2 }}>
            Talk to a verified attorney. 15-min initial consult is free, longer consults from $79.
          </div>
        </div>
        <Icon d={Icons.arrowRight} size={15} stroke={THEME.textDim}/>
      </div>
    </div>
  );
};

window.CAUSES_OF_ACTION = CAUSES_OF_ACTION;
window.CauseOfActionPicker = CauseOfActionPicker;