'use client';

import React, { useEffect } from 'react';
import { formatLocalDate } from '../utils/date';
import { ProviderIcon } from '../utils/provider';

type ConnectedAccount = {
  name?: string;
  url?: string | null;
  handle?: string | null;
  observedAt?: string | null;
};

const formatProviderName = (name?: string) => {
  const n = (name || '').trim();
  if (!n) return '';
  const lower = n.toLowerCase();
  if (lower === 'so' || lower === 'stack_overflow') return 'Stack Overflow';
  return n.charAt(0).toUpperCase() + n.slice(1);
};

type ConnectedPlatformsProps = {
  accounts?: ConnectedAccount[]
  authenticity?: { label?: string; description?: string; oauth_connected?: string[]; mismatches?: Array<{ provider?: string; detail?: string }> }
  className?: string
  layoutVariant?: 'grid' | 'column'
}

const ConnectedPlatforms = ({ accounts, authenticity, className, layoutVariant = 'grid' }: ConnectedPlatformsProps) => {
  const list = Array.isArray(accounts) ? accounts : [];
  useEffect(() => {
    const flash = () => {
      const hash = typeof window !== 'undefined' ? window.location.hash : '';
      if (!hash) return;
      const id = hash.startsWith('#') ? hash.slice(1) : hash;
      const el = document.getElementById(id) as HTMLElement | null;
      if (!el) return;
      const originalBg = el.style.backgroundColor;
      el.style.transition = 'background-color 300ms ease';
      el.style.backgroundColor = 'rgba(2, 163, 137, 0.14)';
      // Ensure visibility after tab switch
      try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch {}
      setTimeout(() => {
        el.style.backgroundColor = originalBg || '';
      }, 1200);
    };
    flash();
    window.addEventListener('hashchange', flash);
    return () => window.removeEventListener('hashchange', flash);
  }, []);
  if (list.length === 0) return null;
  const listClass =
    layoutVariant === 'column'
      ? 'flex flex-col gap-3'
      : 'grid grid-cols-1 sm:grid-cols-2 gap-3'

  return (
    <div className={`pt-8 ${className || ''}`}>
      {(() => {
        const label = (authenticity?.label || '').toLowerCase();
        const isCritical = label === 'likely inauthentic';
        const isSuspicious = label === 'suspicious';
        const displayLabel = isSuspicious ? 'Warning' : label
        if (!label) return null;
        return (
          <div className={"mb-4 rounded-md border p-3"} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
            <div className="flex items-start gap-2">
              <span className="text-sm font-semibold" style={{ color: isCritical ? '#B00020' : isSuspicious ? '#9f580a' : 'var(--text-main)' }}>
                {displayLabel}
              </span>
            </div>
            {authenticity?.description ? (
              <div className={'text-xs mt-1'} style={{ color: 'var(--text-secondary)' }}>{authenticity.description}</div>
            ) : null}
            {Array.isArray(authenticity?.oauth_connected) && authenticity!.oauth_connected!.length > 0 ? (
              <div className="mt-3 flex flex-wrap gap-2">
                {authenticity!.oauth_connected!.map((p, i) => (
                  <span key={`${p}-${i}`} className="inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium border" style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', color: 'var(--text-secondary)' }}>
                    <span className="text-sm" style={{ color: 'var(--text-main)' }}><ProviderIcon name={p} /></span>
                    <span style={{ color: 'var(--text-main)' }}>{formatProviderName(p)}</span>
                  </span>
                ))}
              </div>
            ) : null}
            {Array.isArray(authenticity?.mismatches) && authenticity!.mismatches!.length > 0 ? (
              <div className="mt-3 rounded-md border p-3" style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
                <div className="text-sm font-semibold" style={{ color: 'var(--text-main)' }}>Observed Identity Mismatches</div>
                <ul className="mt-2 space-y-2">
                  {authenticity!.mismatches!.map((m, idx) => (
                    <li key={idx} className="flex items-start gap-2 text-xs" style={{ color: 'var(--text-secondary)' }}>
                      <span className="text-sm" style={{ color: 'var(--text-main)' }}><ProviderIcon name={m.provider} /></span>
                      <span>
                        <span className="font-medium" style={{ color: 'var(--text-main)' }}>{formatProviderName(m.provider)}</span>
                        {m.detail ? `: ${m.detail}` : ''}
                      </span>
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}
          </div>
        );
      })()}
      <h4 className={'text-lg font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Sources (Connected or Linked)</h4>
      <div className={listClass}>
        {list.map((acct, idx) => (
          <div key={idx} className={'rounded-md p-3 border'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)' }}>
            <div className="flex items-center justify-between gap-3">
              <div className="flex items-center gap-3 min-w-0">
                <div className={'text-lg'} style={{ color: 'var(--text-main)' }}>
                  <ProviderIcon name={acct.name} />
                </div>
                <div className={'text-sm font-medium truncate'} style={{ color: 'var(--text-main)' }}>{acct.name}</div>
              </div>
              {acct.observedAt ? (
                <div className={'text-xs whitespace-nowrap'} style={{ color: 'var(--text-secondary)' }}>
                  <span style={{ color: 'var(--text-main)' }}>Observed At:</span> {formatLocalDate(acct.observedAt)}
                </div>
              ) : <div />}
            </div>
            <div className={'text-xs mt-2 truncate'} style={{ color: 'var(--text-secondary)' }}>
              {acct.url ? (
                <a href={acct.url} target="_blank" rel="noopener noreferrer" className={'font-medium underline underline-offset-2'} style={{ color: 'var(--text-secondary)' }}>
                  {acct.handle || acct.url}
                </a>
              ) : (
                <span className={'opacity-80'}>Not connected</span>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ConnectedPlatforms;