# Application Backend Integration & Refactoring Plan

This plan details the migration of the CaninaIran frontend application from using mock data to communicating entirely with the backend APIs, adding email/password authentication, and resolving issues with the pet profile forms.

## User Review Required
> [!IMPORTANT]
> - **Authentication:** The `User` model in the database currently does not have a password field. A new database migration will be required to add `password` to users.
> - **OTP Fallback:** For mobile login, since the SMS panel is not connected yet, we will return the generated OTP in the API response so it can be typed in manually. We will leave a `TODO` for the SMS panel integration.

## Open Questions
> [!WARNING]
> - For the new **Email/Password** registration, do we need email verification (e.g., sending a link) or is the account activated immediately upon registration?
> - Should we require the user to provide their mobile number even if they register via email?

## Proposed Changes

---
### 1. Database & Backend Auth [Backend]
Adds email/password authentication capabilities and standardizes the auth endpoints.

#### [MODIFY] [schema.prisma](file:///c:/Users/parsa/Desktop/work/caninoiran/backend/prisma/schema.prisma)
- Add `password String? @db.VarChar(255)` to the `User` model.
- Run `npx prisma migrate dev --name add_user_password`.

#### [MODIFY] [auth.controller.ts](file:///c:/Users/parsa/Desktop/work/caninoiran/backend/src/auth/auth.controller.ts)
- Add `@Post('register-email')` endpoint to accept `email`, `password`, `firstName`, and `lastName`.
- Add `@Post('login-email')` endpoint to accept `email` and `password`.

#### [MODIFY] [auth.service.ts](file:///c:/Users/parsa/Desktop/work/caninoiran/backend/src/auth/auth.service.ts)
- Implement `bcrypt` hashing for `registerEmail` and password verification for `loginEmail`.
- Update `sendOtp` to return the generated code in the response body (as a fallback before SMS panel is implemented) and add a `// TODO: Connect to SMS provider` comment.

---
### 2. Frontend Auth (Storefront) [Frontend]
Refactors the storefront authentication modal to remove mock tests and integrate real email/password + mobile/OTP login.

#### [MODIFY] [AuthModal.tsx](file:///c:/Users/parsa/Desktop/work/caninoiran/frontend/application/components/AuthModal.tsx)
- Remove the "ورود سریع تستی" (mock login) button entirely.
- Implement two tabs: "ایمیل و رمز عبور" (Email/Password) and "شماره موبایل" (Mobile OTP).
- Wire up the Email tab to `/auth/register-email` and `/auth/login-email`.
- Wire up the Mobile tab to `/auth/send-otp` (showing the OTP in a toast or console for now) and `/auth/verify-otp`.
- Integrate the returned JWT with the `userStore`.

---
### 3. Pet Profile Update Form [Frontend]
Resolves the issue where updating the pet profile in the multi-step form sends an incomplete payload to the backend.

#### [MODIFY] [PetProfileWizard.tsx](file:///c:/Users/parsa/Desktop/work/caninoiran/frontend/application/components/PetProfileWizard.tsx)
- Update the `handleComplete` or `onSubmit` function to ensure it merges the state of all wizard steps (Name, Breed, Age, Weight, Activity Level, Medical Conditions).
- Ensure the payload strictly matches what the backend `PUT /api/pets/:id` expects.

#### [MODIFY] [usePetStore.ts](file:///c:/Users/parsa/Desktop/work/caninoiran/frontend/application/lib/store/usePetStore.ts)
- Verify `updatePet` action properly merges changes and reflects the server response.

---
### 4. Home Page De-mocking [Frontend]
Currently, several sections in the Home page (`page.tsx`) rely on mock data or hardcoded content.

> [!NOTE]
> **List of Mocked/Hardcoded Items in Home Page:**
> 1. **SmartAdvisor:** Symptoms and rules are hardcoded in the frontend. It doesn't fetch rules from the backend.
> 2. **FeaturedProducts:** May need to be verified if it uses real `api.get('/products')` or mock fallback.
> 3. **VetGallery:** Vet images and testimonials are hardcoded.
> 4. **Categories/Links:** Links to `/shop` and `/wiki` are static HTML.
> 5. **Hero Section:** Banners and text are static.

#### [MODIFY] [page.tsx](file:///c:/Users/parsa/Desktop/work/caninoiran/frontend/application/app/page.tsx)
- No immediate file changes if we just wanted the list, but we will wrap components to fetch data dynamically where applicable.
- For `SmartAdvisor`, we will ensure it uses the real database.

---
### 5. Blogs/Wiki Integration [Frontend & Backend]
Connects the Wiki page to the real backend database instead of hardcoded articles.

#### [MODIFY] [wiki/page.tsx](file:///c:/Users/parsa/Desktop/work/caninoiran/frontend/application/app/wiki/page.tsx)
- Replace static blog cards with `api.get('/blogs')` or Server-Side Rendering (SSR) fetching from the database.
- Create dynamic routing `/wiki/[slug]/page.tsx` for individual blog articles.

## Verification Plan

### Automated Tests
- Run `npm run build` in both backend and frontend to ensure no type errors.

### Manual Verification
- **Auth:** Open the application, register a new account via Email and Password, log out, and log back in. Try mobile OTP login and confirm the OTP is in the network response.
- **Pets:** Go to the pet profile dashboard, edit a pet's attributes across multiple steps, save, and refresh the page to verify persistence.
- **Blogs:** Create a blog post in the Admin Panel, navigate to `/wiki` in the storefront, and verify it appears.