import { For, Show } from "solid-js";
import { isServer } from "solid-js/web";
import { resumeStore } from "~/stores/resume";

function PreviewPlaceholder() {
  return (
    <div class="p-6">
      <div class="mb-4 flex items-center justify-between">
        <h3 class="text-sm font-semibold text-[#a1a1aa] uppercase tracking-wider">
          Live Preview
        </h3>
        <span class="text-xs text-[#52525b]">Auto-updates</span>
      </div>
      <div class="bg-white text-gray-900 rounded-lg shadow-2xl overflow-hidden scale-[0.85] origin-top min-h-100 flex items-center justify-center">
        <div class="text-gray-400 text-sm animate-pulse">
          Loading preview...
        </div>
      </div>
    </div>
  );
}

export const ResumePreview = () => {
  const { resume } = resumeStore;

  return (
    <Show when={resume || isServer} fallback={<PreviewPlaceholder />}>
      <div class="p-6">
        <div class="mb-4 flex items-center justify-between">
          <h3 class="text-sm font-semibold text-[#a1a1aa] uppercase tracking-wider">
            Live Preview
          </h3>
          <span class="text-xs text-[#52525b]">Auto-updates</span>
        </div>
        <Show when={resume}>
          {/* Resume Preview Card */}
          <div class="bg-white text-gray-900 rounded-lg shadow-2xl overflow-hidden scale-[0.85] origin-top">
            <div class="p-6 space-y-5">
              {/* Header / Personal Info */}
              <header class="border-b border-gray-200 pb-4">
                <h1 class="text-2xl font-bold text-gray-900">
                  {resume.personal.fullName || "Your Name"}
                </h1>
                <div class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-sm text-gray-600">
                  <Show when={resume.personal.email}>
                    <span>{resume.personal.email}</span>
                  </Show>
                  <Show when={resume.personal.phone}>
                    <span>{resume.personal.phone}</span>
                  </Show>
                  <Show when={resume.personal.location}>
                    <span>{resume.personal.location}</span>
                  </Show>
                </div>
                <div class="flex flex-wrap gap-x-4 mt-1 text-sm text-blue-600">
                  <Show when={resume.personal.linkedin}>
                    <span>{resume.personal.linkedin}</span>
                  </Show>
                  <Show when={resume.personal.github}>
                    <span>{resume.personal.github}</span>
                  </Show>
                  <Show when={resume.personal.portfolio}>
                    <span>{resume.personal.portfolio}</span>
                  </Show>
                </div>
              </header>

              {/* Summary */}
              <Show when={resume.summary}>
                <section>
                  <h2 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2">
                    Summary
                  </h2>
                  <p class="text-sm text-gray-700">{resume.summary}</p>
                </section>
              </Show>

              {/* Experience */}
              <Show when={resume.experience.length > 0}>
                <section>
                  <h2 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2">
                    Experience
                  </h2>
                  <div class="space-y-3">
                    <For each={resume.experience}>
                      {(exp) => (
                        <div>
                          <div class="flex justify-between items-start">
                            <div>
                              <h3 class="font-semibold text-gray-900 text-sm">
                                {exp.title || "Job Title"}
                              </h3>
                              <p class="text-sm text-gray-600">
                                {exp.company || "Company"}
                                {exp.location && ` • ${exp.location}`}
                              </p>
                            </div>
                            <span class="text-xs text-gray-500 whitespace-nowrap">
                              {exp.startDate || "Start"} -{" "}
                              {exp.current ? "Present" : exp.endDate || "End"}
                            </span>
                          </div>
                          <ul class="mt-1 space-y-0.5">
                            <For each={exp.bullets.filter((b) => b.trim())}>
                              {(bullet) => (
                                <li class="text-xs text-gray-700 pl-3 relative before:content-['•'] before:absolute before:left-0 before:text-gray-400">
                                  {bullet}
                                </li>
                              )}
                            </For>
                          </ul>
                        </div>
                      )}
                    </For>
                  </div>
                </section>
              </Show>

              {/* Education */}
              <Show when={resume.education.length > 0}>
                <section>
                  <h2 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2">
                    Education
                  </h2>
                  <div class="space-y-2">
                    <For each={resume.education}>
                      {(edu) => (
                        <div class="flex justify-between items-start">
                          <div>
                            <h3 class="font-semibold text-gray-900 text-sm">
                              {edu.institution || "Institution"}
                            </h3>
                            <p class="text-sm text-gray-600">
                              {edu.degree || "Degree"}
                              {edu.field && ` in ${edu.field}`}
                              {edu.gpa && ` • GPA: ${edu.gpa}`}
                            </p>
                          </div>
                          <span class="text-xs text-gray-500 whitespace-nowrap">
                            {edu.startDate || "Start"} - {edu.endDate || "End"}
                          </span>
                        </div>
                      )}
                    </For>
                  </div>
                </section>
              </Show>

              {/* Skills */}
              <Show when={resume.skills.length > 0}>
                <section>
                  <h2 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2">
                    Skills
                  </h2>
                  <div class="flex flex-wrap gap-1.5">
                    <For each={resume.skills}>
                      {(skill) => (
                        <span class="px-2 py-0.5 bg-gray-100 text-gray-700 text-xs rounded">
                          {skill.name}
                        </span>
                      )}
                    </For>
                  </div>
                </section>
              </Show>

              {/* Projects */}
              <Show when={resume.projects.length > 0}>
                <section>
                  <h2 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2">
                    Projects
                  </h2>
                  <div class="space-y-2">
                    <For each={resume.projects}>
                      {(project) => (
                        <div>
                          <div class="flex items-center gap-2">
                            <h3 class="font-semibold text-gray-900 text-sm">
                              {project.name || "Project Name"}
                            </h3>
                            <Show when={project.url}>
                              <span class="text-xs text-blue-600">
                                {project.url}
                              </span>
                            </Show>
                          </div>
                          <p class="text-xs text-gray-700 mt-0.5">
                            {project.description}
                          </p>
                          <Show when={project.technologies.length > 0}>
                            <p class="text-xs text-gray-500 mt-0.5">
                              Tech: {project.technologies.join(", ")}
                            </p>
                          </Show>
                        </div>
                      )}
                    </For>
                  </div>
                </section>
              </Show>

              {/* Certifications */}
              <Show when={resume.certifications.length > 0}>
                <section>
                  <h2 class="text-sm font-bold text-gray-900 uppercase tracking-wide mb-2">
                    Certifications
                  </h2>
                  <div class="space-y-1">
                    <For each={resume.certifications}>
                      {(cert) => (
                        <div class="flex justify-between items-start">
                          <div>
                            <span class="font-medium text-gray-900 text-sm">
                              {cert.name || "Certification"}
                            </span>
                            <span class="text-sm text-gray-600">
                              {" "}
                              • {cert.issuer || "Issuer"}
                            </span>
                          </div>
                          <span class="text-xs text-gray-500">{cert.date}</span>
                        </div>
                      )}
                    </For>
                  </div>
                </section>
              </Show>

              {/* Empty State */}
              <Show
                when={
                  !resume.personal.fullName &&
                  resume.experience.length === 0 &&
                  resume.education.length === 0 &&
                  resume.skills.length === 0
                }
              >
                <div class="text-center py-8 text-gray-400">
                  <svg
                    class="w-12 h-12 mx-auto mb-3 opacity-50"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="1.5"
                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                    />
                  </svg>
                  <p class="text-sm">
                    Start filling in your details
                    <br />
                    to see the preview
                  </p>
                </div>
              </Show>
            </div>
          </div>
        </Show>
      </div>
    </Show>
  );
};