import { useAILookup, useCollection, useIdentity } from '@deplixo/sdk';
import SearchForm from './components/SearchForm.jsx';
import DealList from './components/DealList.jsx';
import SavedSearches from './components/SavedSearches.jsx';
import EmptyState from './components/EmptyState.jsx';

function App() {
  const { user } = useIdentity();
  const { items: allSearches, add: addSearch, remove: removeSearch } =
    useCollection('house-searches');

  const searches = (allSearches || []).filter(
    (s) => s.author?.id === user?.id
  );

  const [tab, setTab] = useState('search'); // 'search' | 'saved'
  const [results, setResults] = useState(null); // { query, deals }
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const lookup = useAILookup({
    example: {
      summary: 'Three competitive listings in the area with one standout deal.',
      marketContext: {
        medianPrice: 525000,
        pricePerSqftAvg: 310,
        trend: 'cooling',
        notes: 'Inventory rising slightly; sellers more open to concessions.',
      },
      deals: [
        {
          address: '1428 Maple Ridge Dr, Austin, TX',
          price: 489000,
          beds: 3,
          baths: 2,
          sqft: 1820,
          pricePerSqft: 269,
          yearBuilt: 1998,
          lotSize: '0.18 acres',
          dealScore: 87,
          dealRating: 'Great Deal',
          priceVsMarket: -12,
          highlights: ['Below median $/sqft', 'Recent kitchen remodel', 'Quiet cul-de-sac'],
          concerns: ['Older roof (15+ yrs)', 'No garage'],
          estimatedMonthly: 3150,
        },
      ],
    },
  });

  async function runSearch(query) {
    setLoading(true);
    setError(null);
    setResults(null);
    try {
      const prompt = `You are a real estate market analyst. Generate a realistic comparison of 5 representative house listings for the following search. Use current market knowledge for the area. Score each deal 0-100 based on price vs comparable homes, condition, location, and value. Be honest — include at least one mediocre listing for contrast.

Search criteria:
- Location: ${query.location}
- Budget: $${query.minPrice.toLocaleString()} - $${query.maxPrice.toLocaleString()}
- Bedrooms: ${query.beds}+
- Bathrooms: ${query.baths}+
- Property type: ${query.propertyType}
- Must-haves: ${query.notes || 'none specified'}

Return 5 deals sorted by dealScore descending. priceVsMarket is the % difference from local median (negative = below market). dealRating must be one of: "Steal", "Great Deal", "Fair Price", "Above Market", "Overpriced". estimatedMonthly is full PITI estimate.`;

      const data = await lookup.run(prompt);
      setResults({ query, ...data });
    } catch (e) {
      setError(e?.message || 'Search failed. Try again.');
    } finally {
      setLoading(false);
    }
  }

  async function handleSave() {
    if (!results) return;
    await addSearch({
      query: results.query,
      summary: results.summary,
      topDeal: results.deals?.[0] || null,
      dealCount: results.deals?.length || 0,
    });
  }

  function handleLoad(saved) {
    setTab('search');
    runSearch(saved.value.query);
  }

  return (
    <div className="app">
      <header className="app-header">
        <div className="brand">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7h-6v7H5a2 2 0 0 1-2-2V11z"
              stroke="var(--primary)" strokeWidth="2" strokeLinejoin="round" />
          </svg>
          <h1>DealNest</h1>
          <span className="tag">AI Home Deal Checker</span>
        </div>
        <nav className="tabs" role="tablist">
          <button
            role="tab"
            aria-selected={tab === 'search'}
            className={tab === 'search' ? 'tab active' : 'tab'}
            onClick={() => setTab('search')}
            data-testid="tab-search"
          >
            Search Deals
          </button>
          <button
            role="tab"
            aria-selected={tab === 'saved'}
            className={tab === 'saved' ? 'tab active' : 'tab'}
            onClick={() => setTab('saved')}
            data-testid="tab-saved"
          >
            Saved <span className="count">{searches.length}</span>
          </button>
        </nav>
      </header>

      <main className="main">
        {tab === 'search' && (
          <>
            <SearchForm onSearch={runSearch} loading={loading} />
            {error && (
              <div className="error" role="status" aria-live="polite">
                {error}
              </div>
            )}
            {loading && (
              <div className="loading" role="status" aria-live="polite">
                <div className="spinner" aria-hidden="true" />
                Analyzing market data and scoring deals…
              </div>
            )}
            {!loading && !results && !error && <EmptyState />}
            {results && (
              <DealList
                results={results}
                onSave={handleSave}
                alreadySaved={false}
              />
            )}
          </>
        )}
        {tab === 'saved' && (
          <SavedSearches
            searches={searches}
            onLoad={handleLoad}
            onRemove={removeSearch}
          />
        )}
      </main>

      <footer className="app-footer">
        <p>Estimates generated by AI. Verify all details with a licensed agent before making offers.</p>
      </footer>
    </div>
  );
}

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