import { useAI, useCollection, useReactions } from '@deplixo/sdk';


const OUTPUT_OPTIONS = [
  { id: "icebreaker", label: "Personalized icebreaker line" },
  { id: "linkedin_dm", label: "LinkedIn DM (intro)" },
  { id: "cold_email", label: "Cold email (intro)" },
  { id: "followup", label: "Follow-up / bump message" },
  { id: "research", label: "Research summary" },
  { id: "prep_notes", label: "Conversation prep notes" },
  { id: "fit_signal", label: "ICP fit signal" },
];

const FIT_LEVELS = { strong: "strong", medium: "medium", weak: "weak" };

function Spinner() {
  return (
    <div className="spinner-container">
      <div className="spinner-circle" />
      Analyzing...
    </div>
  );
}

function Section({ title, children, accent }) {
  const accentClass = accent ? `section-accent-${accent}` : "";
  return (
    <div className={`section-card ${accentClass}`}>
      <div className={`section-title ${accentClass}`}>{title}</div>
      {children}
    </div>
  );
}

function CopyButton({ text }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };
  return (
    <button onClick={copy} className={`copy-btn ${copied ? "copy-btn-copied" : ""}`}>
      {copied ? "copied" : "copy"}
    </button>
  );
}

function OutputBlock({ label, content, accent }) {
  if (!content) return null;
  const isString = typeof content === "string";
  return (
    <Section title={label} accent={accent}>
      {isString ? (
        <div className="output-block-content">
          <div className="output-text">{content}</div>
          <div className="output-copy-row">
            <CopyButton text={content} />
          </div>
        </div>
      ) : (
        <div className="output-text">{content}</div>
      )}
    </Section>
  );
}

function FitSignalCard({ fitSignal }) {
  if (!fitSignal) return null;
  const level = fitSignal.level || "medium";
  return (
    <div className={`fit-signal-card fit-signal-${level}`}>
      <div className={`fit-signal-level fit-signal-${level}`}>{level} fit</div>
      <div className="fit-signal-reasoning">{fitSignal.reasoning}</div>
    </div>
  );
}

function BioSetup({ bio, setBio, onSave }) {
  return (
    <div className="bio-setup">
      <div className="bio-setup-label">First-time setup</div>
      <p className="bio-setup-desc">
        Add your bio or value prop once — it'll be saved for every session.
      </p>
      <textarea
        value={bio}
        onChange={e => setBio(e.target.value)}
        placeholder="Who you are, what you sell, who you sell to, and why it matters. 2-4 sentences is enough."
        rows={4}
        className="form-input form-textarea"
      />
      <button onClick={onSave} disabled={!bio.trim()} className={`bio-save-btn ${bio.trim() ? "bio-save-btn-active" : ""}`}>
        Save bio →
      </button>
    </div>
  );
}

function BioSavedBar({ onEdit }) {
  return (
    <div className="bio-saved-bar">
      <span className="bio-saved-indicator">● Bio saved</span>
      <button onClick={onEdit} className="bio-edit-btn">edit</button>
    </div>
  );
}

function TargetSection({ companyUrl, setCompanyUrl, crunchbaseUrl, setCrunchbaseUrl, contactName, setContactName, contactTitle, setContactTitle }) {
  return (
    <div className="form-card">
      <div className="form-card-title">Target</div>
      <div className="form-fields">
        <div>
          <label className="form-label">Company website URL *</label>
          <input value={companyUrl} onChange={e => setCompanyUrl(e.target.value)}
            placeholder="https://acmecorp.com" className="form-input" />
        </div>
        <div>
          <label className="form-label">Crunchbase URL <span className="form-label-optional">(optional)</span></label>
          <input value={crunchbaseUrl} onChange={e => setCrunchbaseUrl(e.target.value)}
            placeholder="https://crunchbase.com/organization/acmecorp" className="form-input" />
        </div>
        <div className="form-grid-2">
          <div>
            <label className="form-label">Contact name</label>
            <input value={contactName} onChange={e => setContactName(e.target.value)}
              placeholder="Jane Smith" className="form-input" />
          </div>
          <div>
            <label className="form-label">Contact title</label>
            <input value={contactTitle} onChange={e => setContactTitle(e.target.value)}
              placeholder="VP of People" className="form-input" />
          </div>
        </div>
      </div>
    </div>
  );
}

