import { useState, useRef } from "react";

const POSITIONS = [
  {
    id: "baker",
    title: "Baker",
    folderId: "1PTClOSw8xhRJwkDBvaiNT8_fyBXuh88E",
    type: "Full-Time / Part-Time",
    location: "Commissary — Los Angeles, CA",
    description:
      "Join our production bakery team. You'll be mixing, shaping, and baking artisan breads and pastries in a high-volume, craft-focused environment.",
    requirements: ["Early morning availability required", "Experience with laminated doughs a plus", "Team-oriented mindset"],
  },
  {
    id: "barista",
    title: "Barista",
    folderId: "1kz3XiS3ZQSlo6nOGxKCCUI0Yd53xnnLR",
    type: "Full-Time / Part-Time",
    location: "Cafe Locations — Los Angeles, CA",
    description:
      "Craft exceptional coffee experiences for our guests. We're looking for someone who takes their craft seriously and thrives in a fast-paced, hospitality-driven environment.",
    requirements: ["Specialty coffee experience preferred", "Warm, guest-first attitude", "Weekend availability"],
  },
  {
    id: "cafe-lead",
    title: "Cafe Lead",
    folderId: "1tpGIhTcaskTyaFwNSBr-mfni1lCGABwo",
    type: "Full-Time",
    location: "Cafe Locations — Los Angeles, CA",
    description:
      "Lead daily cafe operations, support your team, and help maintain the standards that make Colossus exceptional. This is a hands-on leadership role.",
    requirements: ["2+ years cafe experience", "Prior supervisory experience", "Strong communication skills"],
  },
  {
    id: "sous-chef",
    title: "Sous Chef",
    folderId: "1YQUerGEjiSB9w85LcwiIBmiOuhguqq93",
    type: "Full-Time",
    location: "Commissary — Los Angeles, CA",
    description:
      "Partner with our Pastry Chef to lead the bakery team. Own scheduling, quality control, and daily production flow while mentoring the next generation of bakers.",
    requirements: ["3+ years professional baking experience", "Leadership and scheduling experience", "Strong organizational skills"],
  },
];

const AVAILABILITY_OPTIONS = ["Weekdays", "Weekends", "Mornings", "Afternoons", "Evenings", "Overnight / Early Morning"];

