import { A, useParams } from '@solidjs/router';
import { For, createMemo, createResource, Show } from 'solid-js';
import AdminShell from '~/components/AdminShell';

const API = '/api/gateway';

type Photographer = {
  id: string;
  name?: string;
  full_name?: string;
  email?: string;
  phone?: string;
  status?: string;
  created_at?: string;
  createdAt?: string;
  city?: string;
  state?: string;
  experience?: string;
  portfolio_url?: string;
  phoneNumber?: string;
  location?: string;
  gender?: string;
  availability?: string;
  permanentAddress?: string;
  hometown?: string;
  pincode?: string;
  languages?: Array<{ language?: string; proficiency?: string }>;
};

async function fetchPhotographer(id: string): Promise<Photographer | null> {
  try {
    const res = await fetch(`${API}/api/admin/users/${id}`);
    if (res.ok) return res.json();
    const fallback = await fetch(`${API}/api/users/${id}`);
    if (fallback.ok) return fallback.json();
    const photographerRes = await fetch(`${API}/api/photographers/${id}`);
    if (!photographerRes.ok) return null;
    return photographerRes.json();
  } catch {
    return null;
  }
}

export default function PhotographerDetailPage() {
  const params = useParams();
  const [profile] = createResource(() => params.id, fetchPhotographer);

  const name = createMemo(() => profile()?.name || profile()?.full_name || 'Photographer');
  const created = createMemo(() => profile()?.createdAt || profile()?.created_at || '');

  return (
    <AdminShell>
      <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">Photographer Detail</h1>
          <p class="text-sm text-gray-500 mt-0.5">View profile snapshot and account metadata for one photographer.</p>
        </div>
        <div class="flex items-center gap-2">
          <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/photographer">Back to Photographer List</A>
          <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/users/details/${params.id}`}>Open User Detail</A>
        </div>
      </div>
      <div class="p-6 flex-1">
      <Show when={profile.loading}>
        <div class="rounded-xl border border-gray-200 bg-white shadow-sm"><p class="notice">Loading photographer...</p></div>
      </Show>
      <Show when={!profile.loading && !profile()}>
        <div class="rounded-xl border border-gray-200 bg-white shadow-sm"><p class="notice">Photographer not found.</p></div>
      </Show>

      <Show when={profile()}>
        <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 class="kv-item">
              <p class="kv-label">Name</p>
              <p class="kv-value">{name()}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Email</p>
              <p class="kv-value">{profile()!.email || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Phone</p>
              <p class="kv-value">{profile()!.phone || profile()!.phoneNumber || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Location</p>
              <p class="kv-value">{profile()!.location || [profile()!.city, profile()!.state].filter(Boolean).join(', ') || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Gender</p>
              <p class="kv-value">{profile()!.gender || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Experience</p>
              <p class="kv-value">{profile()!.experience || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Availability</p>
              <p class="kv-value">{profile()!.availability || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Permanent Address</p>
              <p class="kv-value">{profile()!.permanentAddress || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Hometown</p>
              <p class="kv-value">{profile()!.hometown || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Pincode</p>
              <p class="kv-value">{profile()!.pincode || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Status</p>
              <p class="kv-value">{profile()!.status || '—'}</p>
            </div>
            <div class="kv-item">
              <p class="kv-label">Created</p>
              <p class="kv-value">{created() ? new Date(created()).toLocaleString() : '—'}</p>
            </div>
            <div class="kv-item" style="grid-column:1 / -1">
              <p class="kv-label">Portfolio</p>
              <p class="kv-value">{profile()!.portfolio_url || '—'}</p>
            </div>
            <Show when={profile()!.languages && profile()!.languages!.length > 0}>
              <div class="kv-item" style="grid-column:1 / -1">
                <p class="kv-label">Languages</p>
                <ul class="notice" style="margin:8px 0 0;padding-left:18px">
                  <For each={profile()!.languages!}>
                    {(item) => <li>{item.language || 'Unknown'} - {item.proficiency || 'N/A'}</li>}
                  </For>
                </ul>
              </div>
            </Show>
          </div>
        </section>
      </Show>
      </div>
      </div>
    </AdminShell>
  );
}