import { useState } from "react";
import { syncImportedRefs } from "~/fns/import-sync";
import { useAction } from "~/hooks/use-action";
import { Panel } from "~/ui/Panel";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";

export function ImportSyncPanel({ owner, repo, sourceUrl }: { owner: string; repo: string; sourceUrl: string }) {
  const sync = useAction(syncImportedRefs);
  const [summary, setSummary] = useState<string | null>(null);
  return (
    <Panel title="Import source">
      <div className="space-y-3 p-5">
        <ErrorBanner message={sync.error} />
        <p className="text-sm text-kumo-subtle">
          Imported from <span className="font-mono text-kumo-default">{sourceUrl}</span>. Syncing copies branches and
          tags that exist there but not here; existing refs are left untouched.
        </p>
        {summary ? <p className="text-sm text-kumo-default">{summary}</p> : null}
        <Button
          pending={sync.pending}
          onClick={async () => {
            const result = await sync.run({ data: { owner, repo } });
            if (!result) return;
            const parts = [`${result.created} refs created`];
            if (result.rejected.length > 0) parts.push(`${result.rejected.length} rejected`);
            if (result.skipped > 0) parts.push(`${result.skipped} skipped (limit reached)`);
            setSummary(parts.join(", "));
          }}
        >
          Sync branches &amp; tags
        </Button>
      </div>
    </Panel>
  );
}