"use client";

import { useState, useEffect } from "react";
import ManagePageSkeleton from "@/components/shared/manage-page-skeleton";

interface InterviewQuestion {
  id: string;
  question: string;
  answer: string;
}

const defaultQuestions = [
  "What made you get into this industry?",
  "What do you enjoy most about your work?",
  "Describe your ideal client.",
  "What are your hobbies outside of work?",
  "What makes you unique?",
  "Any message for potential clients?",
];

export default function ManageInterviewPage() {
  const [answers, setAnswers] = useState<InterviewQuestion[]>(
    defaultQuestions.map((q, i) => ({ id: String(i), question: q, answer: "" }))
  );
  const [saving, setSaving] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/manage/interview")
      .then((r) => r.json())
      .then((data) => {
        if (data.answers?.length) setAnswers(data.answers);
      })
      .finally(() => setLoading(false));
  }, []);

  function updateAnswer(id: string, answer: string) {
    setAnswers((prev) => prev.map((a) => (a.id === id ? { ...a, answer } : a)));
  }

  async function handleSave() {
    setSaving(true);
    try {
      const res = await fetch("/api/manage/interview", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ answers }),
      });
      if (!res.ok) throw new Error("Failed");
      alert("Interview answers saved.");
    } catch {
      alert("Failed to save interview answers.");
    } finally {
      setSaving(false);
    }
  }

  if (loading) return <ManagePageSkeleton />;

  return (
    <div className="max-w-2xl mx-auto">
      <h1 className="text-3xl font-bold text-text mb-6">Interview</h1>
      <p className="text-text-muted mb-6">Answer these questions to help clients get to know you better.</p>

      <div className="space-y-5">
        {answers.map((item) => (
          <div key={item.id} className="bg-surface rounded-lg p-5">
            <label className="block text-sm font-medium text-text mb-2">{item.question}</label>
            <textarea
              rows={3}
              value={item.answer}
              onChange={(e) => updateAnswer(item.id, e.target.value)}
              className="w-full bg-background border border-surface-light rounded-lg px-4 py-2.5 text-text focus:outline-none focus:ring-2 focus:ring-primary"
              placeholder="Your answer..."
            />
          </div>
        ))}
      </div>

      <div className="mt-6">
        <button
          onClick={handleSave}
          disabled={saving}
          className="bg-primary hover:bg-primary-dark text-white px-6 py-2.5 rounded-lg font-semibold transition-colors disabled:opacity-50"
        >
          {saving ? "Saving..." : "Save Answers"}
        </button>
      </div>
    </div>
  );
}