export default function JobsPage() {
  const [selectedPosition, setSelectedPosition] = useState(null);
  const [step, setStep] = useState("listings"); // listings | form | success
  const [availability, setAvailability] = useState([]);
  const [resumeFile, setResumeFile] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const fileRef = useRef();

  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    experience: "",
    whyUs: "",
    startDate: "",
    hoursPerWeek: "",
  });

  function toggleAvailability(opt) {
    setAvailability((prev) =>
      prev.includes(opt) ? prev.filter((o) => o !== opt) : [...prev, opt]
    );
  }

  function handleApply(position) {
    setSelectedPosition(position);
    setStep("form");
    setForm({ name: "", email: "", phone: "", experience: "", whyUs: "", startDate: "", hoursPerWeek: "" });
    setAvailability([]);
    setResumeFile(null);
    setError("");
    window.scrollTo({ top: 0, behavior: "smooth" });
  }

  async function fileToBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result.split(",")[1]);
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  }

  async function handleSubmit() {
    if (!form.name || !form.email || !form.experience || !form.whyUs || !resumeFile) {
      setError("Please fill out all required fields and attach your resume.");
      return;
    }
    setError("");
    setSubmitting(true);

    try {
      const prompt = `You are a Google Drive file upload assistant. The user wants to upload application materials for a job applicant to Google Drive.

Applicant Details:
- Name: ${form.name}
- Email: ${form.email}
- Phone: ${form.phone || "Not provided"}
- Position Applied: ${selectedPosition.title}
- Years of Experience: ${form.experience}
- Availability: ${availability.join(", ") || "Not specified"}
- Desired Hours/Week: ${form.hoursPerWeek || "Not specified"}
- Earliest Start Date: ${form.startDate || "Not specified"}
- Why Colossus: ${form.whyUs}

Please create a text file in Google Drive with the folder ID "${selectedPosition.folderId}" containing all the above application information. Name the file "${form.name} - Application - ${new Date().toLocaleDateString()}". Return confirmation when done.`;

      const base64Resume = await fileToBase64(resumeFile);

      // Upload summary doc via Claude API with Google Drive MCP
      const summaryResponse = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 1000,
          messages: [{ role: "user", content: prompt }],
          mcp_servers: [{ type: "url", url: "https://drivemcp.googleapis.com/mcp/v1", name: "google-drive" }],
        }),
      });

      const summaryData = await summaryResponse.json();
      if (!summaryResponse.ok) throw new Error(summaryData.error?.message || "Upload failed");

      // Upload resume via Claude API with Google Drive MCP
      const resumePrompt = `Please upload a file to Google Drive with the following details:
- Parent folder ID: "${selectedPosition.folderId}"
- File name: "${form.name} - Resume.${resumeFile.name.split(".").pop()}"
- Content: base64 encoded content below
- Content MIME type: "${resumeFile.type}"
- Set disable_conversion_to_google_type to true

Base64 content: ${base64Resume}

Confirm when the resume has been uploaded.`;

      const resumeResponse = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 1000,
          messages: [{ role: "user", content: resumePrompt }],
          mcp_servers: [{ type: "url", url: "https://drivemcp.googleapis.com/mcp/v1", name: "google-drive" }],
        }),
      });

      const resumeData = await resumeResponse.json();
      if (!resumeResponse.ok) throw new Error(resumeData.error?.message || "Resume upload failed");

      setStep("success");
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch (err) {
      setError("Something went wrong. Please try again or email us directly.");
      console.error(err);
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div style={styles.page}>
      <style>{css}</style>

      {/* Header */}
      <header style={styles.header}>
        <div style={styles.headerInner}>
          <div style={styles.wordmark}>COLOSSUS</div>
          <div style={styles.headerSub}>Bakery & Cafe · Los Angeles</div>
        </div>
      </header>

      {step === "listings" && (
        <main style={styles.main}>
          <div style={styles.heroBlock}>
            <p style={styles.eyebrow}>We're Hiring</p>
            <h1 style={styles.heroTitle}>Come bake<br />with us.</h1>
            <p style={styles.heroBody}>
              We're building something worth showing up for. If you care about craft,
              take pride in your work, and want to be part of a team that does too — we'd love to meet you.
            </p>
          </div>

          <div style={styles.listingsGrid}>
            {POSITIONS.map((pos) => (
              <div key={pos.id} className="card" style={styles.card}>
                <div style={styles.cardTop}>
                  <span style={styles.cardType}>{pos.type}</span>
                  <h2 style={styles.cardTitle}>{pos.title}</h2>
                  <p style={styles.cardLocation}>{pos.location}</p>
                </div>
                <p style={styles.cardDesc}>{pos.description}</p>
                <ul style={styles.reqList}>
                  {pos.requirements.map((r, i) => (
                    <li key={i} style={styles.reqItem}>
                      <span style={styles.bullet}>—</span> {r}
                    </li>
                  ))}
                </ul>
                <button className="applyBtn" style={styles.applyBtn} onClick={() => handleApply(pos)}>
                  Apply for this role
                </button>
              </div>
            ))}
          </div>
        </main>
      )}

      {step === "form" && (
        <main style={styles.main}>
          <button style={styles.backBtn} onClick={() => setStep("listings")}>← All Positions</button>
          <div style={styles.formHeader}>
            <p style={styles.eyebrow}>Application</p>
            <h1 style={styles.formTitle}>{selectedPosition.title}</h1>
            <p style={styles.formLocation}>{selectedPosition.location}</p>
          </div>

          <div style={styles.formCard}>
            <Section label="About You">
              <div style={styles.row}>
                <Field label="Full Name *" value={form.name} onChange={v => setForm(f => ({ ...f, name: v }))} placeholder="Jane Smith" />
                <Field label="Email Address *" value={form.email} onChange={v => setForm(f => ({ ...f, email: v }))} placeholder="jane@email.com" type="email" />
              </div>
              <div style={styles.row}>
                <Field label="Phone Number" value={form.phone} onChange={v => setForm(f => ({ ...f, phone: v }))} placeholder="(323) 000-0000" type="tel" />
                <Field label="Earliest Available Start Date" value={form.startDate} onChange={v => setForm(f => ({ ...f, startDate: v }))} type="date" />
              </div>
            </Section>

            <Section label="Experience">
              <TextArea
                label={`Relevant experience for the ${selectedPosition.title} role *`}
                value={form.experience}
                onChange={v => setForm(f => ({ ...f, experience: v }))}
                placeholder="Tell us about your background — previous roles, skills, anything relevant..."
                rows={5}
              />
              <Field label="How many hours per week are you looking for?" value={form.hoursPerWeek} onChange={v => setForm(f => ({ ...f, hoursPerWeek: v }))} placeholder="e.g. 30–40" />
            </Section>

            <Section label="Availability">
              <p style={styles.fieldLabel}>When are you generally available? (Select all that apply)</p>
              <div style={styles.availGrid}>
                {AVAILABILITY_OPTIONS.map((opt) => (
                  <button
                    key={opt}
                    className="availChip"
                    style={{
                      ...styles.chip,
                      ...(availability.includes(opt) ? styles.chipActive : {}),
                    }}
                    onClick={() => toggleAvailability(opt)}
                  >
                    {opt}
                  </button>
                ))}
              </div>
            </Section>

            <Section label="Why Colossus?">
              <TextArea
                label="Why do you want to work with us? *"
                value={form.whyUs}
                onChange={v => setForm(f => ({ ...f, whyUs: v }))}
                placeholder="What draws you to Colossus specifically? What are you hoping to find in your next role?"
                rows={5}
              />
            </Section>

            <Section label="Resume">
              <p style={styles.fieldLabel}>Upload your resume * (PDF, DOC, or DOCX)</p>
              <div
                className="dropzone"
                style={styles.dropzone}
                onClick={() => fileRef.current.click()}
                onDragOver={e => e.preventDefault()}
                onDrop={e => {
                  e.preventDefault();
                  const f = e.dataTransfer.files[0];
                  if (f) setResumeFile(f);
                }}
              >
                <input
                  ref={fileRef}
                  type="file"
                  accept=".pdf,.doc,.docx"
                  style={{ display: "none" }}
                  onChange={e => setResumeFile(e.target.files[0])}
                />
                {resumeFile ? (
                  <div>
                    <div style={styles.fileName}>📄 {resumeFile.name}</div>
                    <div style={styles.fileSize}>{(resumeFile.size / 1024).toFixed(0)} KB · Click to replace</div>
                  </div>
                ) : (
                  <div>
                    <div style={styles.dropzoneIcon}>↑</div>
                    <div style={styles.dropzoneText}>Drag & drop or click to upload</div>
                    <div style={styles.dropzoneSub}>PDF, DOC, or DOCX</div>
                  </div>
                )}
              </div>
            </Section>

            {error && <p style={styles.error}>{error}</p>}

            <button
              className="submitBtn"
              style={{ ...styles.submitBtn, ...(submitting ? styles.submitBtnDisabled : {}) }}
              onClick={handleSubmit}
              disabled={submitting}
            >
              {submitting ? "Submitting..." : "Submit Application"}
            </button>
          </div>
        </main>
      )}

      {step === "success" && (
        <main style={{ ...styles.main, ...styles.successMain }}>
          <div style={styles.successBlock}>
            <div style={styles.successMark}>✓</div>
            <h1 style={styles.successTitle}>Application received.</h1>
            <p style={styles.successBody}>
              Thanks, {form.name.split(" ")[0]}. We've got your application for the <strong>{selectedPosition?.title}</strong> position.
              If your background is a good fit, someone from our team will reach out.
            </p>
            <button
              style={styles.successBtn}
              onClick={() => { setStep("listings"); setSelectedPosition(null); }}
            >
              View other openings
            </button>
          </div>
        </main>
      )}

      <footer style={styles.footer}>
        <span>© Colossus Bakery</span>
        <span>Los Angeles, CA</span>
      </footer>
    </div>
  );
}

