import { A, useParams } from "@solidjs/router";
import { createMemo, createResource, Show } from "solid-js";

const API = "";

type Job = {
  id: string;
  title?: string;
  description?: string;
  requiredSkills?: string[];
  required_skills?: string[];
  experienceLevel?: string;
  experience_level?: string;
  status?: string;
  clientName?: string;
  client_name?: string;
  companyName?: string;
  company_name?: string;
  location?: string;
  hourlyRateMin?: number;
  hourlyRateMax?: number;
  hourly_rate_min?: number;
  hourly_rate_max?: number;
  availability?: string;
  durationDays?: number;
  duration_days?: number;
};

async function fetchJob(id: string): Promise<Job | null> {
  try {
    const res = await fetch(`${API}/api/admin/jobs/${id}`);
    if (!res.ok) return null;
    const data = await res.json();
    return data.job || data;
  } catch {
    return null;
  }
}

export default function JobDetailPage() {
  const params = useParams();
  const [job] = createResource(() => params.id, fetchJob);

  const skills = createMemo(() => job()?.requiredSkills || job()?.required_skills || []);
  const client = createMemo(
    () =>
      job()?.clientName || job()?.client_name || job()?.companyName || job()?.company_name || "—"
  );
  const exp = createMemo(() => job()?.experienceLevel || job()?.experience_level || "—");
  const rateMin = createMemo(() => job()?.hourlyRateMin ?? job()?.hourly_rate_min);
  const rateMax = createMemo(() => job()?.hourlyRateMax ?? job()?.hourly_rate_max);
  const duration = createMemo(() => job()?.durationDays ?? job()?.duration_days);

  return (
    <div class="flex flex-col -mx-6 -mt-6 min-h-full">
      <div class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
        <div>
          <h1 class="text-xl font-semibold text-gray-900">Job Management</h1>
          <p class="text-sm text-gray-500 mt-0.5">
            Review one live backend job in the same detail-first style as other admin modules.
          </p>
        </div>
        <A
          class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors"
          href="/admin/jobs"
        >
          Back to Jobs
        </A>
      </div>
      <div class="p-6 flex-1">
        <Show when={job.loading}>
          <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
            <p class="notice">Loading job...</p>
          </div>
        </Show>

        <Show when={!job.loading && !job()}>
          <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
            <p class="notice">Job not found.</p>
          </div>
        </Show>

        <Show when={job()}>
          <section class="rounded-xl border border-gray-200 bg-white shadow-sm">
            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <p class="hint">Title</p>
                <p style="margin:6px 0 0;font-weight:700;color:#0f172a">{job()!.title || "—"}</p>
              </div>
              <div>
                <p class="hint">Status</p>
                <p style="margin:6px 0 0;color:#334155">{job()!.status || "—"}</p>
              </div>
              <div>
                <p class="hint">Client</p>
                <p style="margin:6px 0 0;color:#334155">{client()}</p>
              </div>
              <div>
                <p class="hint">Experience</p>
                <p style="margin:6px 0 0;color:#334155">{exp()}</p>
              </div>
              <div>
                <p class="hint">Rate</p>
                <p style="margin:6px 0 0;color:#334155">
                  {rateMin() != null ? `₹${rateMin()} - ₹${rateMax() ?? rateMin()}` : "—"}
                </p>
              </div>
              <div>
                <p class="hint">Location</p>
                <p style="margin:6px 0 0;color:#334155">{job()!.location || "—"}</p>
              </div>
              <div>
                <p class="hint">Availability</p>
                <p style="margin:6px 0 0;color:#334155">{job()!.availability || "—"}</p>
              </div>
              <div>
                <p class="hint">Duration</p>
                <p style="margin:6px 0 0;color:#334155">
                  {duration() != null ? `${duration()} days` : "—"}
                </p>
              </div>
              <div style="grid-column:1/-1">
                <p class="hint">Required Skills</p>
                <p style="margin:6px 0 0;color:#334155">
                  {skills().length > 0 ? skills().join(", ") : "—"}
                </p>
              </div>
            </div>
            <div style="margin-top:18px">
              <p class="hint">Description</p>
              <p style="margin:6px 0 0;color:#334155;white-space:pre-wrap">
                {job()!.description || "—"}
              </p>
            </div>
          </section>
        </Show>
      </div>
    </div>
  );
}
