import React, { useState, useEffect, useCallback } from 'react';
import { toast } from 'sonner';
import { Building2, Eye, EyeOff, ExternalLink, Link2Off, Loader2, RefreshCw } from 'lucide-react';
import { api } from '@/api';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { SectionCard } from './dataShared';

function TokenInput({ value, onChange, disabled }) {
  const [show, setShow] = useState(false);
  const tail = value.slice(-4);
  return (
    <div className="flex-1 space-y-1">
      <div className="relative">
        <Input
          value={value}
          onChange={onChange}
          type={show ? 'text' : 'password'}
          placeholder="Paste SimpleFIN setup token…"
          className="font-mono text-xs pr-8"
          disabled={disabled}
          autoComplete="off"
        />
        {value && (
          <button
            type="button"
            tabIndex={-1}
            onClick={() => setShow(v => !v)}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
          >
            {show ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
          </button>
        )}
      </div>
      {value && !show && (
        <p className="text-[11px] text-muted-foreground font-mono pl-0.5 select-none">
          ···{tail}
        </p>
      )}
    </div>
  );
}

export default function BankSyncSection({ onConnectionChange }) {
  const [enabled, setEnabled]         = useState(null);
  const [connections, setConnections] = useState([]);
  const [loadError, setLoadError]     = useState('');
  const [setupToken, setSetupToken]   = useState('');
  const [connecting, setConnecting]   = useState(false);
  const [syncing, setSyncing]         = useState(null);
  const [disconnectTarget, setDisconnectTarget] = useState(null);
  const [disconnecting, setDisconnecting]       = useState(false);

  const load = useCallback(async () => {
    setLoadError('');
    try {
      const [status, sources] = await Promise.all([
        api.simplefinStatus(),
        api.dataSources({ type: 'provider_sync' }),
      ]);
      setEnabled(status.enabled);
      const conns = Array.isArray(sources) ? sources.filter(s => s.provider === 'simplefin') : [];
      setConnections(conns);
      onConnectionChange?.(conns[0] || null);
    } catch (err) {
      setEnabled(false);
      setLoadError(err.message || 'Failed to load bank sync status');
    }
  }, [onConnectionChange]);

  useEffect(() => { load(); }, [load]);

  const handleConnect = async () => {
    const token = setupToken.trim();
    if (!token) { toast.error('Paste your SimpleFIN setup token first.'); return; }
    setConnecting(true);
    try {
      const result = await api.connectSimplefin(token);
      toast.success(`Connected — ${result.accountsUpserted} account(s), ${result.transactionsNew} new transaction(s).`);
      setSetupToken('');
      await load();
    } catch (err) {
      toast.error(err.message || 'Failed to connect SimpleFIN');
    } finally {
      setConnecting(false);
    }
  };

  const handleSync = async (id) => {
    setSyncing(id);
    try {
      const result = await api.syncDataSource(id);
      toast.success(`Synced — ${result.transactionsNew} new transaction(s).`);
      await load();
    } catch (err) {
      toast.error(err.message || 'Sync failed');
      await load();
    } finally {
      setSyncing(null);
    }
  };

  const handleDisconnect = async () => {
    if (!disconnectTarget) return;
    setDisconnecting(true);
    try {
      await api.deleteDataSource(disconnectTarget.id);
      toast.success('SimpleFIN disconnected.');
      setDisconnectTarget(null);
      await load();
    } catch (err) {
      toast.error(err.message || 'Failed to disconnect');
    } finally {
      setDisconnecting(false);
    }
  };

  function fmtDate(iso) {
    if (!iso) return '—';
    return new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' });
  }

  if (enabled === null) {
    return (
      <SectionCard title="Bank Sync">
        <div className="px-6 py-6 flex items-center gap-2 text-sm text-muted-foreground">
          <Loader2 className="h-4 w-4 animate-spin" />
          Loading…
        </div>
      </SectionCard>
    );
  }

  return (
    <>
      <SectionCard title="Bank Sync" subtitle="Connect your SimpleFIN Bridge to sync read-only bank transactions.">
        {!enabled ? (
          <div className="px-6 py-5 text-sm text-muted-foreground">
            Bank sync is not enabled on this server. Ask your administrator to enable it in the Admin panel.
          </div>
        ) : (
          <>
            {loadError && (
              <div className="px-6 py-3 text-sm text-destructive">{loadError}</div>
            )}

            {connections.length > 0 && connections.map(conn => (
              <div key={conn.id} className="px-6 py-4 space-y-3">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex items-center gap-3 min-w-0">
                    <Building2 className="h-5 w-5 shrink-0 text-muted-foreground" />
                    <div className="min-w-0">
                      <p className="text-sm font-medium truncate">{conn.name}</p>
                      <p className="text-xs text-muted-foreground mt-0.5">
                        {conn.account_count} account{conn.account_count !== 1 ? 's' : ''} ·{' '}
                        {conn.transaction_count} transaction{conn.transaction_count !== 1 ? 's' : ''}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    <Button
                      size="sm" variant="outline"
                      onClick={() => handleSync(conn.id)}
                      disabled={syncing === conn.id}
                      className="h-8 text-xs gap-1.5"
                    >
                      {syncing === conn.id
                        ? <><Loader2 className="h-3.5 w-3.5 animate-spin" />Syncing…</>
                        : <><RefreshCw className="h-3.5 w-3.5" />Sync Now</>}
                    </Button>
                    <Button
                      size="sm" variant="ghost"
                      onClick={() => setDisconnectTarget(conn)}
                      className="h-8 text-xs gap-1.5 text-muted-foreground hover:text-destructive"
                    >
                      <Link2Off className="h-3.5 w-3.5" />
                      Disconnect
                    </Button>
                  </div>
                </div>

                <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 text-xs">
                  <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-2">
                    <p className="text-muted-foreground">Last sync</p>
                    <p className="font-medium mt-0.5">{fmtDate(conn.last_sync_at)}</p>
                  </div>
                  <div className={cn(
                    'rounded-lg border px-3 py-2',
                    conn.last_error ? 'border-destructive/30 bg-destructive/5' : 'border-border/60 bg-muted/20',
                  )}>
                    <p className="text-muted-foreground">Status</p>
                    <p className={cn('font-medium mt-0.5', conn.last_error ? 'text-destructive' : '')}>
                      {conn.last_error ? conn.last_error : (conn.status === 'active' ? 'Active' : conn.status)}
                    </p>
                  </div>
                </div>
              </div>
            ))}

            {connections.length === 0 && (
              <div className="px-6 py-5 space-y-4">
                <div className="rounded-lg border border-border/60 bg-muted/20 p-4 text-sm text-muted-foreground">
                  <p className="font-medium text-foreground mb-1">Connect a SimpleFIN Bridge account</p>
                  <p>Paste your SimpleFIN setup token below. BillTracker only stores an encrypted access URL — no bank credentials are saved.</p>
                  <p className="mt-2">
                    Need a token?{' '}
                    <a
                      href="https://beta-bridge.simplefin.org/"
                      target="_blank"
                      rel="noreferrer"
                      className="inline-flex items-center gap-1 font-medium text-primary underline-offset-4 hover:underline"
                    >
                      Open SimpleFIN Bridge
                      <ExternalLink className="h-3 w-3" />
                    </a>
                  </p>
                </div>
                <div className="flex gap-2">
                  <TokenInput
                    value={setupToken}
                    onChange={e => setSetupToken(e.target.value)}
                    disabled={connecting}
                  />
                  <Button onClick={handleConnect} disabled={connecting || !setupToken.trim()} className="shrink-0">
                    {connecting ? <><Loader2 className="h-4 w-4 animate-spin mr-1.5" />Connecting…</> : 'Connect'}
                  </Button>
                </div>
              </div>
            )}

            {connections.length > 0 && (
              <div className="px-6 py-4 border-t border-border/50 space-y-2">
                <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
                  <p className="text-xs font-medium text-muted-foreground">Add another connection</p>
                  <a
                    href="https://beta-bridge.simplefin.org/"
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-1 text-xs font-medium text-primary underline-offset-4 hover:underline"
                  >
                    Get a SimpleFIN token
                    <ExternalLink className="h-3 w-3" />
                  </a>
                </div>
                <div className="flex gap-2">
                  <TokenInput
                    value={setupToken}
                    onChange={e => setSetupToken(e.target.value)}
                    disabled={connecting}
                  />
                  <Button size="sm" onClick={handleConnect} disabled={connecting || !setupToken.trim()} className="shrink-0">
                    {connecting ? <><Loader2 className="h-3.5 w-3.5 animate-spin mr-1" />Connecting…</> : 'Connect'}
                  </Button>
                </div>
              </div>
            )}
          </>
        )}
      </SectionCard>

      <AlertDialog open={!!disconnectTarget} onOpenChange={open => { if (!open) setDisconnectTarget(null); }}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Disconnect SimpleFIN?</AlertDialogTitle>
            <AlertDialogDescription>
              This removes the connection and deletes synced accounts. Previously synced transactions
              are kept but will no longer be associated with a data source.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={disconnecting}>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={handleDisconnect} disabled={disconnecting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
              {disconnecting ? 'Disconnecting…' : 'Disconnect'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}