import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useSettings } from '../contexts/SettingsContext.jsx';
import { HelpIcon } from '../icons';

const Dashboard = () => {
  const navigate = useNavigate();
  const { options, publicUrl } = useSettings();

  // Check readiness from live options state — avoids stale localized config
  const isReady = Boolean(
    options.spreadsheet_url &&
    options.sheet_tab &&
    options.credentials &&
    Number(options.setup_step) >= 5
  );

  return (
    <div className="ssgs-dashboard__tab active bounceInLeft">
      <div className="ssgs-admin">
        <div className="ssgs-welcome">
          <div className="ssgs-welcome__left">
            <figure className="media float-left">
              <img src={`${publicUrl}/images/sync.svg`} alt="Sync Logo" />
            </figure>

            <div className="text">
              <h3 className="sub-title">
                {isReady ? (
                  <>
                    Congratulations{' '}
                    <img src={`${publicUrl}/images/congratulation.svg`} alt="Congratulation" />
                  </>
                ) : (
                  'Setup is not complete'
                )}
              </h3>
              <h2 className="title">
                {isReady ? 'Your orders are syncing' : 'Your orders are NOT syncing!'}
              </h2>
              {isReady ? (
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href={options.spreadsheet_url}
                  className="ssgs-btn"
                >
                  View orders on Google Sheet
                </a>
              ) : (
                <button
                  onClick={() => navigate('/setup')}
                  className="ssgs-btn"
                >
                  Complete setup
                </button>
              )}
            </div>
          </div>

          <div className="ssgs-welcome__right">
            {/* <p>
              <span className="ssgs-badge aliceblue flex-button">
                <span className="flex-button">
                  <svg version="1.1" viewBox="0 0 512 512" style={{ width: '22px' }}>
                    <path fill="#464655" d="M509.435,448.962L271.75,44.367c-7.076-12.045-24.424-12.045-31.5,0L2.565,448.962c-7.194,12.245,1.595,27.705,15.75,27.705h475.368C507.839,476.666,516.629,461.207,509.435,448.962z" />
                    <path fill="#FFDC64" d="M252.195,93.738L53.788,431.474c-2.57,4.374,0.585,9.885,5.658,9.885h393.11c5.073,0,8.228-5.511,5.658-9.885L259.805,93.738C258.099,90.834,253.901,90.834,252.195,93.738z" />
                  </svg>
                </span>
              </span>
            </p> */}
          </div>
        </div>
      </div>

      <div className="ssgs-admin">
        <div className="ssgs-change-setup">
          <div className="ssgs-row">
            <div className="ssgs-column">
              <div className="form-group">
                <label htmlFor="google_spreadsheet_url" className="title title-secondary">
                  Google Sheet URL{' '}
                  <span className="ssgs-tooltip bottom">
                    <HelpIcon />
                    <span>
                      <img src={`${publicUrl}/images/tooltip/url.jpg`} alt="Tooltip URL" />
                    </span>
                  </span>
                </label>
                <input
                  type="url"
                  name="google_spreadsheet_url"
                  readOnly
                  value={options.spreadsheet_url || ''}
                  className="ssgs-input"
                  placeholder="Enter your google sheet URL"
                />
              </div>
            </div>

            <div className="ssgs-column">
              <div className="form-group">
                <label htmlFor="sheet_tab_name" className="title title-secondary">
                  Sheet tab name{' '}
                  <span className="ssgs-tooltip left bottom">
                    <HelpIcon />
                    <span>
                      <img src={`${publicUrl}/images/tooltip/step2_enter-sheet-tab-name.png`} alt="Tooltip Tab" />
                    </span>
                  </span>
                </label>
                <input
                  type="text"
                  readOnly
                  value={options.sheet_tab || 'Sheet1'}
                  className="ssgs-input"
                  placeholder="Enter your google sheet Name"
                />
              </div>
            </div>
          </div>

          <div className="form-group mb-0 text-center">
            <button
              type="button"
              className="ssgs-btn border"
              // Credentials are already set, so changing the setup starts at the sheet URL step.
              onClick={() => navigate('/setup', { state: { startStep: 2 } })}
            >
              Change setup
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;