import React, { useState, useEffect } from 'react';
import { Copy, Download, Wifi, Mail, Calendar, FolderOpen } from 'lucide-react';
import { peerAPI } from '../services/api';

function CopyButton({ text }) {
  const [copied, setCopied] = useState(false);
  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };
  return (
    <button
      onClick={handleCopy}
      className="inline-flex items-center gap-1 text-xs text-primary-600 hover:text-primary-800 transition-colors"
      title="Copy to clipboard"
    >
      <Copy className="h-3.5 w-3.5" />
      {copied ? 'Copied' : 'Copy'}
    </button>
  );
}

function InfoRow({ label, value }) {
  return (
    <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-4 py-2 border-b border-gray-100 last:border-0">
      <span className="text-sm text-gray-500 sm:w-40 shrink-0">{label}</span>
      <div className="flex items-center gap-2 min-w-0">
        <span className="text-sm font-mono text-gray-900 break-all">{value}</span>
        {value && <CopyButton text={value} />}
      </div>
    </div>
  );
}

export default function MyServices() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    peerAPI.services()
      .then(r => setData(r.data))
      .catch(() => setError('Could not load services. Please try again.'))
      .finally(() => setIsLoading(false));
  }, []);

  const downloadConfig = (filename, content) => {
    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="card text-center py-10">
        <p className="text-sm text-danger-600">{error}</p>
      </div>
    );
  }

  const wg = data?.wireguard || {};
  const email = data?.email || {};
  const caldav = data?.caldav || {};
  const files = data?.files || {};

  return (
    <div>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">My Services</h1>
        <p className="mt-1 text-gray-500 text-sm">Credentials and configuration for your personal services</p>
      </div>

      <div className="card mb-4">
        <div className="flex items-center gap-2 mb-4">
          <Wifi className="h-5 w-5 text-primary-500" />
          <h2 className="text-base font-semibold text-gray-900">WireGuard VPN</h2>
        </div>
        <InfoRow label="VPN IP" value={wg.ip || wg.allowed_ips || '—'} />
        {wg.config && (
          <div className="mt-3 flex flex-wrap gap-2">
            <button
              onClick={() => downloadConfig(`${data?.username || 'peer'}.conf`, wg.config)}
              className="inline-flex items-center gap-1.5 btn btn-secondary btn-sm text-sm"
            >
              <Download className="h-4 w-4" /> Download Config
            </button>
            <CopyButton text={wg.config} />
          </div>
        )}
        {wg.qr_code && (
          <div className="mt-4">
            <p className="text-sm text-gray-600 mb-2">Scan with the WireGuard mobile app:</p>
            <div className="inline-block p-3 bg-white border-2 border-gray-200 rounded-lg">
              <img src={wg.qr_code} alt="WireGuard QR code" className="w-48 h-48" />
            </div>
          </div>
        )}
      </div>

      <div className="card mb-4">
        <div className="flex items-center gap-2 mb-4">
          <Mail className="h-5 w-5 text-primary-500" />
          <h2 className="text-base font-semibold text-gray-900">Email</h2>
        </div>
        <InfoRow label="Address" value={email.address || '—'} />
        <InfoRow label="SMTP" value={email.smtp ? `${email.smtp.host}:${email.smtp.port}` : '—'} />
        <InfoRow label="IMAP" value={email.imap ? `${email.imap.host}:${email.imap.port}` : '—'} />
        {(email.smtp || email.imap) && (
          <p className="text-xs text-gray-400 mt-3">
            When setting up your mail client, use your dashboard username and password for authentication.
          </p>
        )}
      </div>

      <div className="card mb-4">
        <div className="flex items-center gap-2 mb-4">
          <Calendar className="h-5 w-5 text-primary-500" />
          <h2 className="text-base font-semibold text-gray-900">Calendar & Contacts</h2>
        </div>
        <InfoRow label="CalDAV URL" value={caldav.url || '—'} />
        <InfoRow label="Username" value={caldav.username || '—'} />
        {caldav.url && (
          <p className="text-xs text-gray-400 mt-3">
            Use this URL in your calendar client. Authenticate with your username and dashboard password.
          </p>
        )}
      </div>

      <div className="card mb-4">
        <div className="flex items-center gap-2 mb-4">
          <FolderOpen className="h-5 w-5 text-primary-500" />
          <h2 className="text-base font-semibold text-gray-900">Files</h2>
        </div>
        <InfoRow label="WebDAV URL" value={files.url || '—'} />
        <InfoRow label="Username" value={files.username || '—'} />
        {files.url && (
          <p className="text-xs text-gray-400 mt-3">
            Mount this URL as a network drive or use a WebDAV client. Authenticate with your username and dashboard password.
          </p>
        )}
      </div>

      <p className="text-xs text-gray-400 mt-4">
        Note: Changing your dashboard password does not update email, calendar, or files passwords.
      </p>
    </div>
  );
}