"use client";

import { useState } from "react";
import Link from "next/link";
import { api } from "@/lib/api";
import { useToast } from "@/lib/toast";
import { useI18n } from "@/lib/i18n";
import type { ServiceItem } from "@/lib/types";

export default function ServicesClient({ services }: { services: ServiceItem[] }) {
  const { toast } = useToast();
  const { t } = useI18n();
  const [form, setForm] = useState<Record<string, { name: string; email: string; message: string }>>({});

  const submit = async (serviceId: string) => {
    const f = form[serviceId];
    if (!f?.name || !f?.email || !f?.message) return;
    try {
      await api.submitServiceLead(serviceId, f);
      toast(t.services.leadOk, "success");
    } catch {
      toast(t.services.leadFail, "error");
    }
  };

  return (
    <div className="community-page">
      <div className="container">
        <nav className="detail-nav"><Link href="/">{t.common.backHome}</Link></nav>
        <div className="section-header reveal">
          <span className="section-tag">{t.services.tag}</span>
          <h1>{t.services.title}</h1>
          <p>{t.services.subtitle}</p>
        </div>
        <div className="join-grid">
          {services.map((s) => (
            <div key={s.id} className="join-card reveal">
              <h3>{s.emoji} {s.title}</h3>
              <p>{s.description}</p>
              <p><strong>{s.price}</strong> · {s.provider}</p>
              <input placeholder={t.services.name} value={form[s.id]?.name || ""} onChange={(e) => setForm({ ...form, [s.id]: { ...form[s.id], name: e.target.value, email: form[s.id]?.email || "", message: form[s.id]?.message || "" } })} />
              <input type="email" placeholder={t.services.email} value={form[s.id]?.email || ""} onChange={(e) => setForm({ ...form, [s.id]: { ...form[s.id], email: e.target.value, name: form[s.id]?.name || "", message: form[s.id]?.message || "" } })} />
              <textarea rows={3} placeholder={t.services.message} value={form[s.id]?.message || ""} onChange={(e) => setForm({ ...form, [s.id]: { ...form[s.id], message: e.target.value, name: form[s.id]?.name || "", email: form[s.id]?.email || "" } })} />
              <button type="button" className="btn btn-primary btn-sm" onClick={() => submit(s.id)}>{t.services.inquire}</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}