function Section({ label, children }) {
  return (
    <div style={styles.section}>
      <div style={styles.sectionLabel}>{label}</div>
      <div style={styles.sectionBody}>{children}</div>
    </div>
  );
}

function Field({ label, value, onChange, placeholder, type = "text" }) {
  return (
    <div style={styles.fieldWrap}>
      <label style={styles.fieldLabel}>{label}</label>
      <input
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        style={styles.input}
        className="formInput"
      />
    </div>
  );
}

function TextArea({ label, value, onChange, placeholder, rows = 4 }) {
  return (
    <div style={styles.fieldWrap}>
      <label style={styles.fieldLabel}>{label}</label>
      <textarea
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        rows={rows}
        style={{ ...styles.input, ...styles.textarea }}
        className="formInput"
      />
    </div>
  );
}

const styles = {
  page: { minHeight: "100vh", background: "#F5F0E8", fontFamily: "'Georgia', serif", color: "#1A1410" },
  header: { borderBottom: "1px solid #D4C9B4", padding: "20px 40px", background: "#F5F0E8", position: "sticky", top: 0, zIndex: 10 },
  headerInner: { maxWidth: 900, margin: "0 auto", display: "flex", alignItems: "baseline", gap: 16 },
  wordmark: { fontSize: 18, fontWeight: 700, letterSpacing: "0.2em", fontFamily: "'Georgia', serif" },
  headerSub: { fontSize: 12, color: "#7A6E5F", letterSpacing: "0.05em" },
  main: { maxWidth: 900, margin: "0 auto", padding: "60px 40px" },
  heroBlock: { marginBottom: 64 },
  eyebrow: { fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#7A6E5F", marginBottom: 12, margin: "0 0 12px" },
  heroTitle: { fontSize: "clamp(48px, 8vw, 80px)", fontWeight: 400, lineHeight: 1.05, margin: "0 0 24px", fontFamily: "'Georgia', serif" },
  heroBody: { fontSize: 17, lineHeight: 1.7, color: "#4A3F35", maxWidth: 540, margin: 0 },
  listingsGrid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(380px, 1fr))", gap: 24 },
  card: { background: "#FBF8F2", border: "1px solid #D4C9B4", borderRadius: 4, padding: 32, display: "flex", flexDirection: "column", gap: 16, transition: "transform 0.2s, box-shadow 0.2s" },
  cardTop: { display: "flex", flexDirection: "column", gap: 4 },
  cardType: { fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "#8B7355" },
  cardTitle: { fontSize: 26, fontWeight: 400, margin: 0, fontFamily: "'Georgia', serif" },
  cardLocation: { fontSize: 13, color: "#7A6E5F", margin: 0 },
  cardDesc: { fontSize: 14, lineHeight: 1.65, color: "#4A3F35", margin: 0, flexGrow: 1 },
  reqList: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 },
  reqItem: { fontSize: 13, color: "#4A3F35", display: "flex", gap: 8 },
  bullet: { color: "#8B7355", flexShrink: 0 },
  applyBtn: { marginTop: 8, padding: "12px 24px", background: "#1A1410", color: "#F5F0E8", border: "none", borderRadius: 2, fontSize: 13, letterSpacing: "0.08em", cursor: "pointer", fontFamily: "'Georgia', serif", transition: "background 0.2s" },
  backBtn: { background: "none", border: "none", cursor: "pointer", fontSize: 13, color: "#7A6E5F", padding: 0, marginBottom: 40, letterSpacing: "0.05em", fontFamily: "'Georgia', serif" },
  formHeader: { marginBottom: 48 },
  formTitle: { fontSize: "clamp(36px, 6vw, 56px)", fontWeight: 400, margin: "8px 0 8px", fontFamily: "'Georgia', serif" },
  formLocation: { fontSize: 14, color: "#7A6E5F", margin: 0 },
  formCard: { background: "#FBF8F2", border: "1px solid #D4C9B4", borderRadius: 4, padding: 48, display: "flex", flexDirection: "column", gap: 0 },
  section: { borderBottom: "1px solid #E8E0D0", paddingBottom: 40, marginBottom: 40 },
  sectionLabel: { fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#8B7355", marginBottom: 24 },
  sectionBody: { display: "flex", flexDirection: "column", gap: 20 },
  row: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 },
  fieldWrap: { display: "flex", flexDirection: "column", gap: 8 },
  fieldLabel: { fontSize: 13, color: "#4A3F35", fontFamily: "'Georgia', serif" },
  input: { padding: "12px 14px", border: "1px solid #D4C9B4", borderRadius: 2, fontSize: 14, background: "#F5F0E8", color: "#1A1410", fontFamily: "'Georgia', serif", outline: "none", width: "100%", boxSizing: "border-box", transition: "border-color 0.2s" },
  textarea: { resize: "vertical", lineHeight: 1.6 },
  availGrid: { display: "flex", flexWrap: "wrap", gap: 10 },
  
  chip: { padding: "8px 18px", border: "1px solid #D4C9B4", borderRadius: 100, fontSize: 13, background: "#F5F0E8", color: "#4A3F35", cursor: "pointer", fontFamily: "'Georgia', serif", transition: "all 0.15s" },
  chipActive: { background: "#1A1410", color: "#F5F0E8", borderColor: "#1A1410" },
  dropzone: { border: "1.5px dashed #C4B9A4", borderRadius: 4, padding: "40px 24px", textAlign: "center", cursor: "pointer", background: "#F5F0E8", transition: "background 0.2s" },
  dropzoneIcon: { fontSize: 28, marginBottom: 8, color: "#8B7355" },
  dropzoneText: { fontSize: 14, color: "#4A3F35", marginBottom: 4 },
  dropzoneSub: { fontSize: 12, color: "#8B7355" },
  fileName: { fontSize: 15, color: "#1A1410", marginBottom: 4 },
  fileSize: { fontSize: 12, color: "#8B7355" },
  error: { color: "#C0392B", fontSize: 13, background: "#FDE8E8", border: "1px solid #F5C6C6", borderRadius: 2, padding: "10px 14px", margin: "0 0 8px" },
  submitBtn: { padding: "16px 40px", background: "#1A1410", color: "#F5F0E8", border: "none", borderRadius: 2