import { useIdentity, useAILookup, useUpload } from '@deplixo/sdk';

function App() {
  const { user } = useIdentity();
  const upload = useUpload();
  const lookup = useAILookup({
    example: {
      groups: [
        {
          label: 'Main south array',
          rows: 4,
          columns: 8,
          count: 32,
          notes: 'Rectangular grid on south-facing pitch, portrait orientation.',
        },
      ],
      totalCount: 32,
      reasoning:
        'Used the calibration ruler (panel width ≈ X m, panel length ≈ Y m) to reject internal cell lines and roof seams. Identified two rectangular arrays and multiplied rows × columns.',
      confidence: 'high',
    },
  });

  const [imageUrl, setImageUrl] = React.useState(null);
  const [imageName, setImageName] = React.useState('');
  const [uploading, setUploading] = React.useState(false);
  const [uploadError, setUploadError] = React.useState('');
  const [widthMetres, setWidthMetres] = React.useState('');
  const [widthPanels, setWidthPanels] = React.useState('');
  const [lengthMetres, setLengthMetres] = React.useState('');
  const [lengthPanels, setLengthPanels] = React.useState('');
  const [proofs, setProofs] = React.useState(null); // [A, B, C, D, E, F]
  const [analysing, setAnalysing] = React.useState(false);
  const [error, setError] = React.useState('');

  const wM = parseFloat(widthMetres);
  const wN = parseFloat(widthPanels);
  const lM = parseFloat(lengthMetres);
  const lN = parseFloat(lengthPanels);

  const widthValid = !isNaN(wM) && !isNaN(wN) && wM > 0 && wN > 0;
  const lengthValid = !isNaN(lM) && !isNaN(lN) && lM > 0 && lN > 0;

  const panelWidth = widthValid ? wM / wN : null;
  const panelLength = lengthValid ? lM / lN : null;

  const canAnalyse = imageUrl && (widthValid || lengthValid) && !analysing;

  // Fresh upload flow: open the app's upload tool, save the returned URL
  // before any analysis can start.
  const handleUploadClick = async () => {
    setUploadError('');
    setError('');
    setProofs(null);
    setUploading(true);
    try {
      const res = await upload({ accept: 'image/*' });
      if (!res) {
        // User cancelled — leave state unchanged, no error.
        return;
      }
      const url =
        res?.url ||
        res?.href ||
        (typeof res === 'string' ? res : null);
      const name = res?.name || res?.filename || '';
      if (!url) {
        throw new Error('Upload did not return a URL');
      }
      // Save the photo before analysis is allowed.
      setImageUrl(url);
      setImageName(name);
    } catch (err) {
      setImageUrl(null);
      setImageName('');
      setUploadError(
        "We couldn't save your photo. Please try uploading it again. (" +
          (err?.message || String(err)) +
          ')'
      );
    } finally {
      setUploading(false);
    }
  };

  const buildPrompt = (proofLabel, strategyLine) => {
    const lines = [];
    lines.push(`You are counting solar panels in a bird’s-eye photograph of a building roof. This is ${proofLabel} — one of six MANDATORY INDEPENDENT PROOFS. Do NOT rely on other proofs; reach your own conclusion.`);
    lines.push('');
    lines.push('CALIBRATION (authoritative — do not override):');
    if (widthValid) {
      lines.push(
        `- Panel-WIDTH direction: ${wM} m spans exactly ${wN} panel(s) → one panel is ${panelWidth.toFixed(3)} m wide.`
      );
    }
    if (lengthValid) {
      lines.push(
        `- Panel-LENGTH direction: ${lM} m spans exactly ${lN} panel(s) → one panel is ${panelLength.toFixed(3)} m long.`
      );
    }
    if (!widthValid || !lengthValid) {
      lines.push('- Only one calibration direction was supplied. Use only what is given. Do NOT assume a standard panel size.');
    }
    lines.push('');
    lines.push(`STRATEGY FOR ${proofLabel}: ${strategyLine}`);
    lines.push('');
    lines.push('RULES:');
    lines.push('1. Treat the calculated dimension(s) above as the ONLY permitted scale ruler.');
    lines.push('2. Use the ruler to reject internal cell lines, centre lines, shadows, roof seams, rails, mounting gaps, glare, dirt lines, compression artefacts, roof-sheet lines, and objects beside/under panels.');
    lines.push('3. Do not assume a visible line is a panel boundary just because it resembles one — verify against the ruler.');
    lines.push('4. Identify each distinct rectangular array/group and count rows × columns.');
    lines.push('5. Sum all groups for the total.');
    lines.push('');
    lines.push('Return: an array of groups (each with a label, rows, columns, count, and notes), the totalCount, a short reasoning string that references the ruler dimensions AND the strategy above, and confidence (low/medium/high).');
    return lines.join('\n');
  };

  const PROOFS = [
    {
      label: 'COUNT A',
      strategy:
        'Work TOP-DOWN group by group. For each rectangular array, count the number of full rows first, then columns, then multiply. Do not use any other method.',
    },
    {
      label: 'COUNT B',
      strategy:
        'Work LEFT-TO-RIGHT column by column. For each rectangular array, count the number of full columns first, then rows, then multiply. Do not use any other method.',
    },
    {
      label: 'COUNT C',
      strategy:
        'Work BY AREA. For each rectangular array, estimate its total footprint using the ruler, divide by one panel’s area (width × length, or the single available dimension applied consistently), then cross-check rows × columns. Report the cross-checked figure.',
    },
    {
      label: 'AUDIT D — full row-sum',
      strategy:
        'Perform a FULL ROW-SUM AUDIT. For every group, enumerate each individual row across the entire array (row 1, row 2, …), record how many panels sit in that specific row, and sum those per-row tallies to obtain the group total. This tests whether every row is fully populated and catches missing or partial rows the row×column shortcut can miss. Report the summed figure as the group count.',
    },
    {
      label: 'AUDIT E — perpendicular column-sum',
      strategy:
        'Perform a PERPENDICULAR COLUMN-SUM AUDIT, orthogonal to Audit D. For every group, enumerate each individual column (column 1, column 2, …), record how many panels sit in that specific column, and sum those per-column tallies to obtain the group total. If the column-sum disagrees with the row-sum for the same group, flag it in notes. Report the column-summed figure as the group count.',
    },
    {
      label: 'AUDIT F — calibrated geometric reconstruction',
      strategy:
        'Perform a CALIBRATED GEOMETRIC RECONSTRUCTION AUDIT. Using the calibration ruler, measure each array’s bounding box in metres directly from the image (long side and short side). Divide the long side by the appropriate panel dimension and the short side by the other panel dimension to derive rows and columns purely from geometry, independent of visually tracing panel edges. Multiply to get the group count and note the reconstructed bounding box in the group notes (e.g. "≈ 12.4 m × 6.6 m → 6 × 4").',
    },
  ];

  const analyse = async () => {
    if (!canAnalyse) return;
    setAnalysing(true);
    setError('');
    setProofs(null);
    try {
      const runs = await Promise.all(
        PROOFS.map((p) =>
          lookup.run([
            { type: 'text', text: buildPrompt(p.label, p.strategy) },
            { type: 'image', image: imageUrl },
          ])
        )
      );
      setProofs(runs);
    } catch (err) {
      setError('Analysis failed: ' + (err.message || String(err)));
    } finally {
      setAnalysing(false);
    }
  };

  const reset = () => {
    setImageUrl(null);
    setImageName('');
    setProofs(null);
    setError('');
    setUploadError('');
  };

  const totals = proofs ? proofs.map((r) => r?.totalCount) : [];

  // Majority across all six proofs
  const tally = {};
  totals.forEach((t) => {
    if (typeof t === 'number') tally[t] = (tally[t] || 0) + 1;
  });
  let majorityTotal = null;
  let majorityCount = 0;
  Object.entries(tally).forEach(([k, v]) => {
    if (v > majorityCount) {
      majorityCount = v;
      majorityTotal = Number(k);
    }
  });
  const allAgree = proofs && majorityCount === proofs.length;
  const strongAgree = proofs && !allAgree && majorityCount >= Math.ceil(proofs.length / 2) + 1;
  const someAgree = proofs && !allAgree && !strongAgree && majorityCount >= 2;
  const agreedTotal = (allAgree || strongAgree || someAgree) ? majorityTotal : null;

  const proofSlug = ['a', 'b', 'c', 'd', 'e', 'f'];

  return (
    <main className="app">
      <header className="hero">
        <h1>Solar Panel Counter</h1>
        <p className="sub">
          Upload a bird’s-eye view of a roof, supply a known-scale measurement, and get a
          calibrated count with six independent proofs.
        </p>
      </header>

      <section className="card">
        <h2>1 · Calibration</h2>
        <p className="hint">
          Supply at least one direction. The number of panels you state is authoritative — no
          standard panel size is ever assumed.
        </p>

        <div className="grid-2">
          <div className="calibration-block">
            <h3>Panel-width direction</h3>
            <label>
              Measurement shown in image (metres)
              <input
                data-testid="width-metres-input"
                type="number"
                step="0.001"
                min="0"
                value={widthMetres}
                onChange={(e) => setWidthMetres(e.target.value)}
                placeholder="e.g. 6.60"
              />
            </label>
            <label>
              That measurement spans exactly this many panels
              <input
                data-testid="width-panels-input"
                type="number"
                step="1"
                min="1"
                value={widthPanels}
                onChange={(e) => setWidthPanels(e.target.value)}
                placeholder="e.g. 6"
              />
            </label>
            {widthValid && (
              <div className="derived">
                <span className="derived-label">One panel width</span>
                <span className="derived-value">
                  {wM} ÷ {wN} = <strong>{panelWidth.toFixed(3)} m</strong>
                </span>
              </div>
            )}
          </div>

          <div className="calibration-block">
            <h3>Panel-length direction</h3>
            <label>
              Measurement shown in image (metres)
              <input
                data-testid="length-metres-input"
                type="number"
                step="0.001"
                min="0"
                value={lengthMetres}
                onChange={(e) => setLengthMetres(e.target.value)}
                placeholder="e.g. 8.40"
              />
            </label>
            <label>
              That measurement spans exactly this many panels
              <input
                data-testid="length-panels-input"
                type="number"
                step="1"
                min="1"
                value={lengthPanels}
                onChange={(e) => setLengthPanels(e.target.value)}
                placeholder="e.g. 4"
              />
            </label>
            {lengthValid && (
              <div className="derived">
                <span className="derived-label">One panel length</span>
                <span className="derived-value">
                  {lM} ÷ {lN} = <strong>{panelLength.toFixed(3)} m</strong>
                </span>
              </div>
            )}
          </div>
        </div>

        {!widthValid && !lengthValid && (
          <p className="muted-note">Enter at least one full pair to build the panel ruler.</p>
        )}
      </section>

      <section className="card">
        <h2>2 · Roof photo</h2>
        <div className="upload-row">
          <button
            type="button"
            className="upload-btn"
            onClick={handleUploadClick}
            disabled={uploading}
            data-testid="upload-photo-button"
          >
            {uploading
              ? 'Uploading…'
              : imageUrl
              ? 'Replace photo'
              : 'Upload photo…'}
          </button>
          {imageUrl && (
            <button className="ghost" onClick={reset} data-testid="clear-photo-button">
              Clear
            </button>
          )}
          {imageName && !uploading && (
            <span className="muted-note">{imageName}</span>
          )}
        </div>
        {uploadError && (
          <p
            role="alert"
            aria-live="assertive"
            className="error"
            data-testid="upload-error"
          >
            {uploadError}
          </p>
        )}
        {imageUrl && (
          <div className="preview" data-testid="saved-photo-preview">
            <p className="muted-note" style={{ marginTop: 0 }}>
              ✓ Photo saved and ready to analyse.
            </p>
            <img src={imageUrl} alt="Saved roof photo" />
          </div>
        )}
      </section>

      <section className="card">
        <h2>3 · Count (six independent proofs)</h2>
        <p className="hint">
          The counter runs <strong>COUNT A</strong> (rows-first), <strong>COUNT B</strong>{' '}
          (columns-first), <strong>COUNT C</strong> (area cross-check),{' '}
          <strong>AUDIT D</strong> (full row-sum), <strong>AUDIT E</strong> (perpendicular
          column-sum), and <strong>AUDIT F</strong> (calibrated geometric reconstruction)
          independently. Their totals must agree — or you know the count needs a human check.
        </p>
        <button
          className="primary"
          onClick={analyse}
          disabled={!canAnalyse}
          data-testid="analyse-button"
        >
          {analysing ? 'Running A, B, C, D, E, F…' : 'Run six proofs'}
        </button>
        {!imageUrl && <span className="muted-note inline">Upload a photo first.</span>}
        {imageUrl && !widthValid && !lengthValid && (
          <span className="muted-note inline">Add at least one calibration pair.</span>
        )}
        {error && analysing === false && imageUrl && (
          <p role="status" aria-live="polite" className="error">
            {error}
          </p>
        )}
      </section>

      {proofs && (
        <section
          className="card result-card"
          role="status"
          aria-live="polite"
          data-testid="verdict-card"
        >
          <h2>Verdict</h2>
          <div className="summary">
            <div className="total">
              <span className="total-label">
                {allAgree
                  ? 'All six proofs agree'
                  : strongAgree
                  ? `${majorityCount} of ${proofs.length} proofs agree`
                  : someAgree
                  ? `${majorityCount} of ${proofs.length} proofs agree (weak majority)`
                  : 'Proofs disagree'}
              </span>
              <span className="total-value">
                {agreedTotal != null ? agreedTotal : '—'}
              </span>
            </div>
            <span
              className={`badge ${
                allAgree ? 'badge-high' : strongAgree ? 'badge-medium' : 'badge-low'
              }`}
            >
              A={totals[0] ?? '?'} · B={totals[1] ?? '?'} · C={totals[2] ?? '?'} · D=
              {totals[3] ?? '?'} · E={totals[4] ?? '?'} · F={totals[5] ?? '?'}
            </span>
          </div>
          {!allAgree && (
            <p className="muted-note" style={{ marginTop: 12 }}>
              {strongAgree || someAgree
                ? 'Treat the majority figure as provisional and inspect the outlier proofs below.'
                : 'No majority. A human must reconcile the six proofs below.'}
            </p>
          )}
        </section>
      )}

      {proofs &&
        proofs.map((result, idx) => {
          const p = PROOFS[idx];
          const testid = `proof-${proofSlug[idx]}-card`;
          return (
            <section
              key={idx}
              className="card result-card"
              role="status"
              aria-live="polite"
              data-testid={testid}
            >
              <h2>{p.label}</h2>
              <p className="hint" style={{ marginTop: 0 }}>
                Strategy: {p.strategy}
              </p>

              <div className="summary">
                <div className="total">
                  <span className="total-label">{p.label} total</span>
                  <span className="total-value">{result?.totalCount ?? '—'}</span>
                </div>
                {result?.confidence && (
                  <span className={`badge badge-${result.confidence}`}>
                    {result.confidence} confidence
                  </span>
                )}
              </div>

              <h3>Panel ruler used</h3>
              <ul className="ruler-list">
                {widthValid && (
                  <li>
                    <strong>Width:</strong> {wM} m ÷ {wN} panels ={' '}
                    <strong>{panelWidth.toFixed(3)} m</strong> per panel
                  </li>
                )}
                {lengthValid && (
                  <li>
                    <strong>Length:</strong> {lM} m ÷ {lN} panels ={' '}
                    <strong>{panelLength.toFixed(3)} m</strong> per panel
                  </li>
                )}
              </ul>

              <h3>Arithmetic</h3>
              <table className="arith-table">
                <thead>
                  <tr>
                    <th>Group</th>
                    <th>Rows</th>
                    <th></th>
                    <th>Columns</th>
                    <th></th>
                    <th>Panels</th>
                  </tr>
                </thead>
                <tbody>
                  {(result?.groups || []).map((g, i) => (
                    <tr key={i}>
                      <td>{g.label || `Group ${i + 1}`}</td>
                      <td className="num">{g.rows ?? '—'}</td>
                      <td className="op">×</td>
                      <td className="num">{g.columns ?? '—'}</td>
                      <td className="op">=</td>
                      <td className="num strong">{g.count}</td>
                    </tr>
                  ))}
                  <tr className="total-row">
                    <td colSpan={5}>Sum</td>
                    <td className="num strong">
                      {(result?.groups || []).reduce((s, g) => s + (g.count || 0), 0)}
                    </td>
                  </tr>
                </tbody>
              </table>

              {(result?.groups || []).some((g) => g.notes) && (
                <>
                  <h3>Notes per group</h3>
                  <ul className="notes-list">
                    {(result?.groups || []).map(
                      (g, i) =>
                        g.notes && (
                          <li key={i}>
                            <strong>{g.label || `Group ${i + 1}`}:</strong> {g.notes}
                          </li>
                        )
                    )}
                  </ul>
                </>
              )}

              {result?.reasoning && (
                <>
                  <h3>Reasoning</h3>
                  <p className="reasoning">{result.reasoning}</p>
                </>
              )}
            </section>
          );
        })}

      <footer className="foot">
        <span>Signed in as {user?.name || '…'}</span>
      </footer>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);