import type { ReactElement } from 'react';

import BinanceIcon from '../../../assets/icons/binance.svg';
import GoogleIcon from '../../../assets/icons/GoogleIcon';
import MetamaskIcon from '../../../assets/icons/metamask.svg';
import NotionIcon from '../../../assets/icons/notion.svg';
import SettingsHeader from '../components/SettingsHeader';
import { useSettingsNavigation } from '../hooks/useSettingsNavigation';

interface ConnectOption {
  id: string;
  name: string;
  description: string;
  icon: ReactElement;
  comingSoon?: boolean;
  skillId?: string;
}

/**
 * Renders a connection option row with its real-time status badge.
 * Uses useSkillConnectionStatus hook for skill-backed connections.
 */
function ConnectionOptionRow({
  option,
  isFirst,
  isLast,
  onConnect,
}: {
  option: ConnectOption;
  isFirst: boolean;
  isLast: boolean;
  onConnect: (option: ConnectOption) => void;
}) {
  const isDisabled = option.comingSoon;

  const badge = option.comingSoon ? (
    <span className="px-2 py-1 text-xs font-medium rounded-full border bg-stone-500/20 text-stone-400 border-stone-500/30">
      Coming Soon
    </span>
  ) : (
    <span className="px-2 py-1 text-xs font-medium rounded-full border bg-primary-500/20 text-primary-400 border-primary-500/30">
      Connect
    </span>
  );

  return (
    <button
      onClick={() => onConnect(option)}
      disabled={isDisabled}
      className={`w-full flex items-center justify-between p-3 bg-white ${
        isLast ? '' : 'border-b border-stone-200'
      } hover:bg-stone-50 transition-all duration-200 text-left ${
        isFirst ? 'first:rounded-t-3xl' : ''
      } ${
        isLast ? 'last:rounded-b-3xl' : ''
      } focus:outline-none focus:ring-0 focus:border-inherit relative ${
        isDisabled ? 'opacity-60 cursor-not-allowed' : ''
      }`}>
      <div className="w-5 h-5 opacity-60 flex-shrink-0 mr-3 text-stone-700">{option.icon}</div>
      <div className="flex-1">
        <div className="font-medium text-sm mb-1 text-stone-900">{option.name}</div>
        <p className="opacity-70 text-xs">{option.description}</p>
      </div>
      <div className="flex items-center space-x-3">{badge}</div>
    </button>
  );
}

// ---------------------------------------------------------------------------
// Main panel
// ---------------------------------------------------------------------------

const ConnectionsPanel = () => {
  const { navigateBack, breadcrumbs } = useSettingsNavigation();

  const connectOptions: ConnectOption[] = [
    {
      id: 'google',
      name: 'Google',
      description: 'Manage emails, contacts and calendar events',
      icon: <GoogleIcon />,
      comingSoon: true,
    },
    {
      id: 'notion',
      name: 'Notion',
      description: 'Manage tasks, documents and everything else in your Notion',
      icon: <img src={NotionIcon} alt="Notion" className="w-5 h-5" />,
      comingSoon: true,
    },
    {
      id: 'wallet',
      name: 'Web3 Wallet',
      description: 'Trade the trenches in a safe and secure way.',
      icon: <img src={MetamaskIcon} alt="Metamask" className="w-5 h-5" />,
      comingSoon: true,
    },
    {
      id: 'exchange',
      name: 'Crypto Trading Exchanges',
      description: 'Connect and make trades with deep insights.',
      icon: <img src={BinanceIcon} alt="Binance" className="w-5 h-5" />,
      comingSoon: true,
    },
  ];

  const handleConnect = (option: ConnectOption) => {
    // TODO(connections): replace these early returns with the real connect flow.
    // When `option.comingSoon` is false or `option.skillId` is wired, this should
    // open the connection modal, route, or dispatch the connect action.
    if (option.comingSoon) return;
    if (option.skillId) return;
  };

  return (
    <div>
      <SettingsHeader
        title="Connections"
        showBackButton={true}
        onBack={navigateBack}
        breadcrumbs={breadcrumbs}
      />

      <div>
        <div className="p-4 space-y-4">
          {/* Connection Options */}
          <div>
            {connectOptions.map((option, index) => (
              <ConnectionOptionRow
                key={option.id}
                option={option}
                isFirst={index === 0}
                isLast={index === connectOptions.length - 1}
                onConnect={handleConnect}
              />
            ))}
          </div>

          {/* Security notice */}
          <div className="p-4 bg-blue-50 border border-blue-200 rounded-xl">
            <div className="flex items-start space-x-2">
              <svg
                className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <div>
                <p className="font-medium text-blue-700 text-sm">Privacy & Security</p>
                <p className="text-blue-600 text-xs mt-1">
                  All data and credentials are stored locally with zero-data retention policy. Your
                  information is encrypted and never shared with third parties.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ConnectionsPanel;
