import { useState } from "react";
import { useWallet } from "@lazorkit/wallet";
<% if (styling !== 'tailwind') { %>
const styles: Record<string, React.CSSProperties> = {
  container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
  title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
  subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 1.5 },
  card: { marginTop: 16, border: '1px solid #262626', borderRadius: 12, padding: 16, background: '#171717' },
  cardTitle: { fontSize: 14, fontWeight: 500, margin: 0, color: '#fafafa' },
  cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
  button: { marginTop: 12, width: '100%', backgroundColor: '#fafafa', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
  buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#fafafa', padding: '12px 16px', borderRadius: 10, border: '1px solid #262626', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
  info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8, fontSize: 12, color: '#a3a3a3' },
  back: { marginTop: 16, fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
};
<% } %>
interface Props {
  onBack: () => void;
}

export function Recovery({ onBack }: Props) {
  const { wallet } = useWallet();
  const [copied, setCopied] = useState(false);
  const portalUrl = import.meta.env.VITE_LAZORKIT_PORTAL_URL || "https://portal.lazor.sh";

  const handleAddDevice = () => {
    const url = wallet?.smartWallet 
      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=add-device`
      : portalUrl;
    window.open(url, "_blank");
  };

  const handleManageDevices = () => {
    const url = wallet?.smartWallet 
      ? `${portalUrl}?wallet=${wallet.smartWallet}&action=manage-devices`
      : portalUrl;
    window.open(url, "_blank");
  };

  const copyAddress = () => {
    if (wallet?.smartWallet) {
      navigator.clipboard.writeText(wallet.smartWallet);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
<% if (styling === 'tailwind') { %>
    <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
      <h1 className="text-lg font-semibold">Recovery & Backup</h1>
      <p className="mt-2 text-sm text-neutral-500">
        Add backup passkeys from other devices to ensure you never lose access.
      </p>
      <div className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
        <h3 className="text-sm font-medium">Add Backup Device</h3>
        <p className="mt-1 text-xs text-neutral-500">
          Register a passkey from another phone, tablet, or computer.
        </p>
        <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-white text-black text-sm font-medium rounded-lg hover:opacity-90">
          Add Device
        </button>
      </div>
      <div className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
        <h3 className="text-sm font-medium">Manage Devices</h3>
        <p className="mt-1 text-xs text-neutral-500">
          View and remove registered passkeys.
        </p>
        <button onClick={handleManageDevices} className="mt-3 w-full py-3 bg-transparent text-white text-sm font-medium rounded-lg border border-neutral-700 hover:bg-neutral-700">
          View Devices
        </button>
      </div>
      <div className="mt-4 p-3 bg-neutral-800 rounded-lg">
        <p className="text-xs text-neutral-400">
          <strong>Wallet:</strong>{" "}
          <button onClick={copyAddress} className="font-mono hover:text-white">
            {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
          </button>
          {copied && <span className="ml-2 text-green-400">Copied!</span>}
        </p>
      </div>
      <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-black">
        ← Back
      </button>
    </div>
<% } else { %>
    <div style={styles.container}>
      <h1 style={styles.title}>Recovery & Backup</h1>
      <p style={styles.subtitle}>
        Add backup passkeys from other devices to ensure you never lose access.
      </p>
      <div style={styles.card}>
        <h3 style={styles.cardTitle}>Add Backup Device</h3>
        <p style={styles.cardDesc}>Register a passkey from another phone, tablet, or computer.</p>
        <button onClick={handleAddDevice} style={styles.button}>Add Device</button>
      </div>
      <div style={styles.card}>
        <h3 style={styles.cardTitle}>Manage Devices</h3>
        <p style={styles.cardDesc}>View and remove registered passkeys.</p>
        <button onClick={handleManageDevices} style={styles.buttonSecondary}>View Devices</button>
      </div>
      <div style={styles.info}>
        <strong>Wallet:</strong>{" "}
        <button onClick={copyAddress} style={{ fontFamily: 'monospace', background: 'none', border: 'none', cursor: 'pointer' }}>
          {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
        </button>
        {copied && <span style={{ marginLeft: 8, color: '#16a34a' }}>Copied!</span>}
      </div>
      <button onClick={onBack} style={styles.back}>← Back</button>
    </div>
<% } %>
  );
}