import { useState } from "react";
import { data, Form, Link, redirect, useActionData, useLoaderData } from "react-router";
import type { ActionFunctionArgs, LoaderFunctionArgs } from "react-router";
import { getArtistById, getArtistLinks, getIpAddress, updateArtist } from "~/lib/db.server";

export async function loader({ params }: LoaderFunctionArgs) {
  const artist = getArtistById(params.uuid!);
  if (!artist) throw data("Not found", { status: 404 });
  const links = getArtistLinks(artist.id);
  return { artist, links };
}

export async function action({ params, request }: ActionFunctionArgs) {
  const artist = getArtistById(params.uuid!);
  if (!artist) throw data("Not found", { status: 404 });

  const fd = await request.formData();
  const name = (fd.get("name") as string).trim();
  const slug = (fd.get("slug") as string).trim();
  const message = (fd.get("message") as string).trim();
  const links: { label: string; url: string }[] = JSON.parse(
    (fd.get("links") as string) || "[]"
  );

  const errors: Record<string, string> = {};
  if (!name) errors.name = "必須です";
  if (!slug) errors.slug = "必須です";
  if (!message) errors.message = "必須です";
  if (Object.keys(errors).length > 0) return { errors };

  try {
    updateArtist(artist.id, { slug, name, links, message, ip_address: getIpAddress(request) });
  } catch (e) {
    if (e instanceof Error && e.message.includes("UNIQUE constraint failed: artists.slug")) {
      return { errors: { slug: "このslugは既に使用されています" } };
    }
    throw e;
  }
  return redirect(`/artists/of/${artist.id}`);
}

function toSlug(s: string) {
  return s.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^\w぀-ヿ一-鿿＀-￯-]/g, "").replace(/^-+|-+$/g, "");
}

export default function ArtistEdit() {
  const { artist, links: initLinks } = useLoaderData<typeof loader>();
  const actionData = useActionData<typeof action>();
  const errors = actionData?.errors ?? {};

  const [name, setName] = useState(artist.name);
  const [slug, setSlug] = useState(artist.slug);
  const [slugManual, setSlugManual] = useState(true);
  const [links, setLinks] = useState(initLinks.map((l) => ({ label: l.label, url: l.url })));

  return (
    <main>
      <div className="page-header">
        <Link to={`/artists/of/${artist.id}`} className="back">←</Link>
        <h1>Edit Artist</h1>
      </div>

      <Form method="post">
        <input type="hidden" name="links" value={JSON.stringify(links)} />

        <div>
          <label>名前 <span className="req">*</span></label>
          <input
            name="name"
            value={name}
            onChange={(e) => {
              setName(e.target.value);
              if (!slugManual) setSlug(toSlug(e.target.value));
            }}
          />
          {errors.name && <p className="error">{errors.name}</p>}
        </div>

        <div>
          <label>Slug <span className="req">*</span></label>
          <input
            name="slug"
            value={slug}
            onChange={(e) => { setSlugManual(true); setSlug(e.target.value); }}
            className="mono"
          />
          {errors.slug && <p className="error">{errors.slug}</p>}
        </div>

        <div>
          <label>リンク</label>
          <div className="links-form">
            {links.map((link, i) => (
              <div key={i} className="link-row">
                <input
                  className="label-input"
                  value={link.label}
                  onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))}
                  placeholder="ラベル (例: X)"
                />
                <input
                  value={link.url}
                  onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))}
                  placeholder="https://..."
                />
                <button
                  type="button"
                  className="btn-icon"
                  onClick={() => setLinks(links.filter((_, idx) => idx !== i))}
                >
                  ×
                </button>
              </div>
            ))}
          </div>
          <button
            type="button"
            className="btn-text"
            onClick={() => setLinks([...links, { label: "", url: "" }])}
          >
            + リンクを追加
          </button>
        </div>

        <div>
          <label>更新メッセージ <span className="req">*</span></label>
          <input name="message" placeholder="例: SNSリンク追加" />
          {errors.message && <p className="error">{errors.message}</p>}
        </div>

        <div className="actions">
          <button type="submit">保存</button>
          <Link to={`/artists/of/${artist.id}`} className="btn">キャンセル</Link>
        </div>
      </Form>
    </main>
  );
}