import { Show, createSignal, Match, Switch } from "solid-js";
import { useI18n } from "../providers/i18n-provider";
import { BookraCharacter } from "../components/bookra-character";
import {
  Button,
  Card,
  CardContent,
  CardTitle,
  Input,
  Textarea
} from "../components/ui";

export function ContactRoute() {
  const i18n = useI18n();
  const [name, setName] = createSignal("");
  const [email, setEmail] = createSignal("");
  const [message, setMessage] = createSignal("");
  const [submitted, setSubmitted] = createSignal(false);
  const [submitting, setSubmitting] = createSignal(false);
  const [error, setError] = createSignal("");

  const apiUrl = import.meta.env.VITE_BOOKRA_API_URL ?? "http://localhost:8080";

  const handleSubmit = async (e: Event) => {
    e.preventDefault();
    setError("");
    setSubmitting(true);

    try {
      const res = await fetch(`${apiUrl}/v1/public/contact`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: name(),
          email: email(),
          message: message(),
        }),
      });
      if (!res.ok) throw new Error("Failed to send");
      setSubmitted(true);
    } catch {
      setError(i18n.t("contact.error.body"));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div class="animate-fade-in">
      {/* Hero Section */}
      <section class="relative pt-16 pb-12 lg:pt-24 lg:pb-16 overflow-hidden">
        <div class="absolute inset-0 pointer-events-none" style={{ background: "var(--gradient-hero)" }} />
        <div class="section-container relative">
          <div class="max-w-3xl mx-auto text-center">
            <div class="flex justify-center mb-8">
              <BookraCharacter pose="headphones" size="xl" animate={true} />
            </div>
            <span class="inline-flex items-center gap-2 px-4 py-1.5 mb-6 text-sm font-medium tracking-wide text-accent bg-accent-subtle/80 rounded-full border border-accent/10 backdrop-blur-sm">
              <span class="w-2 h-2 rounded-full bg-success" />
              {i18n.locale() === 'cs' ? 'Jsme tu pro vás' : 'We are here for you'}
            </span>
            <h1 class="text-display-xl font-semibold text-ink mb-6 tracking-tight animate-slide-up">
              {i18n.t("contact.title")}
            </h1>
            <p class="text-lg lg:text-xl text-ink-muted leading-relaxed max-w-2xl mx-auto animate-slide-up" style={{ "animation-delay": "0.1s" }}>
              {i18n.t("contact.subtitle")}
            </p>
          </div>
        </div>
      </section>

      {/* Story + Form split */}
      <section class="py-16 lg:py-24 bg-canvas-subtle/30">
        <div class="section-container">
          <div class="max-w-5xl mx-auto grid lg:grid-cols-[1fr_1.2fr] gap-12 lg:gap-16 items-start">
            {/* Story side */}
            <div class="space-y-8">
              <div>
                <h2 class="text-display-sm font-semibold text-ink mb-4">
                  {i18n.t("contact.story.heading")}
                </h2>
                <div class="space-y-4 text-ink-muted leading-relaxed">
                  <p>{i18n.t("contact.story.p1")}</p>
                  <p>{i18n.t("contact.story.p2")}</p>
                </div>
              </div>

              <div class="grid sm:grid-cols-2 gap-4">
                <Card class="surface-elevated group hover:shadow-lg transition-all">
                  <CardContent class="p-5">
                    <div class="flex items-start gap-3">
                      <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center shrink-0 group-hover:bg-accent/20 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-accent">
                          <path d="M22 17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9.5A2.5 2.5 0 0 1 4.5 7h15A2.5 2.5 0 0 1 22 9.5z"/>
                          <polyline points="22 9.5 12 14 2 9.5"/>
                        </svg>
                      </div>
                      <div>
                        <h3 class="font-display font-semibold text-ink text-sm mb-1">{i18n.t("contact.info.email.title")}</h3>
                        <a href={`mailto:${i18n.t("contact.email.address")}`} class="text-accent text-sm font-medium hover:underline">
                          {i18n.t("contact.email.address")}
                        </a>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card class="surface-elevated group hover:shadow-lg transition-all">
                  <CardContent class="p-5">
                    <div class="flex items-start gap-3">
                      <div class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center shrink-0 group-hover:bg-accent/20 transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-accent">
                          <circle cx="12" cy="12" r="10"/>
                          <polyline points="12 6 12 12 16 14"/>
                        </svg>
                      </div>
                      <div>
                        <h3 class="font-display font-semibold text-ink text-sm mb-1">{i18n.t("contact.info.hours.title")}</h3>
                        <p class="text-ink-muted text-xs">{i18n.t("contact.info.hours.desc")}</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

              <div class="flex items-center gap-4 surface-elevated px-5 py-4 rounded-2xl">
                <BookraCharacter pose="main" size="sm" animate={true} />
                <p class="text-ink-muted text-sm">
                  {i18n.locale() === 'cs'
                    ? 'Odpovídáme obvykle do 24 hodin'
                    : 'We usually respond within 24 hours'}
                </p>
              </div>
            </div>

            {/* Form side */}
            <div>
              <Switch>
                <Match when={submitted()}>
                  <Card class="surface-elevated border-success/20">
                    <CardContent class="py-12">
                      <div class="flex flex-col items-center text-center">
                        <div class="relative mb-6">
                          <BookraCharacter pose="success" size="xl" animate={true} />
                        </div>
                        <h2 class="text-display-md font-semibold text-ink mb-4">
                          {i18n.t("contact.success.title")}
                        </h2>
                        <p class="text-ink-muted max-w-sm">
                          {i18n.t("contact.success.body")}
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                </Match>
                <Match when={true}>
                  <Card class="surface-elevated overflow-hidden">
                    <div class="flex items-center gap-3 p-6 border-b border-border/50 bg-canvas-subtle/30">
                      <div class="w-10 h-10 rounded-xl bg-accent/10 flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-accent">
                          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        </svg>
                      </div>
                      <CardTitle class="text-xl">{i18n.t("contact.form.title")}</CardTitle>
                    </div>
                    <CardContent class="p-6">
                      <form onSubmit={handleSubmit} class="space-y-5">
                        <Input
                          label={i18n.t("contact.form.name")}
                          type="text"
                          value={name()}
                          onInput={(e) => setName(e.currentTarget.value)}
                          required
                          autocomplete="name"
                        />
                        <Input
                          label={i18n.t("contact.form.email")}
                          type="email"
                          value={email()}
                          onInput={(e) => setEmail(e.currentTarget.value)}
                          required
                          autocomplete="email"
                        />
                        <Textarea
                          label={i18n.t("contact.form.message")}
                          value={message()}
                          onInput={(e) => setMessage(e.currentTarget.value)}
                          rows={5}
                          required
                          minLength={10}
                          placeholder={i18n.locale() === 'cs' ? "Napište nám, jak vám můžeme pomoci..." : "Tell us how we can help you..."}
                        />
                        <Show when={error()}>
                          <p class="text-sm text-danger">{error()}</p>
                        </Show>
                        <Button
                          type="submit"
                          fullWidth
                          isLoading={submitting()}
                          class="shadow-lg hover:shadow-xl transition-all"
                        >
                          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
                            <line x1="22" y1="2" x2="11" y2="13"/>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                          </svg>
                          {i18n.t("contact.form.submit")}
                        </Button>
                      </form>
                    </CardContent>
                  </Card>
                </Match>
              </Switch>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
