import { Button } from "@code/ui/components/button";
import { AlertTriangle, X } from "lucide-react";
import { useState } from "react";

import type { WorkspaceState } from "@/lib/workspace/types";

export const ProjectSettingsPanel = ({
  onClose,
  workspace,
}: {
  readonly onClose: () => void;
  readonly workspace: WorkspaceState;
}) => {
  const [serverUrl, setServerUrl] = useState("https://git.openputer.com");
  const [username, setUsername] = useState("");
  const [token, setToken] = useState("");
  const handleClearOperationError = () => workspace.clearOperationError();

  return (
    <section className="absolute right-4 top-12 z-40 w-[min(92vw,360px)] border border-[#c9c5b9] bg-[#fffefa] p-4 shadow-xl">
      <div className="flex items-center justify-between">
        <h2 className="text-sm font-semibold">Project Git</h2>
        <button aria-label="Close settings" onClick={onClose} type="button">
          <X className="size-4" />
        </button>
      </div>
      <p className="mt-1 text-xs text-[#747168]">
        {workspace.projectGitConnection
          ? `${workspace.projectGitConnection.provider} · ${workspace.projectGitConnection.serverUrl}`
          : "No Git credentials attached"}
      </p>
      {workspace.operationError ? (
        <p className="mt-2 flex items-start gap-1.5 border border-red-300 bg-red-50 px-2 py-1.5 text-xs text-red-800">
          <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
          <span className="min-w-0 flex-1 leading-5">
            {workspace.operationError.message}
          </span>
          <button
            aria-label="Dismiss error"
            className="shrink-0"
            onClick={handleClearOperationError}
            type="button"
          >
            <X className="size-3.5" />
          </button>
        </p>
      ) : null}
      <div className="mt-4 flex gap-2">
        <Button
          size="sm"
          variant="outline"
          onClick={() => void workspace.authorizeGithub()}
        >
          Authorize GitHub
        </Button>
        <Button size="sm" onClick={() => void workspace.connectLinkedGithub()}>
          Use GitHub
        </Button>
      </div>
      <div className="mt-4 space-y-2 border-t border-[#e7e3d9] pt-4">
        <input
          aria-label="Gitea server URL"
          className="h-9 w-full border px-2 text-xs"
          onChange={(event) => setServerUrl(event.target.value)}
          value={serverUrl}
        />
        <input
          aria-label="Gitea username"
          className="h-9 w-full border px-2 text-xs"
          onChange={(event) => setUsername(event.target.value)}
          placeholder="Username (optional)"
          value={username}
        />
        <input
          aria-label="Gitea access token"
          className="h-9 w-full border px-2 text-xs"
          onChange={(event) => setToken(event.target.value)}
          placeholder="Personal access token"
          type="password"
          value={token}
        />
        <Button
          className="w-full"
          disabled={!token.trim()}
          size="sm"
          onClick={() => {
            void workspace.connectGitea({
              serverUrl,
              token,
              username: username || undefined,
            });
            setToken("");
          }}
        >
          Connect Gitea
        </Button>
      </div>
    </section>
  );
};
