import { useState } from "react";
import { useStore } from "../state/store";
import { ConnectionForm } from "./ConnectionForm";
import { DerezLogoLink } from "./DerezLogo";
import { EditIcon, TrashIcon } from "./Icons";

export function ConfigScreen() {
  const config = useStore((s) => s.config);
  const saveConnection = useStore((s) => s.saveConnection);
  const removeConnection = useStore((s) => s.removeConnection);
  const setActiveConnection = useStore((s) => s.setActiveConnection);

  const [editingId, setEditingId] = useState<string | null>(null);

  return (
    <div className="screen">
      <div className="card">
        <div style={{ marginBottom: 18 }}>
          <DerezLogoLink height={30} />
        </div>
        <h1>Connect to your Hermes</h1>
        <p className="lead">
          Point this app at your Hermes <strong>API Server</strong> (the OpenAI-compatible endpoint),
          not the dashboard. It authenticates with your <code>API_SERVER_KEY</code>.
        </p>

        <ConnectionForm onSave={saveConnection} />

        {config.connections.length > 0 && (
          <div className="section" style={{ marginTop: 24, marginBottom: 0 }}>
            <h3>Saved connections</h3>
            {config.connections.map((c) => (
              <div key={c.id}>
                <div className="kv">
                  <span
                    className="link-btn"
                    style={{ cursor: "pointer" }}
                    onClick={() => setActiveConnection(c.id)}
                  >
                    {c.name}
                    {c.profile ? ` · ${c.profile}` : ""}
                  </span>
                  <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    {c.sameOrigin ? "same origin" : c.baseUrl}
                    <button
                      className={`icon-btn ${editingId === c.id ? "active" : ""}`}
                      title="Edit"
                      onClick={() => setEditingId(editingId === c.id ? null : c.id)}
                    >
                      <EditIcon width={15} height={15} />
                    </button>
                    <button className="icon-btn" title="Remove" onClick={() => removeConnection(c.id)}>
                      <TrashIcon width={15} height={15} />
                    </button>
                  </span>
                </div>
                {editingId === c.id && (
                  <div style={{ margin: "10px 0 18px" }}>
                    <ConnectionForm
                      initial={c}
                      onSave={async (conn) => {
                        await saveConnection(conn);
                        setEditingId(null);
                      }}
                      onCancel={() => setEditingId(null)}
                      saveLabel="Save changes"
                    />
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}