import React from 'react';
import { ASSISTANT_BRAND_NAME } from '../constants';

type AssistantDisabledGateProps = {
  onOpenSettings: () => void;
};

const AssistantDisabledGate: React.FC<AssistantDisabledGateProps> = ({ onOpenSettings }) => {
  return (
    <div className="flex flex-col flex-1 items-center justify-center px-6 py-8">
      <div className="max-w-xl w-full bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-lg px-8 py-10 text-center space-y-6">
        <div className="inline-flex items-center justify-center w-14 h-14 rounded-full bg-blue-50 text-blue-600 dark:bg-blue-900/40 dark:text-blue-200 mx-auto">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.75a3 3 0 013 3v.75h.75A2.25 2.25 0 0118 12.75v4.5A2.25 2.25 0 0115.75 19.5H8.25A2.25 2.25 0 016 17.25v-4.5A2.25 2.25 0 018.25 10.5H9v-.75a3 3 0 013-3zm0 0V5.25m0 1.5a3 3 0 00-3 3v.75h6v-.75a3 3 0 00-3-3z" />
          </svg>
        </div>
        <div className="space-y-3">
          <h1 className="text-2xl font-semibold text-gray-900 dark:text-gray-100">{`Enable ${ASSISTANT_BRAND_NAME}`}</h1>
          <p className="text-base text-gray-600 dark:text-gray-300">
            {`Turn on ${ASSISTANT_BRAND_NAME} to send prompts and share the site context our AI needs. You can adjust log reads, write approvals, and other safeguards from the Settings panel.`}
          </p>
        </div>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2">
          <button
            type="button"
            onClick={onOpenSettings}
            className="w-full sm:w-auto px-5 py-2.5 text-sm font-medium rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 transition"
          >
            Open Plugin Settings
          </button>
        </div>
      </div>
    </div>
  );
};

export default AssistantDisabledGate;