function LinkedInSection({ linkedinCopy, setLinkedinCopy }) {
  return (
    <div className="form-card">
      <label className="form-label">LinkedIn profile copy *</label>
      <p className="form-hint">Paste the text from their LinkedIn profile page</p>
      <textarea value={linkedinCopy} onChange={e => setLinkedinCopy(e.target.value)}
        placeholder="Paste LinkedIn profile text here..."
        rows={6} className="form-input form-textarea" />
    </div>
  );
}

function OutreachGoalSection({ outreachGoal, setOutreachGoal }) {
  return (
    <div className="form-card">
      <label className="form-label">Outreach goal</label>
      <textarea value={outreachGoal} onChange={e => setOutreachGoal(e.target.value)}
        placeholder="e.g. Get a 20-min discovery call to explore fit..."
        rows={3} className="form-input form-textarea" />
    </div>
  );
}

function OutputSelector({ selectedOutputs, toggleOutput, ignoreLimit, setIgnoreLimit }) {
  return (
    <div className="form-card">
      <div className="form-card-title">Generate</div>
      <div className="checkbox-list">
        {OUTPUT_OPTIONS.map(o => (
          <label key={o.id} className={`checkbox-row ${selectedOutputs[o.id] ? "checkbox-row-active" : ""}`}>
            <div onClick={() => toggleOutput(o.id)} className={`checkbox-box ${selectedOutputs[o.id] ? "checkbox-box-checked" : ""}`}>
              {selectedOutputs[o.id] && (
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                  <path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
            </div>
            {o.label}
          </label>
        ))}
      </div>
      <div className="char-limit-section">
        <label className={`checkbox-row checkbox-row-limit ${ignoreLimit ? "checkbox-row-limit-active" : ""}`}>
          <div onClick={() => setIgnoreLimit(!ignoreLimit)} className={`checkbox-box ${ignoreLimit ? "checkbox-box-limit-checked" : ""}`}>
            {ignoreLimit && (
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
                <path d="M1 4L3.5 6.5L9 1" stroke="#f59e0b" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )}
          </div>
          Ignore 300-char limit (1st degree contact)
        </label>
      </div>
    </div>
  );
}

function ResultsDisplay({ results, contactName, onNewProspect, resultsRef, historyId }) {
  const { toggle, counts, loading: reactionsLoading } = useReactions(historyId || 'none');
  if (!results) return null;
  return (
    <div ref={resultsRef} className="results-container">
      <div className="results-header">— Briefing for {contactName || "Contact"}</div>

      <FitSignalCard fitSignal={results.fit_signal} />

      {results.icebreaker && <OutputBlock label="Icebreaker" content={results.icebreaker} accent="indigo" />}
      {results.linkedin_dm && <OutputBlock label="LinkedIn DM" content={results.linkedin_dm} accent="blue" />}
      {results.cold_email && <OutputBlock label="Cold Email" content={results.cold_email} accent="sky" />}
      {results.followup && <OutputBlock label="Follow-up / Bump" content={results.followup} accent="violet" />}
      {results.research && <OutputBlock label="Research Summary" content={results.research} accent="emerald" />}
      {results.prep_notes && <OutputBlock label="Conversation Prep" content={results.prep_notes} accent="amber" />}

      {historyId && !reactionsLoading && (
        <div className="results-reactions">
          {['👍', '❤️', '🔥'].map(emoji => (
            <button key={emoji} className="reaction-btn" onClick={() => toggle(emoji)}>
              {emoji} {counts[emoji] || ''}
            </button>
          ))}
        </div>
      )}

      <div className="results-footer">
        <button onClick={onNewProspect} className="new-prospect-btn">← New prospect</button>
      </div>
    </div>
  );
}

function HistoryPanel({ historyItems, historyLoading, onLoad, onDelete, onClearAll, showHistory, setShowHistory }) {
  if (historyLoading) return null;

  const sortedItems = historyItems
    ? [...historyItems].sort((a, b) => {
        const tA = a.value.timestamp || 0;
        const tB = b.value.timestamp || 0;
        return tB - tA;
      })
    : [];

  return (
    <div className="history-panel">
      <div className="history-header-row">
        <button
          onClick={() => setShowHistory(!showHistory)}
          className="history-toggle-btn"
        >
          {showHistory ? "▾" : "▸"} Search History ({sortedItems.length})
        </button>
        {showHistory && sortedItems.length > 0 && (
          <button onClick={onClearAll} className="history-clear-btn">Clear all</button>
        )}
      </div>
      {showHistory && (
        <div className="history-list">
          {sortedItems.length === 0 && (
            <div className="history-empty">No searches saved yet.</div>
          )}
          {sortedItems.map(item => {
            const v = item.value;
            const dateStr = v.timestamp
              ? new Date(v.timestamp).toLocaleDateString(undefined, {
                  month: "short",
                  day: "numeric",
                  hour: "2-digit",
                  minute: "2-digit",
                })
              : "Unknown date";
            const contactLabel = v.contactName || "Unknown contact";
            const companyLabel = v.companyUrl
              ? v.companyUrl.replace(/^https?:\/\//, "").replace(/\/$/, "").split("/")[0]
              : "Unknown company";
            const fitLevel = v.results && v.results.fit_signal ? v.results.fit_signal.level : null;

            return (
              <div key={item.id} className="history-item">
                <div className="history-item-main" onClick={() => onLoad(item)}>
                  <div className="history-item-top">
                    <span className="history-item-contact">{contactLabel}</span>
                    {fitLevel && (
                      <span className={`history-item-fit history-fit-${fitLevel}`}>
                        {fitLevel}
                      </span>
                    )}
                  </div>
                  <div className="history-item-company">{companyLabel}</div>
                  <div className="history-item-date">{dateStr}</div>
                </div>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    onDelete(item.id);
                  }}
                  className="history-item-delete"
                  title="Delete entry"
                >
                  ×
                </button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

function App() {
  const { items: bioItems, loading: bioLoading, add: addBio, update: updateBio } = useCollection("sales_prospector_bio", { personal: true });
  const { items: historyItems, loading: historyLoading, add: addHistory, remove: removeHistory } = useCollection("sales_prospector_history", { personal: true });

  const { generate, loading: aiLoading } = useAI();

  const [bioText, setBioText] = useState("");
  const [bioSaved, setBioSaved] = useState(false);
  const [showBioSetup, setShowBioSetup] = useState(false);
  const [bioItemId, setBioItemId] = useState(null);

  const [companyUrl, setCompanyUrl] = useState("");
  const [crunchbaseUrl, setCrunchbaseUrl] = useState("");
  const [linkedinCopy, setLinkedinCopy] = useState("");
  const [contactName, setContactName] = useState("");
  const [contactTitle, setContactTitle] = useState("");
  const [outreachGoal, setOutreachGoal] = useState("");
  const [selectedOutputs, setSelectedOutputs] = useState(
    OUTPUT_OPTIONS.reduce((acc, o) => ({ ...acc, [o.id]: true }), {})
  );
  const [ignoreLimit, setIgnoreLimit] = useState(false);

  const [loading, setLoading] = useState(false);
  const [results, setResults] = useState(null);
  const [error, setError] = useState("");

  const [showHistory, setShowHistory] = useState(false);

  const resultsRef = useRef(null);

  useEffect(() => {
    if (!bioLoading && bioItems) {
      if (bioItems.length > 0) {
        const saved = bioItems[0];
        setBioText(saved.value.bio || "");
        setBioItemId(saved.id);
        setBioSaved(true);
      } else {
        setShowBioSetup(true);
      }
    }
  }, [bioLoading, bioItems]);

  const saveBio = async () => {
    if (bioItemId) {
      await updateBio(bioItemId, { bio: bioText });
    } else {
      const result = await addBio({ bio: bioText });
      setBioItemId(result.id);
    }
    setBioSaved(true);
    setShowBioSetup(false);
  };

  const toggleOutput = (id) =>
    setSelectedOutputs(prev => ({ ...prev, [id]: !prev[id] }));

  const activeOutputs = OUTPUT_OPTIONS.filter(o => selectedOutputs[o.id]).map(o => o.id);

  const buildPrompt = () => {
    const charNote = ignoreLimit
      ? "No character limit on messages — write as long as needed."
      : "Keep LinkedIn DMs and follow-ups under 300 characters. Cold emails can be longer.";

    return `You are an expert B2B sales researcher and copywriter. Your job is to help a salesperson make a great first impression with a prospective contact.

USER'S BIO / VALUE PROP:
${bioText}

CONTACT INFO:
Name: ${contactName || "Unknown"}
Title: ${contactTitle || "Unknown"}

OUTREACH GOAL:
${outreachGoal}

COMPANY WEBSITE: ${companyUrl}
${crunchbaseUrl ? `CRUNCHBASE: ${crunchbaseUrl}` : ""}

LINKEDIN PROFILE (contact):
${linkedinCopy}

MESSAGE LENGTH RULE: ${charNote}

Based on all available information about this company and contact, generate ONLY the following outputs. Return your response as a JSON object with these exact keys (only include keys for requested outputs):

${activeOutputs.includes("icebreaker") ? `"icebreaker": A single sentence personalized icebreaker referencing something specific and genuine from their background or company. Not generic flattery.` : ""}
${activeOutputs.includes("linkedin_dm") ? `"linkedin_dm": A LinkedIn DM intro message. First-person, conversational, no buzzwords. Must feel human.` : ""}
${activeOutputs.includes("cold_email") ? `"cold_email": A cold email with subject line and body. Format as "Subject: ...\\n\\nBody: ..."` : ""}
${activeOutputs.includes("followup") ? `"followup": A short follow-up bump message for after no response. Light, not pushy.` : ""}
${activeOutputs.includes("research") ? `"research": A 3-5 sentence research brief on the company — what they do, their stage, recent signals, and why they might be relevant.` : ""}
${activeOutputs.includes("prep_notes") ? `"prep_notes": 3-4 bullet points of specific things to naturally mention or ask about in a conversation with this person. Format as a plain list.` : ""}
${activeOutputs.includes("fit_signal") ? `"fit_signal": An object with "level" (one of: "strong", "medium", "weak") and "reasoning" (1-2 sentences explaining the fit assessment).` : ""}

Return ONLY valid JSON. No preamble, no markdown fences.`;
  };

  const saveToHistory = async (generatedResults) => {
    const entry = {
      timestamp: Date.now(),
      companyUrl,
      crunchbaseUrl,
      linkedinCopy,
      contactName,
      contactTitle,
      outreachGoal,
      selectedOutputs: { ...selectedOutputs },
      ignoreLimit,
      results: generatedResults,
    };
    await addHistory(entry);
  };

  const run = async () => {
    if (!bioText.trim()) { setShowBioSetup(true); return; }
    if (!companyUrl.trim()) { setError("Company website URL is required."); return; }
    if (!linkedinCopy.trim()) { setError("LinkedIn profile copy is required."); return; }
    if (activeOutputs.length === 0) { setError("Select at least one output."); return; }

    setError("");
    setResults(null);
    setLoading(true);

    try {
      const prompt = buildPrompt();
      const raw = await generate(prompt);

      let parsed;
      if (typeof raw === "string") {
        const clean = raw.replace(/```json|```/g, "").trim();
        parsed = JSON.parse(clean);
      } else {
        parsed = raw;
      }

      setResults(parsed);
      await saveToHistory(parsed);
      setTimeout(() => resultsRef.current?.scrollIntoView({ behavior: "smooth" }), 100);
    } catch (e) {
      setError("Something went wrong generating results. Check your inputs and try again.");
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  const handleNewProspect = () => {
    setResults(null);
    setCompanyUrl("");
    setCrunchbaseUrl("");
    setLinkedinCopy("");
    setContactName("");
    setContactTitle("");
    setOutreachGoal("");
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const handleLoadHistory = (item) => {
    const v = item.value;
    setCompanyUrl(v.companyUrl || "");
    setCrunchbaseUrl(v.crunchbaseUrl || "");
    setLinkedinCopy(v.linkedinCopy || "");
    setContactName(v.contactName || "");
    setContactTitle(v.contactTitle || "");
    setOutreachGoal(v.outreachGoal || "");
    if (v.selectedOutputs) {
      setSelectedOutputs(v.selectedOutputs);
    }
    if (typeof v.ignoreLimit === "boolean") {
      setIgnoreLimit(v.ignoreLimit);
    }
    setResults(v.results || null);
    setError("");
    if (v.results) {
      setTimeout(() => resultsRef.current?.scrollIntoView({ behavior: "smooth" }), 100);
    } else {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  const handleDeleteHistory = async (id) => {
    await removeHistory(id);
  };

  const handleClearAllHistory = async () => {
    if (!historyItems || historyItems.length === 0) return;
    for (const item of historyItems) {
      await removeHistory(item.id);
    }
  };

  if (bioLoading) {
    return (
      <div className="app-root">
        <div className="app-container">
          <div className="loading-center"><Spinner /></div>
        </div>
      </div>
    );
  }

  return (
    <div className="app-root">
      <div className="app-container">
        <div className="header">
          <div className="header-label">Sales Intelligence</div>
          <h1 className="header-title">Prospect Briefing</h1>
          <p className="header-desc">
            Drop in a target. Walk away with a brief, a message, and a plan.
          </p>
        </div>

        {showBioSetup && (
          <BioSetup bio={bioText} setBio={setBioText} onSave={saveBio} />
        )}

        {bioSaved && !showBioSetup && (
          <BioSavedBar onEdit={() => setShowBioSetup(true)} />
        )}

        <HistoryPanel
          historyItems={historyItems || []}
          historyLoading={historyLoading}
          onLoad={handleLoadHistory}
          onDelete={handleDeleteHistory}
          onClearAll={handleClearAllHistory}
          showHistory={showHistory}
          setShowHistory={setShowHistory}
        />

        <div className="form-stack">
          <TargetSection
            companyUrl={companyUrl} setCompanyUrl={setCompanyUrl}
            crunchbaseUrl={crunchbaseUrl} setCrunchbaseUrl={setCrunchbaseUrl}
            contactName={contactName} setContactName={setContactName}
            contactTitle={contactTitle} setContactTitle={setContactTitle}
          />

          <LinkedInSection linkedinCopy={linkedinCopy} setLinkedinCopy={setLinkedinCopy} />

          <OutreachGoalSection outreachGoal={outreachGoal} setOutreachGoal={setOutreachGoal} />

          <OutputSelector
            selectedOutputs={selectedOutputs} toggleOutput={toggleOutput}
            ignoreLimit={ignoreLimit} setIgnoreLimit={setIgnoreLimit}
          />

          {error && <div className="error-bar">{error}</div>}

          <button onClick={run} disabled={loading || aiLoading} className={`generate-btn ${loading || aiLoading ? "generate-btn-loading" : ""}`}>
            {loading || aiLoading ? "Researching..." : "Generate briefing →"}
          </button>
        </div>

        {(loading || aiLoading) && (
          <div className="loading-center"><Spinner /></div>
        )}

        <ResultsDisplay
          results={results}
          contactName={contactName}
          onNewProspect={handleNewProspect}
          resultsRef={resultsRef}
        />
      </div>
    </div>
  );
}


function SearchHistory({ onSelectEntry }) {
  const { items, loading, remove } = useCollection('search_history', { order: 'desc' });

  if (loading) return null;
  if (!items || items.length === 0) return null;

  function formatDate(ts) {
    if (!ts) return '';
    var d = new Date(ts);
    var now = new Date();
    var diff = now - d;
    if (diff < 60000) return 'just now';
    if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
    if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
    return d.toLocaleDateString();
  }

  function getOutputSummary(selectedOutputs) {
    if (!selectedOutputs) return '';
    var labels = [];
    if (selectedOutputs.icebreaker) labels.push('Icebreaker');
    if (selectedOutputs.linkedin_dm) labels.push('DM');
    if (selectedOutputs.cold_email) labels.push('Email');
    if (selectedOutputs.followup) labels.push('Follow-up');
    if (selectedOutputs.research) labels.push('Research');
    if (selectedOutputs.prep_notes) labels.push('Prep');
    return labels.join(', ');
  }

  function handleRemove(e, id) {
    e.stopPropagation();
    remove(id);
  }

  return (
    <div className="search-history-panel">
      <div className="search-history-title">Recent Searches</div>
      <div className="search-history-list">
        {items.slice(0, 20).map(function(entry) {
          var outputSummary = getOutputSummary(entry.selectedOutputs);
          return (
            <div
              key={entry.id}
              className="search-history-entry"
              onClick={function() { onSelectEntry(entry); }}
            >
              <div className="search-history-entry-main">
                <div className="search-history-entry-name">{entry.contactName || 'Unknown'}</div>
                {entry.contactTitle && <div className="search-history-entry-title">{entry.contactTitle}</div>}
                {outputSummary && <div className="search-history-entry-outputs">{outputSummary}</div>}
              </div>
              <div className="search-history-entry-side">
                <div className="search-history-entry-time">{formatDate(entry.createdAt)}</div>
                <button className="search-history-remove-btn" onClick={function(e) { handleRemove(e, entry.id); }} title="Remove">×</button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}


function SearchHistoryManager() {
  var collectionHook = useCollection('search_history', { order: 'desc' });
  return { items: collectionHook.items, loading: collectionHook.loading, add: collectionHook.add, remove: collectionHook.remove };
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);